While many assets were produced over the duration of this project, annotated wireframes were the most significant handoff to the teammates that were responsible for user interface design.
Needing to understand why only 25% of high school graduates are prepared for academic success in college, we crafted a research plan that included qualitative and quantitative methods. We also needed to understand the tech use of our user in order to understand what platform they use best. Our research defined who the user was, what their pain points were, and what needs they had.
- Understand the user’s needs and frustrations in college preparation
- Understand the user’s attitudes, behaviors, and use towards tech
- Interviews: user, influencer, subject matter expert
- Domain research and competitive analysis
We crafted a survey that asked high school students to rate their feelings towards college and college preparation overall. We also asked about tech use and favorite apps.
Other groups in the class had the same prompt, so all UX teams recruited and conducted interviews for all groups to utilize. In all, 23 user interviews were remotely conducted with parents, students, teachers, and school administrators. This allowed us to understand current processes, attitudes, and thoughts on college preparedness and tech use all across educational spaces.
We sought out different existing solutions in the space to understand what possibilities existed. We read articles about classroom disruptions, studies done on tech use in the classroom, and existing research on success rates of college freshman and graduation rates within five years of beginning a degree.
We looked at different spaces in the domain of college preparation. As further defined our solution, we came back and revisited who our competitors would be. Our scope included not just college-specific tools but career prep tools.
Understanding the user
We had insights from each of these research methods. Each insight was written on a post-it and stuck to a wall. From there we organized the insights into buckets. This allowed us to understand trends in the data and identify a problem for the user.
From affinity mapping we found that:
- Students want to understand how to begin college prep
- Students learn best from real life people and stories
- Students do not feel high school prepares for college
- Emotional preparation is important to college readiness
- Confused at connecting college major to desired career
The biggest insight we had into students' tech usage was that while the split of preferred device was 50:50 between smartphones and computers, nearly all survey respondents had a smartphone device or tablet. Not all had access to or the knowledge of how to use a computer.
Students from lower income homes were most likely to be affected by the problem, (lack of preparedness for college), and were also most likely to not have access to computers. This was considered as we decided on a mobile application for our solution.
The defined problem
Many students face anxiety due to lack of information and resources necessary for success after high school.
They harbor interests and skills that are often underrepresented in school, resulting in an information gap that inhibits confidence when making higher education and career decisions.
The research insights indicated to us who our users were and that there were two distinct types of users. Both personas are students who face uncertainties toward their future but ultimately have very different ideas of what a successful future means to them.
Knowing who our users were and what struggles they had towards their future helped give us something to target when designing a solution.
We created personas to help us keep our users in mind as we developed our solution.
As a result of the understanding and define parts of our process, we were able to empathize with our user and their needs. This enabled us to ideate a solution for them.
Knowing that we needed a mobile solution, our team of four all participated in the process for ideation.
When sketching my focus was on:
- How students couldn't relate their current interests to their future studies
- That relating to real life people and experiences is important
- Recognition over recall will be important to include because of the user's uncertainty
- Opportunities to create and implement microinteractions
We looked at each others concepts and critiqued them. Two were chosen to develop further.
Low fidelity wireframes of the two chosen concepts.
We used paper prototypes and an InVision clickthrough prototype to get validation on our concept and help us determine a direction.
Annotated wireframes were developed in Axure. They were shared with two UI designers who explored their different directions. User testing ultimately determined one direction and helped give us direction for a hypothetical future iteration.
Wireframes were developed and annotated in Axure. We sketched screens on a whiteboard prior to creating them in Axure for three reasons:
- It helped us communicate and make sure we were on the same page.
- Allowed for us to identify errors and flaws in our concept
- Let us reiterate and make changes quickly
We constructed user task flows to provide context for using the app. We also used it to explain processes that we couldn’t prototype given the restrictions of the tool, like the log-in process that included error states.
The whiteboard once we got the hang of it (above) and the final version in Axure (below).
We also created an app map of all the proposed and necessary screens for the application.
The Axure files for the wireframes, app map, and user flows have been uploaded to AxShare for viewing:
Using Proto.io, my UX design partner created the prototype from one of the UI concepts. We developed this UI concept because we were on a timeline and this team member's screens were completed very quickly.
Proto.io doesn’t allow for collaboration, so I trusted my UX partner to do the majority of the work on the prototype. I did work with him to provide input on microinteractions that I had designed in the wireframes and was able to create some of them in Proto.io myself.
Marketing Landing Page
The UI designer who created the concept that we took to the prototype also created a mock-up of marketing landing page. Using his mock-up, I created the webpage using HTML5 and CSS3 while my UX partner worked on the prototype.
Unfortunately, I did not have time to make it responsive, so it is best viewed from a desktop browser. The link to the web page is at the end of this case study.
User testing was done with five users through video chat at the user's convenience using the Proto.io prototype.
All sessions were done remotely using screensharing applications. We were able to see the testee's interactions with the prototype while they provided voiceover.
We also showed the testees the alternate visual design for the application and asked which style they preferred. Overwhelming they chose the design seen because it was "edgier" and "cooler" than the other design. The other design had less imagery and utilized the color yellow and a slightly different shade of green on a white background.
This design was preferred by the users to an alternate design. Users described it as "darker and edgier" than the alternate design. (The alternate design's primary colors were white, yellow, and green.)
The application was well received. Users liked the autonomy the app gave them. The college and majors page did elicit some confusion. Moving forward, additional user testing should be done to understand what users expect from this screen.
Completing this project was beneficial for me as a UX Designer because it brought clarity to the ambiguity of learning the user-first design process. I believe that doing something is the best way to learn it. Each step of the process made more sense through practice.