Routeen
Routeen is a B2C platform that will help tutors and students connect by providing software for the tutors to keep themselves organized.
Role:
UX/UI Designer on a team of 5.
Process:
-
Discovery
-
Ideation
-
Design
-
Dev Handoff
-
Reflection
Overview
Routeen is a Tutoring platform that allows tutors and students to connect for learning and allows tutors to utilize our incredible features to make tutoring, payments, and book-of-business easier! The objective was to enhance the user interface, information architecture, and overall site usability to encourage more users to work with us! Our team accomplished this by using competitive analysis and heuristic evaluation to provide insights to our team.
The Problem
As a Tutor, staying organized while working with so many kids and classes takes time and effort that you do not have. Finding your statements, notes about each student, and contacts can be challenging. All of this can add to additional work you do not have time for! The client wanted us to help solve these organizational issues for tutors and help them focus on their students!
The Solution
Our user-centered design solution utilized a heuristic evaluation, competitive analysis, and research to establish a better home page to fit our user's needs. We identified 5 user flows, including pricing, booking a demo, and finding features about Routeen. We established these user flows to improve the home page's usability to allow tutors to take advantage of our great tools!
Discovery
Kickoff
The client had a website designed for Routeen and wanted to increase users' booking of a demo, the usability of the site, and information architecture. Our team was tasked with creating a new design for all pages of the site. We created an entirely new design system and retroactively created their components, typography, and color scheme.
Client Questions/Answers
We developed a list of questions for our client to ensure we could create user flows for what the client wants the user to do within the website.
Our findings were:
-
Booking a time to create a demo
-
Capture the key features that make Routeen different
-
Information- focused on making good use of white space and allowing the user to understand why we are better than any other platform.
Heuristic Evaluation and Competitive Analysis
Our team conducted a Heuristic evaluation and ran a competitive analysis among our top competition to see where there was room for improvement. Since we were redesigning a website already in use, we examined the usability and our opinions on the design.
We completed the competitive analysis to ensure that we were aligned with our competition and how to help us stand out!
Please see the images below of our HE and CA.
Ideation
User Flows
Before we could start designing, our team had to identify the most important functions this part of the website needed. User flows help us understand how we want to lay out for users to complete their tasks. We decided on 6 different user flows to give high user functionality and a clear objective. I was responsible for pieces of each user flow. To ensure consistency, our team split up flows, and I was designated UF 4.
Low-Fidelity Wireframes
As UX designers, our team created our wireframes to develop creative concepts. We individually started with our designs and then presented them to each other.
We started with a desktop frame. Everything was evenly spaced and aligned to ensure the developer could have consistency.
From there, we all decided what would be most influential on each screen and what design type we liked the most.
Medium Fidelity Wireframes
As a UX Designer, My team leader assigned me to work on problems on their Pricing page.
When starting the wireframes, I started with a desktop frame and a 12-column grid to ensure everything was evenly spaced and aligned to provide an easy handoff to the developer.
I added inspirational photos alongside my work to give me visual ideas as I discovered the existing pages' pain points. I settled on a clean and simple look as the design layout was user-friendly and familiar to other websites in the educational spaces.
Design
Design Iterations
Home Page Iterations
Our client wanted us to have 4 different UI Iterations to help them decide a stylistic approach they would like to take for the rest of the site. Our team divided the work and allowed us to design our UI iterations for the home page.
I went for a more clean and more straightforward approach as I wanted the user to focus more on the product and find the page's usability simple.
Final UI Iterations
Ultimately, one of our other teammates had the creative idea to have a scrapbook-like tape to provide a comforting feeling of scrolling through images and helping the user follow along on each page while providing a friendly look.
Style Guide
Our Team collaborated to modify the style guide throughout the project. Once we got feedback from the client, we aligned the style guide with their vision, focusing on color usage and typography. They intended to have more information on the pages with less white space while being a fun and visually appealing website. This involved creating a cohesive color palette, buttons, typography, and icons.
High Fidelity Wireframes
I designed the Pricing solo while our team gave feedback on all pages to ensure everyone had input. My focus was creating a welcoming and informative design by creating cohesive pages encouraging users to find and compare all options within one frame.
After completing the style guide and getting approval from the client on our UI iterations, we moved into high-fidelity wireframes. With the organizational mindset listed above, we dove into each high-fidelity page to ensure everything was kept in mind.
Developer Handoff
Our team collaborated on clean, annotated notes to ensure the design was developed as intended, outlining proposed changes with the client's development team. We focused on enhancing the user experience, resulting in successful deliverables that met the client's needs. The developers could access our prototype for further insight into the design's functionality.
Reflection
Our client was very hands-off, which gave our team a lot of creative freedom to design based on the research we discovered. The client had great ideas and opinions but did not know how to communicate those to us. The feedback from the client was a bit more generalized because they were extremely busy, so the team had to make a few assumptions to press forward.
Our team worked well together to create a cohesive design. Since we used Figma, we could create a component library and local styles. This ensured our design was consistent and cohesive. We also developed color palettes and text hierarchy to reduce error and allow for design optimization throughout the multiple screens and designers.
Another significant benefit to our team was our communication and collaboration throughout the design process. Since we had a 6 week sprint, this helped ensure excellent time management. When working with a team, we allowed each other to voice our ideas and opinions while designing to ensure we could provide the client with the best design possible!
