Amir Shiri

About Me

Projects

Resume

Contact Me

Amir Shiri

Amir Shiri

About Me

Projects

Resume

Contact Me

Tutoria

A responsive website for booking quality tutors

A streamlined way for parents to compare, choose, and connect with tutors; now on desktop, tablet, and mobile.

Project Type:

Project Type:

Course project

Course project

My Role:

My Role:

UX Design
UI Design

UX Design
UI Design

Industries:

Industries:

Education

Education

Duration:

Duration:

Jun 2025 - Jul 2025

Jun 2025 - Jul 2025

Overview

The product:

This responsive website for Tutoria makes the platform accessible across desktop, tablet, and mobile, for users who prefer using a website over an app.

The problem:

Many parents struggle to find and compare tutors that suit their child’s needs. While the mobile app helps address this, not all users are comfortable using apps. A web platform was needed to support users who prefer or rely on desktops and tablets for better visibility, control, and ease of use.

The solution:

The Tutoria responsive website brings the same seamless experience of the mobile app to desktop, tablet, and mobile users. It focuses on clear navigation, consistent visuals, and smooth interactions across different screen sizes. The layout adapts naturally to each device, making it easy for parents to browse, compare, and book tutors with confidence.

My responsibilities:

  • Adapted UX insights from the mobile app to inform the website

  • Explored ideation and layout options through paper wireframing for different screen sizes

  • Created a new sitemap and responsive wireframes

  • Designed high-fidelity mockups for desktop, tablet, and mobile breakpoints using Figma

  • Conducted usability testing across screen sizes

  • Iterated based on user feedback to improve navigation and clarity

This responsive website is built on the foundational user research conducted for the Tutoria mobile app, including pain points, personas, storyboards, and journey maps.

Curious to explore the original insights? Click here to go to the Tutoria app case study

Starting the design

Sitemap:

I created a new sitemap for the responsive website to reflect its slightly different structure compared to the app. This version includes both pre-login and post-login flows, while keeping the overall information architecture as close as possible to the mobile app for consistency.

User flow:

While the sitemap defines the overall structure of the website, the user flow maps out the exact steps a parent would take to complete key tasks, from home page to confirming a booking. I adapted the flow from the mobile app version, making small adjustments for the responsive website while keeping the overall experience consistent across platforms.

Paper wireframing:

I began the design process with quick sketches for mobile, tablet, and desktop screens to explore how the layout and features could adapt across different devices. While sketching, I kept the app’s existing design language in mind, ensuring that key elements and functionality would feel familiar to returning users. These early sketches helped me quickly test ideas for structure, hierarchy, and responsiveness before moving into digital wireframes.

Low-fidelity digital wireframes:

Translating the paper sketches into low-fidelity digital wireframes allowed me to refine layouts and align elements more precisely for mobile, tablet, and desktop. At this stage, I focused on ensuring a consistent visual structure across breakpoints while keeping the core user tasks clear and accessible. Building digitally also made it easier to test different arrangements and prepare for usability feedback before moving into high-fidelity designs.

Low-fidelity prototype:

After completing the wireframes, I created an interactive low-fidelity prototype to simulate the primary user flow, from the homepage through to booking confirmation. This clickable version allowed me to experience the design as a user would, identify potential friction points early, and prepare for the first round of usability testing.

Low-fidelity prototype:

After completing the wireframes, I created an interactive low-fidelity prototype to simulate the primary user flow, from the homepage through to booking confirmation. This clickable version allowed me to experience the design as a user would, identify potential friction points early, and prepare for the first round of usability testing.

Silent video demonstrating low-fi prototype of the desktop breakpoint

Usability study: Parameters

  • Type: Moderated and unmoderated, task-based

  • Participants: 3 users

  • Age range: 31–53 years old

  • Location: Remote and in-person (Sydney, Australia)

  • Duration:~10 minutes per participant

  • Tasks: 1 main task with follow-up questions

Usability study: Key findings

1

2 out of 3 participants were unclear about the differences between tutors displayed on the results page. This suggests the need for clearer visual cues (e.g., qualifications, ratings, or subject tags) to help users differentiate tutors more easily.

2 out of 3 participants were unclear about the differences between tutors displayed on the results page. This suggests the need for clearer visual cues (e.g., qualifications, ratings, or subject tags) to help users differentiate tutors more easily.

2

All 3 participants experienced difficulty navigating back to the previous page.This indicates the navigation system should provide a clearer and more consistent way to move backward.

All 3 participants experienced difficulty navigating back to the previous page.This indicates the navigation system should provide a clearer and more consistent way to move backward.

3

All 3 participants found the process of finding and booking a tutor effortless. This indicates that the design and user flow are intuitive, allowing users to complete their tasks smoothly.

All 3 participants found the process of finding and booking a tutor effortless. This indicates that the design and user flow are intuitive, allowing users to complete their tasks smoothly.

Refining the design

Mockups:

With research insights in mind, I moved on to high-fidelity mockups. My priority was consistency between the website and the mobile app, so I reused key components while refining layout and functionality. I started with the desktop version as the foundation, then scaled the design to tablet and mobile, making adjustments to navigation, padding, and font sizes to fit each screen size.

Sticker sheet:

Hi-fidelity prototype:

After completing the high-fidelity designs for desktop, tablet, and mobile screens covering the main user flow, I created an interactive prototype.

I tested each screen individually to ensure that the navigation followed a logical path. I also checked how different elements such as text, images, and buttons responded to resizing and how they adjusted at each breakpoint. This helped validate both usability and consistency across devices.

Hi-fidelity prototype:

After completing the high-fidelity designs for desktop, tablet, and mobile screens covering the main user flow, I created an interactive prototype.

I tested each screen individually to ensure that the navigation followed a logical path. I also checked how different elements such as text, images, and buttons responded to resizing and how they adjusted at each breakpoint. This helped validate both usability and consistency across devices.

Go to Prototype

Go to Prototype

Go to Prototype

Silent video demonstrating hi-fi prototype of the desktop breakpoint

Accessibility considerations:

1

Colour Contrast: Verified that all text and interactive elements passed accessibility contrast standards to ensure readability for users with visual impairments.

Colour Contrast: Verified that all text and interactive elements passed accessibility contrast standards to ensure readability for users with visual impairments.

2

Consistent typography: Used clear and consistent font styles to support legibility across devices and screen sizes.

Consistent typography: Used clear and consistent font styles to support legibility across devices and screen sizes.

3

Text hierarchy: Structured headings and body text in a logical hierarchy to assist users navigating with screen readers.

Text hierarchy: Structured headings and body text in a logical hierarchy to assist users navigating with screen readers.

4

Interactive elements: Ensured buttons and tap targets were large enough and had sufficient spacing for touch accessibility.

Interactive elements: Ensured buttons and tap targets were large enough and had sufficient spacing for touch accessibility.

Going forward

Impact:

This responsive website for Tutoria was designed to give users flexible access to the product on the device of their choice. By supporting multiple screen sizes, it ensures a wider range of accessibility regardless of users’ location, available devices, or personal preferences.

Impact:

This responsive website for Tutoria was designed to give users flexible access to the product on the device of their choice. By supporting multiple screen sizes, it ensures a wider range of accessibility regardless of users’ location, available devices, or personal preferences.

What I learned:

Through this project, I learned how to maintain consistency across designs while adapting them to different breakpoints. I gained experience in applying a design system across devices, making sure the overall feel of the product remains the same. I also learned how layouts and elements need to be adjusted for each screen size to ensure usability and a cohesive user experience.

What I learned:

Through this project, I learned how to maintain consistency across designs while adapting them to different breakpoints. I gained experience in applying a design system across devices, making sure the overall feel of the product remains the same. I also learned how layouts and elements need to be adjusted for each screen size to ensure usability and a cohesive user experience.

Next steps:

Next steps:

1

Conduct additional usability studies to identify areas for improvement and refine the design.

Conduct additional usability studies to identify areas for improvement and refine the design.

2

Explore designing for dark mode to give users more flexibility and personalisation.

Explore designing for dark mode to give users more flexibility and personalisation.

Thanks for reading this far!

I'd love to hear your feedback, chat about design over coffee, or explore new opportunities together.

Reach Out

Reach Out

Reach Out

Thanks for stopping by

Email

Email

Email

LinkedIn

LinkedIn

LinkedIn

© 2025 - Amir Shiri