Understanding our Audience

Before any designing, we met with potential users age 10-18 to get a feel for how our audience thinks. We orchestrated 23 user interviews, ranging from 15 to 30 minutes each, to see what students knew, wanted to know, and didn’t know about the college process. From our findings, we made an affinity diagram to reveal in what ways college is unaccessible and incomprehensible. From the problems we derived from the interviews, we created how might we statements. These statements helped us target the ways in which we can make college most understandable and accessible. After a round of sticky decisions with our how might we statements, we chose the most meaningful five to guide us in our design process.

Color and Typography

We aimed to have a youthful, fun, bright, and friendly look and feel. Ultimately we chose to use a mix of Poppins and Nunito typefaces. These best conveyed our approachable and fun personality for the app. We went with saturated colors that we toned up and down to meet contrast standards and WCAG AAA compliance in our high fidelity designs. These design choices kept us in line with our goals to create a product for kids that feels accessible and easy to understand and use.

Design System

Before converting our low fidelity wireframes into high fidelity mockups, we needed a design system. I took ownership of creating and organizing a design system to meet our needs in order to accelerate the design process as well as to simplify the developer handoff in the future. As this was a timely project, the design system was created in just a few weeks and was designed to meet our prototyping needs for our limited scope.

Creating a design system helped our team keep our work consistent and uniform. Below is a tag component in use for our survey feature that designers can change types and state of with ease and speed.

User Testing

After creating our mid and high fidelity prototypes, we conducted a second and third round of user research. We divided 30+ users up between the eight of us to get feedback on our prototypes. We carried out our interviews in pairs on zoom and had the users share their screen as they attempted to navigate through the prototype. We silently took notes as they clicked through and afterwards asked them additional questions to get as much information as possible.

We found many users struggled with the same tasks and had similar desires for features we hadn’t included initially. From these tests, we were able to make changes to our designs to create a less confusing and more well rounded experience for the user. Our findings made it possible to adapt our prototype to our users wants and needs to better meet our product goals.

This was my first time conducting user tests at such a large scale and I learned how valuable it is to sit back and let the users explore, struggle, and talk about what is challenging, confusing, helpful and exciting to them. This insight was incredibly valuable for us to see where we were meeting needs and where we needed to iterate further to create a better user experience.

High Fidelity Designs

Finally, we converted wireframes into high-fidelity designs. I was responsible for the A-G class and survey flows. In addition I helped other designers create components for their flows in order to streamline their design process and help our team meet our end of quarter goal.