Research

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. 

‍

Insight & Findings

The next step is to classify insights from users into thematic groupings.

Solution

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.

User Persona

I created user persona based on the interview results. This persona will contain the details of the user's goals, background, and frustrations.

User Flow

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.

Design Process

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.

‍

Iteration

After prototyping, I did usability testing to get feedback from users. Then, I’m doing iteration to finalize the design.

‍

Comparative Research

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.

Style Guideline

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.

Collaborative Design Process

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.

Implement Design

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.

‍