Maria Luiza Goncharenko - Responsive App Design for the Google UX Design Certificate

Responsive design

The project was focused on transforming a mobile app—designed to connect parents and students with tutors and help track a child’s progress—into a desktop version. The app was created to be simple and easy to use, enabling communication, lesson planning, and monitoring of educational results. The challenge was to preserve the simplicity and logic of interactions while adapting to the larger screen.

My Responsibilities

In this project, I was responsible for adapting the mobile app to its desktop version. My goal was to ensure the app worked just as smoothly on a computer as it did on a phone. I developed wireframes, built low- and high-fidelity prototypes, and conducted usability tests to make sure the interface remained intuitive and user-friendly across all devices.

Goal

The goal was to create a desktop version that retained all the features of the mobile app but optimized for larger screens and more complex navigation. I aimed to ensure that both parents and tutors could use the app as smoothly on a computer as on a mobile device, without losing any of its intuitive design.

Design Process

I started by designing wireframes, which served as the foundation for the desktop version. I focused on three key screens: the homepage, tutor selection, and tutor profile. It was essential for me to maintain clarity in the interface while using the additional screen space effectively. From there, I developed low- and high-fidelity prototypes and tested them for usability, making continuous improvements. This process helped ensure that users would easily navigate both the mobile and desktop versions of the app.

Wireframes

I started by creating simple wireframes to define the basic layout and flow between screens. It was important to keep the structure consistent with the mobile app, so I mirrored many of the same elements and design choices. This way, I could ensure the desktop version felt familiar to users while establishing a strong foundation for the larger screen experience.

Low-Fidelity Prototypes

Once the wireframes were in place, I turned them into low-fidelity prototypes to quickly test core functionality and navigation. At this stage, I wasn’t focused on the visual details but rather on how users moved through the app. It allowed me to gather initial feedback and see if the overall flow made sense without getting bogged down by design specifics.

High-Fidelity Prototypes

With the basic functionality in place, I moved on to high-fidelity prototypes, incorporating colors, typography, and visual elements. I stuck to the same color palette and fonts from the mobile app to maintain visual consistency across platforms. This stage allowed for more detailed usability testing, ensuring that every interaction worked smoothly and that the experience felt polished on the desktop as well.

User Research on Navigation Design

In the desktop version of the application, I faced the challenge of determining the best placement for the navigation bar, which included options like Home, My Classes, Messages, and My Kid. I considered two solutions:

Placing the navigation buttons at the top of the screen alongside the logo.
Designing a slide-out menu that users could open when needed.

To evaluate which option would be more intuitive, I conducted usability testing with five users. We started by testing the first solution, followed by the second. I observed their reactions and took notes on their comments as they navigated through the app. At the end of the testing, users provided feedback on both designs. Based on their insights and behavior, it became clear that the slide-out menu was more functional and intuitive. As a result, I chose to implement that solution.

User Feedback from Navigation Testing

Below are detailed observations and insights gathered from users while testing two navigation solutions in the desktop version of the app: a traditional top navigation bar and a sliding menu.

User 1

Solution 1: Initially, the user commented that "the navigation bar looks OK," but as they continued navigating, they began looking for options in other areas of the screen. They mentioned that there’s too much happening on a single bar, causing "difficulty focusing on the right function."

Solution 2: The user praised the sliding menu solution, saying, "It's much more readable, and I can see everything when I want." They added that this layout is "cleaner and less distracting," with the additional icons providing a better user understanding and experience.

Summary: This user preferred the sliding menu, finding it more straightforward and user-friendly.

User 2

Solution 1: After a while, the user noted that the navigation bar "works, but it takes some getting used to." They commented that too many things are packed into one space, sometimes requiring them to pause and search for the right option.

Solution 2: "Oh, this is much better!" – the user quickly grasped the functionality of the sliding menu and remarked that it was "much more intuitive," especially with the "great addition of icons." They highlighted that navigating was easier and that they preferred this layout.

Summary: This user strongly favored the sliding menu, highlighting its improved functionality and simplicity.

Example of the first solution: Navigation on the top bar

Example of the second solution: Navigation in a slide-out sidebar

Page updated

Google Sites

Report abuse