UI UX Case Study
Ruangguru
Help users get more efficient, and convenient experience to access learning materials
Help users get more efficient, and convenient experience to access learning materials
*This project is part of the UI/UX Design Final Project for Purwadhika Boot Camp program. Ruangguru is the case study that was given for this program. I’m not working or contracted professionally by Ruangguru. Here I will share all the processes in creating this project.
UX Researcher, UI Designer
Figma, Whimsical, Google Form
mobile apps
4 weeks
Ruangguru is a startup company focusing on education-based services and the largest online tutoring in Indonesia. The core product of Ruangguru is Ruang Belajar which provides a variety of video lessons as well as learning features that help students learn according to their individual needs. In this project, I was also mentored by Zenius’s product designer and internal mentor from Purwadhika Digital School.
I began by analyzing the screens of the Ruangguru app. I took screenshots of all the current screens & features while understanding how the learning flow worked.
Since the most used product on Ruangguru is Ruang Belajar, I did further research on that flow and find what problem users might have when using Ruang Belajar. And what I found was lack of user experience when using Ruang Belajar.
"There are too many steps to access learning materials that make it less effective. Also confusing and crowded homescreen with many features in Ruang belajar section."
Help users get the best experiences in their learning process and help users find features more easily. Through that, we can increase user retention rates by improving user experience to access learning materials more efficiently, quickly, and conveniently.
The final version after all the iterations so far (view prototype here)
.png)
This feature helped users to find and navigate easier on the homepage. Create the group of most used features in quick access on the top of the homepage and focused on making it highly adjusted to user needs. Added a new feature called “Riwayat Belajar” which contains learning videos that have been watched.
Better information quality and completeness of Ruang Belajar. The main focus of improvement is to create a flow where users can complete the task in the most convenient and comfortable way, also reduce the step needed to access learning materials that may waste user’s time.
.png)
.png)
Easy to access shortcut at homepage that helps users revisit the last seen video quickly. Users can get a reminder to complete video lessons with less number of clicks.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
In this research, I focused on understanding user behavior when accessing subject materials in online learning platform and when using Ruangguru app. I do online interviews, usability testing, comparative research and online surveys for data collection. The participant criteria for this research are students who participate in online learning, this including new users and active users of Ruangguru. The total respondent of online surveys was 20 respondents and 5 users for usability testing with online interviews.
I also do competitive analysis to get more insights about other products. It helps me to get the idea of different features and layout that can be implement for any design improvement.
The next step is to classify insights from users into thematic groupings.
.png)
After collecting the data, I’m grouping user’s pain points into Affinity Diagrams to get clearer problems from each category. From those pain points, I selected problems that I wanted to solve. Then, I came up with design improvements and new features solutions.
I recorded interviews and got insights and problems that user faced while using app. then i compiled it and summed it up using affinity diagram to see which problems came up frequently.
I created user persona based on the interview results. This persona will contain the details of the user's goals, background, and frustrations.
In this stage, I define the user’s journey when accessing learning materials and exploring Ruang Belajar features. I added the current flow and new flow of Ruang Belajar for comparison.
I spent several hours sketching loose boxes which will later turn into a more refined design. Once I'm done with the sketch, I had a basic idea of what the final screens will look like and give it more clarity by digitalizing the wireframes.
After analyzing the style and typography that the app is currently using, I chose a similar font and color that represents Ruangguru.
.png)
After prototyping, I did usability testing to get feedback from users. Then, I’m doing iteration to finalize the design.
.png)
.png)
We did 2 sessions of interviews with the founder to get a better understanding about the brand direction. Starting with understanding the brand, we ran a discovery discussion to find the possible solutions.
The next step is looking at the direct competitors of Hijab Alsa. I did research to compare 4 websites that provide similar products & services. I tried to compare the overall user experience and the features provided.
We wanted to highlight the best-selling products in the heroes section with a clear CTA that can be integrated directly into marketplace. Testimonials are also included to convince the users. We'd also want to include some information about brand stories and other platforms that users can reach.
After gaining more information about the brand and the competitors, we decided to build style guideline. We choose colors that represent Hijab Alsa, and pick the color from the brand logo with a touch of red to give contrast. For heading text, we use serif fonts to give it a premium and feminine feel.
We use figma to create style guidelines and organize the hi-fi design with collaborative process. We agreed that the page structure should contain navigation menu, hero section products section, about the brand, value proposition statement, testimonials and footers. We also consider the limitations that we can implement when designing in page builder.
In this step, the UI Designer implements the final design into brizzy page builder and launch the website. We also make sure that all information is included, well-designed and responsive.
To start with, I went through a lot of inspiration that related to this app. When it comes to visuals, I try to provide a minimal and clean look that will enhance usability. The visual design focus on heart-warming, and calm through employment of soft colors (the brand colors), organic shape, and clean design element.
.png)
First I observing the design system of the current app from typeface, color, and other visual element they currently use. Then, I compile it into style guideline that I would use in the design process.
.png)
I gain some inspiration around design pattern like UI element, UI Illustration, font size and spacing. Then I designed the existing components to be more consistent and sustainable design system.
.png)
.png)
.svg)
