How American Applications Are Done.
I lead the UX/UI design of Application Nerd a web app being created to help international high school students navigate the American university application process.
Context & Role
In this freelance role, I served as UX/UI designer. Responsibilities included competitor research, information architecture, usability testing, brand style guide, and UX design.
Design Problem
Design a web app to help international high school students navigate the university application process in the United States. The design must present data specific to international student goals in a user-friendly way, build trust, and be culturally appropriate for a wide range of countries.
Duration
7 Weeks
Tools
- Figjam
- Figma
- Webflow
Client Testimonial
"Hiring Shelby Thomas was the best decision I made! Her project management skills kept the project moving forward on time and on budget. I was most impressed by her ability to use data without sacrificing the creative process. But more than anything I felt like she was truly invested in my project!"
DESIGN PROCESS
Understand
- Competitor research
- Create user stories
- Create user flows
- Create information architecture
Ideate
- Generate initial design ideas
- Execute usability testing on prototype
- Finalize responsive mid-fidelity wireframes
Design
- Visual design & style guide
- A/B Testing and Usability Testing
- Finalize responsive high-fidelity wireframes
UNDERSTAND
Define Objective & Scope
I began the process of understanding the Application Nerd project by going through the client's design requirements and market research from conversations with international high school students and university representatives. Per the client’s market research, the web app must include the ability to search/filter for universities, curate a university list, compare universities, have an application to-do list, and host articles.
From these requirements, I began by creating 12 user stories to guide the competitor research and early design process. Some examples include:
- As an international high school student, I want to be able to compare universities side by side to easily see which one is the best fit for me.
- As a high school student, I want to view the most relevant details to me in the search results before I further research a university so I don’t waste my time.
- As a busy student, I want to a list of the steps I need to take to apply to universities in the United States and check them off as I go so that I know how to complete the application process correctly.
Competitor Research
The client had already executed some competitor research from a business perspective, so we pared down my competitor research to gain knowledge of the industry and existing UX/UI patterns used for university research sites.
I researched competitors that target U.S. markets and international markets but took a deep dive into the international competitors.
User Flows
From there I created detailed user flow diagrams for each user story. My goal was to break down all the screens for all possible routes for a user to accomplish a task successfully. This process forced me to think through all the screens that must be made during the mid-fidelity design process.
Information Architecture
With the user flows completed, I created two versions of the information architecture of the site. One simplified version with just the pages and how they are interrelated as well as one detailed version with page content and major features.
At this point, I held a check-in call with the client to discuss my findings and the architecture of the app. After a few minor revisions, the user stories, user flows, and information architecture were finalized.
IDEATE
Low-Fidelity
The early stages of the design process are difficult because it requires the exploration of very minimally thought-out ideas. I started in sketchbooks and quickly moved to Figma to explore designs.
I knew we were likely to build in Bubble, a desktop-first platform to build web apps, but to test in mobile because our user base is international students with varying access to computers and wifi. With that in mind, I chose to design mobile, tablet, and desktop screens simultaneously to avoid any responsive issues by picking one size to design exclusively and then adjusting the design to other sizes.
Keeping a responsive perspective also allowed me to ensure I was not creating designs that were not feasible to develop.
Usability Testing
To prepare for usability testing, I created a usability testing plan and reviewed that and the designs with my client. After getting feedback and approval I created a prototype.
We scheduled calls with seven high school and college students from a variety of countries including Bangladesh, South Africa, Italy, China, and the United States.
Along with usability testing questions, we curated a list of questions about desired data and trustworthiness for after the test. Looking back on this process, I would have liked to do formal user interviews during the “Understand” portion of the project so that this call was solely focused on testing the prototype, but it was not in the budget to do so.
Here are some examples of changes I made to the design based on usability testing results:
Search Page
Students were confused if they could click University Preview Card to open another page of the web app. To make the University Preview Card appear more clickable I added a view more details button.
Before
After
Resources Page
Students did not recognize the ghost buttons as filters. To make the ability to search and filter articles clearer I added a search bar and labeled the filter functionality.
Before
After
University List Page
Students wanted the ability to assign a status to each university saved on their University List page. I added a dropdown with 6 statuses to choose from.
Before
After
To-do List Page
In addition to wanting to see the percentage of tasks completed, students wanted a general checklist of tasks they need to complete that are not specific to a university.
Before
After
After the improvements were made from the usability testing results, I finished up the mid-fidelity designs by creating all necessary states including error, success, filters, etc.
DESIGN
Brand & Style Guide
I started the visual design process by researching the meaning of colors in Eastern Cultures, particularly China and India, where our largest user base is likely to be. I cross-referenced those colors with their Western Culture definitions.
Based on my research, I narrowed it down to two color palette options - Orange & Blue or Green & Blue. To be able to collect more information we moved a round of online usability testing (via Useberry) until after the brand design started to take shape. We A/B tested these color palette options on an early version of the high-fidelity design of the home page.
Our same seven students as before participated in the online usability testing. Interestingly, the Blue & Green option won with the student by one vote, but we decided to go with the Orange & Blue color palette for a few reasons:
- One vote is a very marginal amount to win by
- Some of the student's comments on why they chose that color palette were not relevant to the overall app (ie. “these are my (personal) favorite colors”, etc.)
- Many competitors have Orange as a brand color
- Orange & Blue had the more relevant cultural associations for what we want to the brand accomplish across all countries
The survey also had them vote on a logo and there was a clear winner there, so we proceeded with the owl logo.
From there I finalized the brand & style guide with a unique combination of illustrations with images in them and stylized icons.
Usability Testing Round 2
The remainder of the test asked them to complete the major workflow of filtering for a college. Two students dropped off, but there was no pattern as to why so we proceeded with the design as is.
During an early conversation with the developer, we discovered that we overlooked adding admin portal designs to the project scope. The admin dashboard needed to accomplish the following things:
- Ability to edit, delete, and reset passwords for users
- Ability to add, edit, and delete articles
- Ability to add, edit, and delete universities
At this point, I completed all high-fidelity wireframes for the customer-facing web app and admin dashboard using the newly developed style guide to update the Figma components and held a feedback meeting with my client.
Retrosepctive
At the end of each project, I like to think back on what went well and what can be improved for the next project:
What Went Well
- Creating detailed user flows helped me think through all the possible states and routes the user would need to take to accomplish a task.
- Usability testing with several users during the mid-fidelity stage helped us add aspects to the design.
- Although it was a lot of work, designing all sizes somewhat simultaneously allowed for easy prep for mobile usability testing, clear communication with my client, and almost no concerns from developers on feasibility. In the future, I would use a similar process but hold off on most screens until the design is in a more finalized stage.
Areas To improve
- Advocate that the scope allows for user interviews early in the design process and then the second set of calls dedicated usability testing to mid-fidelity designs
- Make sure to discuss if there is a need for an Admin Dashboard in the early stages of scoping out the projects
MOCKUPS
