ABIGAIL CHESTER
Pathways
My role: User research, wireframe development and prototyping, UI design, usability testing
Results: Created novel mobile application for teenagers to discover and organize potential options post high school graduation; organized expansive amount of information in a clear, consolidated way
Overview
Myself and 3 of my peers were thinking back to when we were graduating high school and how stressful it was to decide what our next step was. There are so many different paths teenagers can take after they graduate high school- college, trade school, or right into the workforce. Something that would have helped us with our decision would have been somewhere we could easily explore and organize our options, and we wanted to design that for future graduating seniors going through the same struggle.
Background
Pathways is a mobile application that consolidates graduating seniors’ options post graduation in an organized way in order to aid them in their exploration. Due to time constraints, we only designed the path to college, but would plan to build out the trade school and workforce options if more time was available.
Problem & Pitch
Planning for the unknown can be frustrating, overwhelming and daunting. Current solutions put the burden on the user to find and organize relevant information, and are sometimes downright dry. Pathways is a centralized, tailored solution that works with your preferences to get you where you want to be. Explore resources related to college, trade school, or careers, track your applications, and save what’s relevant to you — the world is at your fingertips!
Design Process
For this project, we used an iterative design process, starting with user research/persona building, then leading into the design phase, and finally the testing phase. For this specific project, we spent a lot of time in the design phase, making sure to perfect all of the details and feedback our peers gave us. Here’s a roadmap of our process:
Research Phase
First, we narrowed down our target audience to graduating high school seniors looking to go to college. We made two personas to exemplify our audience shown below:
Guiding Themes & UX Requirements
Pathways aims to personalize the college exploration experience by providing relevant colleges based on user preferences. Based on the problem above and our goal for the project, we came up with some UX requirements to keep in mind during the process:
Engagement
Since our target audience is relatively young, keeping the user interested and engaged is crucial to prevent them from bouncing.
Scannable
To minimize information overload in an application that inherently includes lots of information, we want to organize it in a way that is easily scannable.
Personalization
Since there are so many colleges around the country, keeping the results custom to the user is super important when it comes to relevancy.
Organization
Sure, there are many sites that give you information about different schools, but having a system that organizes all of the users' favorites is important and encourages retention.
Based on our personas and UX requirements, we then had a whiteboard session to create a user flow diagram to solidify our main pages and all the different ways the user gets from point A to point B. Our most important pages to the flow of the application were the homepage, quiz, university explorer, resources, and profile. Here’s how our user flow diagram turned out:
Design Phase
Now that we had a rough idea of the sitemap, we needed to narrow down what information should be included on what page. When someone is searching for a college to attend, there is a lot of information needed to make an informed decision, like location, culture, academic programs, price, requirements, scholarships, clubs, living situations, etc. We knew all of this information had to be included, but we didn’t want information overload to deter the users. We needed a way to organize all of this information. We decided to keep the information to a minimum on the University Explorer page (the page where the user is shown recommended colleges, popular colleges, and more) by showing just a photo and the name of the school. From there, the user can tap on the school that piques their interest and get the full rundown of what the school has to offer.
Next, we went into sketching our main pages. Each of us in the group sketched out potential ways to set up our main pages (listed above). Once we all had time to brainstorm and sketch out each of the 5 pages, we came together and went through each as a team. We took the best elements from every sketch and combined them into one mega sketch full of all of our best ideas, which included a nav bar at the bottom where the user can navigate to different sections of the site (profile, home, search), schools listed by different categories (‘For You’, Popular, etc), ways to favorite different schools, and more. The sketches solidified the layouts and the vibe we were going for so that everyone was on the same page moving forward. We wanted to establish consistency early.
Goal #1
Consistency
From there, we transformed our sketches into low-fidelity wireframes using Figma. We were all assigned equal pages to wireframe based off of our initial ideas in the sketches. I wireframed 7 pages including the University Explorer page, Application Tracker page, and all of their subpages. This was when we really started to see it all come together. We reconvened after we were finished with our low-fidelity wireframes to once again establish consistency between our pages. We all made some minor tweaks here and there to make sure all of the pages look as if they were designed by one person.
Goal #2
Scannable
At this point, we began our iterations of testing. We wanted to start testing our design early to mitigate some big issues before spending a lot of time adding UI and prototyping. We ran some usability tests with our peers and found there were some issues with user control and freedom, one of Nielson’s heuristics. We needed some more options that allow the user to navigate through the application at their will, which meant making sure there was always an “exit” available. Some other critiques they suggested were to slightly adjust the layout of the Application Tracker page, to adjust some features in the Profile, and to add icons in the bottom nav bar.
Once we made the changes suggested by our peers, it was time to move into the high fidelity prototyping phase. We again used Figma for this phase and added UI using the brand guidelines we came up with, and also prototyping elements to come up with this full digital prototype:
Important Features
Quiz
The users filled out a quiz when they signed up for the application to track their preferences on what college they would like to go to. Some example questions include preferences on school size, sports, clubs, etc. Our plan was to take the user’s answers and use an algorithm to match their preferences to schools that fit their answers.
Why This is Important
This quiz not only helped us to reach our goal of personalization, but also kept our users engaged. Teenagers don’t have the longest attention span, and gamifying anything helps to keep attention and motivation to continue using an application. Personalization also helps with continued use of an application because if the user sees that the content is catered toward them, they’re going to feel a sense of belonging and care from the application, enticing them to continue using it in the future. Research has shown generic content doesn’t keep the users attention as long as custom content does, so that was an important feature we had to keep in mind.
Goal #3
Personalization
Application Tracker
The Application Tracker was our way users can keep the information they've consumed organized. Here, users can save specific schools they are interested in, have applied to, and have been accepted into. The user can drag and drop schools in different categories if they’ve changed their mind on something, or they can easily scan through the different schools they’ve saved prior. This is also another way for the user to get to the school’s information easily, as when the user taps on the school from the Application Tracker, it takes them to the school’s information page.
Why This is Important
This further personalizes the application experience by allowing the users to keep their preferences in schools stored in one place. It also saves their information in a place where they can come back to, look at, and update easily, This way, users can save schools that they’re iffy on and come back to refresh themselves on the information, or they can easily track their favorite schools and what requirements those schools have for acceptance.
Goal #4
Organization
University Explorer
The University Explorer page is where users are given a “feed” full of different universities to browse based off of their results to the quizzes. This is also where the user can browse any school of their choosing, whether the quiz says they’re compatible or not. They can search for a specific school as well to get the required information they’re looking for.
Why This is Important
Again, this helps keep the application’s usage personal to the user. The way the University Explorer is set up minimizes information overload while still giving important information to the user, which was one of our guiding themes we had talked about in the beginning of our project.
Learning & Takeaways
This project was a really fun project to complete. I got the opportunity to collaborate with my peers and tap into my more creative side in the multiple brainstorming sessions we conducted. This project got me in deep with Figma and using wireframing/prototyping software, as I wasn’t super familiar beforehand.
Since this project was done over a semester, we did not have time to incorporate all of our ideas – we were always thinking big, but had to keep reminding ourselves of the scope of the project. Initially, we wanted to create similar designs to include exploration of careers and trade schools (given our secondary persona), but did not have sufficient time to complete that. If we were to continue on this project, we would expand the application to include even more options for teenagers.
Another feature we wanted to implement was a social feature, such as a board where users could post questions about specific schools, application advice, or even to find a potential roommate. Again, this was outside of the scope of our project, but would be a useful feature to include in the future.