TutorMe

Responsive Web Design

The Problem

Many existing platforms fail to provide a seamless experience across devices, making it difficult for users to browse and book services. In the context of tutoring, parents face challenges in finding and booking tutors through apps or responsive websites that function effectively on both mobile and desktop. The absence of well-designed, device-responsive solutions creates barriers in connecting tutors with parents.

The Goal

Design an app and responsive website that provide a seamless experience across devices, allowing tutors to list their services and parents to search for and book time with tutors. The platform should enable parents to easily search for, compare, and book tutors on both mobile and desktop. By prioritizing device responsiveness and intuitive design, the platform will ensure a user-friendly and accessible interface for all users.

Tools

Figma

Team

1 UX Designer

My Role

UX Designer

Timeline

Overall: 3 weeks

Design Process

Sitemap & User Flow

Wireframes

Mockups

Sitemap & User Flow

To begin the process of creating a responsive website, I started by developing a comprehensive sitemap. This enabled me to strategically plan the website structure and identify all necessary elements. Alongside the sitemap, I also created a detailed user flow to map out each action a user will take. This approach ensures that I account for all essential screens, ultimately enhancing usability and providing a smooth experience for users across the platform.

Sitemap

To create the sitemap, I utilized FigJam to outline the hierarchy of pages and their relationships, serving as a blueprint for the overall structure of the website. This approach provides a clear overview of the key sections and features to be included, ensuring that all aspects of the user journey are considered.

User Flow

After establishing the sitemap, I created the user journey to outline the steps users will take while navigating the process of finding a tutor. This visual representation highlights the interactions and pathways users will follow, ensuring that their needs are addressed at every stage of their experience and that the appropriate screens will be developed.

Wireframes

Following the planning of my sitemap and user journey, I proceeded to create wireframes. I crafted both paper and digital wireframes for mobile and desktop platforms, allowing for a comprehensive visualization of the design across different screen sizes.

Paper Wireframes

To plan the mobile and desktop pages effectively, I started by creating paper wireframes. This approach allowed me to design the layout and identify necessary adjustments for each platform, ensuring that all elements fit properly within the respective screen sizes.

Digital Wireframes

After completing my paper wireframes, I took my designs to Figma to start creating digital mockups for both desktop and mobile experiences.

Desktop Wireframes

Mobile Wireframes

Mockups

With my digital wireframes complete, I moved on to creating mockups for both screen sizes, starting with the development of a style guide to ensure consistency across mobile and desktop platforms.

Style Guide

Before diving into the mockups, I developed a comprehensive style guide to define the visual design and ensure consistency across both mobile and desktop platforms. The style guide includes typography, color schemes, and UI elements, all designed to maintain a cohesive and user-friendly experience across various screen sizes.