An informational website that introduces an all-in-one tutoring platform for teachers everywhere.
Overview
Routeen is a SaaS B2B start-up company providing white-labelled platforms tailored to tutors. The platform streamlines and automates the end-to-end process to fit every tutor’s needs, from scheduling, payments, and meetings to providing homework assignments and study resources.
The Challenge
Having just pushed out its MVP, Routeen wanted to see its e-commerce website optimized to showcase Routeen as the ultimate platform for tutors of all types. The client wanted the UI of the existing site improved in terms of overall aesthetics to increase marketability and promotability.
The Solution
Our team redesigned all existing pages of Routeen’s e-commerce website to make them intuitive to navigate, so that tutors looking to bring their business to the next level can easily access the information they need to join Routeen. The pages include Home, Features, Pricing, About, Contact Us, and Book a Free Demo.
We focused on creating consistency in the website’s design and on curating a trustworthy, friendly user experience.
My Role
UX/UI Designer
(Team of 5)
Tools
- Figma
- FigJam
- Google Suite
- Zoom
Duration
6 Weeks
Process
- Discovery
- Ideation
- Design
- Developer Handoff
- Reflection
Discovery
Kickoff
Our team started with a kickoff meeting where we established the project scope and project plan. We also reviewed the information provided by the client to build an in-depth understanding of the client’s vision for the project, examining the existing website and researching competitors.
Client Questionnaire
We developed a list of questions for the client to gain further details into the desired functionality, UI inspiration, and additional information not provided during the initial kick-off. Our findings were:
- Routeen is the first to be an all-in-one platform for tutors and does not have direct competitors.
- Routeen’s indirect competitors are Tutor Bird and Tutor Cruncher.
- The client wanted the UI to be friendly, engaging, organized, and trustworthy.
- The client wanted the design to be simple for the development team.
- The client wanted to have all existing pages redesigned.
Snapshot of client questionnaire
Heuristic Evaluation
To familiarize ourselves with the product, we conducted a heuristic evaluation of the existing website, notating usability issues in terms of severity. The key points we found were:
- Style inconsistency (font, space, and colour)
- Poor information architecture
- Lack of readability in terms of WCAG compliance
These notes were crucial throughout our design process to refer back to.
Snapshot of the heuristic evaluation on left
Competitive Analysis
From the client Q&A, we learned that Routeen does not have direct competitors due to the platform’s all-in-one functionality. Therefore, we conducted a competitive analysis of the company’s indirect competitors who share the same customer demographic and product functionalities similar to Routeen. This helped us better understand the landscape of Routeen’s client base.
Of all the indirect competitors, Tutor Bird and Tutor Cruncher are the two companies with the most similarity in product and share the same client base. Both companies’ information sites focus on a clean and easy-to-scan layout and utilize a cool-toned colour palette. However, the information architecture is not the most intuitive, and the particular usage of colour was difficult to read.
Ideation
User Stories
After analyzing and discussing the results of our research, the team concluded that the existing website’s functionalities should be kept but enhanced for usability. We decided on the following five user stories to focus on for the project:
- As a user, I want to learn about Routeen from the homepage
- As a user, I want to book a demo with Routeen.
- As a user, I want to learn about the features offered by Routeen.
- As a user, I want to know about Routeen’s pricing.
- As a user, I want to be able to contact Routeen.
Each team member chose one user story to focus on, and I was responsible for focusing on user story 5.
User Flows
With the user stories as a foundation, the team developed user flows, mapping out the user’s progression in navigating the product. The user flows visualize every step the user would take from the initial landing page to their destination on the optimal path.
Wireframes
After the user flows, our team moved onward to create the wireframes. Each team member was responsible for the screen correlating to their assigned user story, so I mainly focused on the Contact Us page. The home page was designed and finalized through a collaborative effort. While developing the Contact Us page, I drew ideas from the notes we had from UI inspiration and referred back to the notes from the heuristic evaluation I had done on the old contact page.
A lo-fi wireframe was created first to block out the general layout, and then the med-fi wireframes were iterated and revised with feedback from the client.
Design
UI Inspiration
We referenced various UI examples from a list of companies the client provided in a client questionnaire and found visually appealing, such as Zendesk, Stripe, and Asana. We made notes of the design features that would be beneficial to incorporate into our project, such as an FAQ section and a carousel gallery of user reviews. We later implemented the FAQ into the Contact Us page and the carousel gallery of user reviews into the Home page.
Mood Board
Using the notes from our UI inspiration, we created a mood board to capture the overall atmosphere the design should convey to the target demographic. We also focused on the keywords provided by the client: friendly, engaging, organized, and trustworthy.
Although the old website design did not have a consistent style guide, the client did express that they would like to keep the original brand colour, so I drafted a colour palette with Routeen’s teal blue in mind.
UI iterations
Collectively, our team opted to deliver to the client three distinct iterations of the home page’s user interface. We intended to provide dynamic styles with each iteration that showcased a different version of the friendly, engaging and organized aesthetic the client sought.
After some consideration, the client expressed that they wanted to see another round of iterations that combined the elements they favoured from each of the first round iterations.
For the second round of UI iterations, we took notes from the client and created two versions for them. Upon receiving the second round of UI iterations, the client immediately responded with their choice of the iteration on the left.
Style Guide
After the client confirmed their choice of the UI iteration, we created the style guide to keep the consistency and continuity of our designs. We divided the work among the team for the style guide, which served as a reference to promote efficiency throughout the remainder of the project.
Since I came up with the draft of the colour palette, I was able to refine it for the style guide. Additionally, I worked closely with another team member to unify all the component elements.
Hi-fi Wireframes
With the UI iteration chosen by the client and the finalized style guide in our hands, the team completed designing the high-fidelity screens each member was responsible for. As a team, we meticulously fine-tuned any mishaps that might have been overlooked for every screen before presenting the product to the client to ensure the quality of our designs.
I created the hi-fi contact page with an FAQ section implemented to provide additional information for the user. I also designed an overlay modal for “Message Sent.”
Developer Handoff
After finalizing the high-fidelity screens and obtaining the client’s approval, we began preparing our designs to be handed off to Routeen’s developer team. We provided notes on measurements, page flow, and annotations to streamline the transition from design to product,
Developer handoff for the Contact Page
Reflection
I thoroughly enjoyed working on the overall redesign and the Contact Us page for a SaaS B2B company such as Routeen. I particularly enjoyed the project’s focus on marketability and profitability, which pushed me to research further into creating user engagement. The experience of being in a team where we enthusiastically ideated together whenever challenges arose also elevated me as a designer. This project sparked my curiosity to work with EdTech in the future, as it is closely related.
The biggest challenge was seeking the missing information we needed from the client. Though the client has a general vision of what they would like the overall UI to be, they also explored Routeen’s UX/UI potential alongside us. Therefore, we were sometimes pushed to dig deeper and pinpoint the exact questions we needed to ask to understand the client’s expectations better.
Overall, working on Routeen’s information site has been extremely rewarding. We created a design that fulfills the client’s criteria to promote the platform for tutors everywhere to upgrade to a digital platform and provide users with a friendly and engaging experience.
Leave a Reply