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.
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 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.
"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!"
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:
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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:
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:
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.
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
Areas To improve