STUDIORA - Responsive Website
Helping parents find and book the best tutors for their children. Now on the web!
Role
UX/UI Designer
Type of Project
Conceptual Case Study
Duration
3 Weeks
Platform
Responsive Website
Background
As I was finishing the work on the Studiora app, it became clear that a web experience for that platform was needed.
This project perfectly aligned with my work for the Google UX Design Certificate, where the second project focused on designing a responsive website.
Previously the app allowed parents to book tutors and track progress without problem, but feedback from the latest usability test revealed that many users wanted the option to access the platform on larger screens when asked about the context in which they would use Studiora (see quotes below). Also, potential new users were curious for more detailed information about Studiora before downloading the app, but the existing app homepage didn’t provide enough details to address these needs.
"I often check my child’s progress during my lunch break at work, and it's just easier to do that on my computer rather than my phone."
"Sometimes I need to look at multiple things at once—on a bigger screen, I can compare tutors or review progress without squinting."
"When I’m planning for the week, it’s more convenient to manage everything on my desktop at home rather than on my phone."
Goals
So in the process of creating a responsive website for Studiora I wanted to address the following design targets:
Device Compatibility
Adapting the website for desktops, tablets, and mobile browsers without compromising usability.
Designing for Dual Audiences
The website had to welcome new users while serving as a functional tool for returning ones, blending engaging content with intuitive features for a smooth, user-friendly experience.
Adapting the Dashboard Functionality
Reimagining the dashboard for larger screens to maintain clarity, usability, and consistency with the app.
Keeping the tutor booking process simple and maintaining the platforms overall user-friendly interface and interactions, just like the app, was very important.
The Solution
A Multi-Device Friendly Interface
The responsive design makes it easy for the user to switch between devices.
The layout was designed for desktop, tablet, and mobile, keeping things consistent across all screen sizes and making sure everything is simple and easy to use.
Website
Tablet
Mobile
Enhanced Homepage for First-Time Visitors
The homepage became a storytelling tool. The How It Works section provided a step-by-step breakdown of how to bok a tutor for first time users, while the Reviews showcased testimonials from parents and tutors, building credibility and trust. This design helped new users feel informed and also supported conversion goals for the future.
A Familiar Dashboard with Extra Utility
Everything users loved about the app dashboard now even better; using the larger screen to its full potential.
All three app tabs are now combined into one layout, so users can see everything at a glance.
Unified Dashboard: All three tabs from the app are now consolidated into a single layout, making it easier for parents to access and navigate their child’s tutoring details.
Full Calendar View: A new full calendar displays appointment dates for quick reference, allowing parents to see at a glance when their child has an upcoming session.
Intuitive Layout: Zones are strategically placed for easy visual access, with a clear and interactive view of homework progress, enabling parents to track assignments and deadlines effortlessly.
Challenges
Working on the responsive website project challenged me to explore new design territory for me and come up with solutions that matched what users needed.
First Time Adapting App to Website: This was my first experience adapting a mobile app to a responsive website. It wasn’t just about making things bigger but rather to figuring out how to make the most of larger screens. Everything still had to be easy to use and familiar for people who already loved the app.
Keeping Things On-Brand: I wanted to be sure the website felt cohesive with the app’s visual identity, and that required a careful balance between expanding the design of the website and maintaining familiarity for returning users from the app.
Deciding on New Features and Sections: Deciding what extra features or sections the website needed was a bit of a puzzle. To help, I turned to a group of three participants who fit our target audience and were also involved in usability testing of the app.
Their feedback throughout the project really helped me prioritize what was most important and made me think about things I hadn’t even considered at first.
User Research
The responsive website project relied on the same foundational insights that were uncovered previously for the app so the actual features won’t change much.
For a detailed breakdown of the research methodology pain points, emerging patterns, insights and user persona, refer to the Studiora app case study.
New Research Needs
However I wanted to ask my three user participants questions and these were the insights about this new potential web experience:
What experience would you expect and like if Studiora were available on a web platform?
3/3 Users
said that the website booking experience should feel consistent with the app.
2/3 Users
wanted the website to retain the same features as the app while being adapted to larger screens.
If you were browsing the website for the first time, what kind of content or sections would you expect to find that would make you want to sign up?
3/3 Users
expected clear descriptions of services and how the platform works.
2/3 Users
mentioned the importance of testimonials or success stories.
3/3 Users
mentioned the need for a clear FAQ section to answer questions.
What expectations do you have for the dashboard functionality? How would you like to access it, and what information should be most obvious?
3/3 Users
mentioned the dashboard should be intuitive, simple, and easy to access without clutter.
2/3 Users
using the dashboard should be immersive and distinctive, just like in the app.
So how can I design this new responsive web experience and stay true to our user needs?
Ideation & Design
The ideation phase for the app provided a good starting point, but now the important thing was rethinking the features for the responsive website, namely the layout of the homepage and the dashboard itself. Note that this is the flow and experience of an already logged in user.
Website Sitemap
So I created website map for Studiora's responsive website, keeping it similar with the app map structure and tweaking it along the way as I added more features and sections since the website aims to be a more comprehensive gateway into the platform.
Find a Tutor
Messages
Tutor Cards
Profile
Notifications
Homepage
Account Information
Children Settings
Favourite Tutors
Past Bookings
Payment Details
Privacy and Security
Change language
About
Recommended
Notifications & Alerts
Previously Booked
How It Works
Tips & Tutorials
Resources
Footer
Tutorial Articles
About
Support
Socials
Tutor Booking Explained
For Students
FAQs
For Parents
Inbox
Message Threads
Subjects Covered
Homework
Upcoming Sessions
Tutor Evaluation
Confirmation Page
Checkout
Successful / Failed Booking
Booking Options
Subject
Participants
Date and Time
List of Available Tutors
Sort
Tutor Comments
Payment Method
Tutor Profile Page
Upcoming Session
Reviews
Bio
Dashboard
Top Navigation
Dashboard
Main CTA
Recommended Tutors &
Previous Bookings
Tips & Tutorials
Bottom Navigation
Paper Wireframes
I started with some rough hand-sketching to explore ideas for the layout and structure of the homepage, focusing on how the different sections and shapes might work together. I marked specific elements with stars that stood out as promising
Structuring for Consistency
To make the website feel familiar for returning users, I took a close look at the app’s homepage layout order, thinking about how to bring those elements into the web experience to create a familiar setting for the returning user.
Checking Out the Competition
When I checked out competitor platforms, I noticed that most of them had a “How It Works” section and a spot for user reviews.
This matched with what I heard in the user interviews I did before ideation.
Seeing how competitors handled them gave me a better idea of how to include these elements.
How It Works
Reviews
Homepage Iterations
At this point, the design really started coming together. I combined through digital wireframing, everything from the earlier steps into one clean and familiar layout that was similar to the app.
First iteration
Second iteration
Third iteration
I worked closely with a small group of 3 target users, sharing prototypes almost daily to get feedback and make improvements and add any features that felt essential.
A key takeaway was that having the dashboard front and center on the homepage didn’t work well for the website. 2/3 users felt it was out of place, even though it worked for the app. This feedback led me to adjust the layout and create a separate page for the dashboard for better navigation and simplicity.
The new dashboard got a button on the top navigation on the right next to the Profile Picture; as well as a CTA above the fold on the homepage.
Dashboard Evolution
At first thought the app’s dashboard sections would work the same way on the website, so I tried to keep them as consistent as possible.
But it quickly became clear that simply moving the mobile dashboard to the web didn’t make the best use of the extra space. The dashboard had more potential that I hadn’t fully explored yet.
The new web dashboard is designed to make better use of the available space.
It has a familiarity with the app but its organized, clear layout presents more information without overwhelming the user. The full calendar is added for users who want a visual overview of upcoming sessions.
The dark theme clearly signifies to the user that they are now operating on the dashboard page.
App dashboard assets
Translated onto the web
Final dashboard solution
Final Homepage Design
Below is the completed design of the homepage, showcasing the final layout and features based on user feedback and design iterations.
Additional notes for the homepage:
I designed the tutor cards in the dark primary brand color instead of the neutral tones used in the rest of the app. This was a big visual change but I felt it was justified based on the positive feedback received from the usability testing group. The feedback showed that the darker color made the cards more visually prominent, enhancing their clarity and drawing attention to the key information on the homepage.
The web homepage also has a section that shows users that they can download the Studiora app. Clear and prominent CTAs make it easy for the users to download the app, so they can easily stay connected on mobile.
Booking Flow Comparison
To maintain consistency with the returning user, I designed the booking flow so it will closely match the one in the app.
App tutor booking flow
Web tutor booking flow
Experience the Prototype
See all Screens
Learnings
Working on the web version of Studiora has been a very challenging process. It was a chance to build on what I learned from designing the app and apply many of those lessons to building a responsive web platform.
One main takeaway was understanding how to design for different devices and screen size and how that the web mobile experience can be very different from the mobile app experience. I also found that communicating this to prospective users was a bit difficult, so that’s definitely something I’d focus on improving for future projects.
If I had to do it again.
If I had to do it all over again, I’d definitely want a bigger usability testing group. More targeted participants is always better but not always possible; since they would have brought in a wider range of perspectives and helped me spot issues or opportunities I might have missed.
I’d also love to collaborate with a developer next time. Getting their input on which features are easier or harder to build in real-life scenarios would have been very valuable and might have helped me prioritize features more effectively so they are more aligned to realistic expectations.
One thing I didn’t have time to explore this time as well, was creating an experience for tutors who want to join the platform. I think designing a process for tutors to sign up, create profiles, and manage bookings would’ve added a whole new layer of value to Studiora.
Overall, this project reinforced how important it is to stay flexible and open to feedback. So many of my initial assumptions were challenged during testing, and that made the final design better in my opinion. If there’s one thing I’d do differently, it’s involving more voices earlier in the process. Collaboration really is key!
Thank you for reading!