Case Study
Uspire
A B2C mobile app that facilitates test practice, fosters connections with guidance counselors, and offers educational support for students.
Home
Uspire is a platform democratizing college admissions consulting by empowering independent education consultants with advanced technology, tools, and resources, leveling the playing field with established industry players. It also offers a transparent marketplace connecting students with top-notch counselors. Uspire's ultimate goal is to establish a comprehensive study abroad ecosystem.
The Problem
Uspire needed help bringing their vision to life. Their objective was to establish a cutting-edge platform that empowers students to hone their exam skills, connect with expert counselors, and access global support networks.
The Solution
Using extensive research, team collaboration, and numerous design sessions, our dedicated team crafted a product that fully captured the essence of the 3 user stories entrusted to us by the client.
- Tools
- Figma
- Slack
- Zoom
- Loom
- Google Docs
- Process
- Discovery
- Ideation
- Design
- Dev Handoff
- Reflection
- My Role
- UX/UI Designer
- Team of 5
- Timeline
- 12 weeks
Step 1 of 5
Discovery
Kick-off
Our team kicked off the project with a meeting via Zoom. During this session, our team delved into various aspects, such as the project plan, client brief, and the user stories provided to us. To ensure clarity, we developed a client questionnaire that allowed us to gather details about the client's vision.
To streamline our workflow and avoid the challenges of aligning time zones, we organized our team based on geographical regions. Specifically, the East coast members collaborated together, while the West coast members formed their own cohesive unit. This approach not only enhanced efficiency but also fostered seamless coordination.
My teammate and I were entrusted with the responsibility of designing a captivating user flow centered around user story 3. This task presented an exciting opportunity for us to leverage our skills and creativity to create an intuitive and user-friendly experience.
Client Questionnaire
In order to gain more insight into the client's vision we developed a client questionnaire. Here I was able to ask specific questions regarding each screen and their functions.
- What do you imagine as the main pages/sections of the app and the main functions of each page?
- What are all the exams or tests that a user might take?
I learned what kind of tests the client wants included in their product and where the client wanted users to practice for their exams, which would later be called "the Playground". This was a tremendous help in my process and kept my designs user focused.
Step 2 of 5
Ideation
User Stories
The client provided us with 3 user stories. The team and I dove deep into each one to brainstorm ideas and usher in the next step.
- As a user, I want to create an account and log in.
- As a user, I want to take a diagnostic to identify my strengths.
- As a user, I want to be able to practice answering questions from all sections of the selected test.
User Flows
In our project, we collaborated closely with our client to transform their user stories into comprehensive user flows. By delving into the specific requirements, we gained valuable insights into the diverse screens that would be essential for the app. I worked with all user flows, however I primarily worked on user flow 3 to develop a path for the user to practice tests within the "playground" section in the app. Through iterative discussions and feedback sessions with the client, we successfully crafted a detailed flow chart that effectively showcased the various paths a user would traverse within the application.
User flow 1: create an account and log in
Wireframes (Mid Fidelity)
By mapping out the user journey, we were able to gain insights and streamline the design process. We began to design our mid fidelity wireframes that showcased the function of the unique pages. I continued to work with the design of the user flow 3 screens and assisted with the other flows as well. Within this flow, I aimed to create an intuitive experience for users as they navigate the "playground" section. This section allows users to select a test for practice and offers an unrestricted environment where they can enhance their skills in the Reading, Writing, Listening, and Speaking sections.
Step 3 of 5
Design
Inspiration
Our team and I collaborated to create a design document aligning with the client's vision of a product that embodies key attributes: "cool," "minimalistic," and "simple." To achieve this, we drew inspiration from renowned platforms such as Robinhood, Leland, and Cash App, which showcased minimalistic and cool design styles. Additionally, we analyzed competitor products to gain valuable insights and further enhance our design approach.
Inspiration
Style Guide
In order to maintain a consistent design approach as a team, we created a style guide document. This document serves as a centralized repository for various design elements, including components, variants, text styles, font sizes, color hex codes, and unique screens that are utilized across multiple user flows.
One of the advantages of our style guide is the ability to make edits to a master component. This means that any changes made to the master component are automatically reflected in all other instances throughout our designs. This feature has been incredibly time-saving, as it eliminates the need to manually update each individual instance separately. The style guide has proven to be an invaluable resource, enabling us to design efficiently.
Aqua
Denim
Navy
Black
Off-white
Magenta
UI Iterations
During this project phase, I kick started the design decision to develop multiple versions of the home screen for the client's evaluation and final selection. Our goal was to strike a balance between simplicity and functionality, ensuring that the home screen provides an optimal user experience. It serves as a central hub for students, enabling them to access their past scores, choose new tests, and stay informed about upcoming assessments on their schedule. Leveraging our inspiration document, our collaborative efforts yielded several compelling iterations of the home screen, which we promptly delivered to the client for their consideration.
Hi-Fi Wireframes
Once the client approved the home screen iteration, our team delved into crafting the remaining screens. We ensured that the user experience of the home page permeated throughout by drawing inspiration from its design and leveraging the structure of the mid-fi screens. I continued to primarily work on the screens of user flow 3, however I also assisted in flows 1 and 2 to create consistency throughout our product. During the design process, the client expressed their desire to integrate an A.I. chatbot called "Pocket Tutor." This chatbot would serve as a valuable resource for students seeking assistance throughout the product. To optimize efficiency and maintain design consistency, I adhered to a style guide and employed a component library. I used the feature of auto layout in Figma to allow elements within each screen to have consistent spacing and flexibility when editing was needed.
Step 4 of 5
Dev Handoff
Annotations and Measurements
To successfully conclude this project, our team embarked on the task of creating a document that would enable developers to transform our concept into a fully functional product. To achieve this, we examined every screen, providing detailed annotations regarding color hex codes, spacing, padding, positioning, and margins. The same approach was applied to our component library and style guide.
Flow Chart
Additionally, we crafted a flow chart encompassing all the screens, supplemented by informative notes illuminating the purpose and navigation of each screen within the app. This phase played a vital role in the design process, ensuring a seamless experience for developers and facilitating the smooth realization of our product.
Walkthrough
Step 5 of 5
Reflection
Learnings
As a UX designer, I had the opportunity to enhance my skill set through this project. It served as a remarkable platform for acquiring valuable abilities in communication and collaborative design. I learned how to effectively use styles and components to create consistent designs. I employed the use of auto layout with every element to enable flexibility and responsiveness within the screens.
Throughout the journey, I discovered that achieving the ideal design flow often requires multiple iterations. By actively engaging with the client, I uncovered insightful perspectives that led to the development of the A.I. Chat Bot "Pocket Tutor" and other features aimed at providing students with the feedback they require.
This project greatly enhanced my skillset. I really enjoyed working on user flow 3 to establish a "playground" section where the student can answer questions from all sections of the test. I learned a lot about UI when I was designing the first iteration of the Home Page, such as the importance of consistent styles and spacing between elements. Text hierarchy came into play and showed me gestalt principles in action.
Working alongside a team of hardworking, intelligent, and talented individuals was an absolute pleasure. To ensure consistent designs, we employed style guides and component libraries, which proved to be valuable resources. I intend to incorporate these practices into my future design projects, enabling me to deliver remarkable outcomes consistently. Despite the challenges of different time zones, we effectively communicated and collaborated, resulting in the creation of an outstanding product.