Website for Learning & Community

a mobile and desktop screen preview


Background

Jiwa website promotes informal. practical and metacognitive where students (or students’ parent) meet the expert and arrange mentoring schedule.

icon-user

Role

Researcher, Interviewer, Experience, Visual, and Interactive Design

Project Duration

1.5 months
11 April — 23 May 2023

The Challenge

This case study is non-commercial project for Google UX Course. There’s no team involved.


Foundational Interview

To grasp insights from tutor and students side, I decided to interview 5 participants from the mentor perspective and 5 participants from the students perspective. What are their experience and struggles?

User Persona

From the interview insight, I developed students’ users persona based on their motivations and needs.

Problems & Hypotheses

Problems

There hasn’t been education platform that allows connecting with mentors through genuine and personal interaction.

Most learning platform is focused in formal academic skill, there’s no dedicated service that compiles other spectrum of knowledge such as practical (swimming, make up, knife skill), metacognitive (spiritual) etc.

Lack of course in digital social media culture that encourage a mindful, learning oriented, and inspiring discussions.

Hypotheses

Find Tutor and resourceful content

We believe that Jiwa website will get contents shared, subscriptions, website visit, and people sign up if users get to connect with tutor and learning contents they need through request mentoring flow.

Mindful Social Media

We believe that Jiwa will get interactions activity within the platform if users inspired by joining events, light, memories, and discussion hashtag feature.

User Journey Map

To understand users experience better, I mapped out their possible journey interaction with the website as they find tutor.

Competitive Audit

It’s time to compare with the competitors. The analysis involves keywords for related business value such as ‘online tutoring service’, ‘online learning’, ‘skill upgrade online’, ‘tutor service indonesia’, ‘skill learning online’, ‘mindful social media’, ‘conscious social media’.

Due to time constraint in working this case, I decided to analyze deeper with only 2 direct competitors and 2 indirect competitors.

Competitive Audit April 2023 – Jiwa

See completed report for the competitive audit here


Design Brainstorm

From Phase 1, then I spent some How Might We, Crazy 8, Paper Wireframe hours to explore variety of design solutions.

Sitemap & Information Architecture

Interlapping, before jumping on wireframe, I researched on some common taxonomy in education as an information architecture and sitemap plan of the site.

Sitemap for Request Mentor Flow

Wireframe

Wireframe set up, low-fidelity created. Then I reached out to 5 participants and conduct usability test to improve the flow for mockup.

Low Fidelity Wireframe

Usability Test

From the usability study, I found some patterns and insights to improve the design.

Priority 0

To the point that) stopping users to finish task – Important and Urgent

  • Navigation Menu dropdown has two options: Self-learner and Find Guru
  • Consultation should have a clear description, whether it’s for customer service to talk about pricing or to consult learning problems, or both.
  • Field to fill for guest should be clear and distinct from the prompt to Sign up. Put the words such as “This form is for guests and will not be added to your dashboard.
  • Please log in or sign up to follow up with your consultation progress”.
  • At Hire Tutor form, length of duration session should be clear.

Priority 1

Affect usability and improve friendliness – Important, Urgent, Low Effort

  • Guru Page needs additional context, make Memories, Courses, Resources, and Events to be clearly distinctive.
  • Course Type section at Hire Tutor Form should be able to show or expand the syllabus of the course.
  • Category should have description of what fields and subjects included inside.

Priority 2

Important, Urgent, High Effort

  • Search button and a designated search page is required. As it will enhance the friendliness of the homepage, recommended for improvement.
  • Estimated price for address distance. This feature is recommended to add, though it can wait as it doesn’t affect current flow, a simple ‘tutor travel fee is not included’ note will suffice. Further research is advisable.
  • Metric for Guru to have a level of expertise (by year or other label). There needs to be a system that classifies the level of Guru expertise, further research is advisable. Not urgent, but very important.

Priority 3

Important, Not Urgent, usually High Effort

  • Promotion motivate users and could be a feature that engages users to keep using the platform. Important but not urgent. Need further research.
  • Stand-by customer service might be necessary. Important but not urgent. Need personnel budget and additional research.
  • Blue color doesn’t interest 20% users. Change is subjective, can be low priority, but further research is advisable to test with A/B testing.
  • Hero header video to feature Guru’s profile. This change will improve the likeability of a Guru to be hired, and is recommended, but as it’s quite high effort, this improvement might wait.

Phase 3: High Fidelity Prototype

Design System & UI Kit

These UI Kit serves as primary style guideline for the entire design system. I grouped later components following the O’Reilly’s Designing Interface and Google’s Material guideline, Input, Navigation, Feedback, and Cards.

Mockup Preview

Desktop Size

Mobile Size


Takeaways

Lessons Learned

Documentation. Documentation. Documentation.

Even when working as a single team member, a thorough step by step following the double diamond process is fundamental. While Problem Statement and Hypotheses has been backed up by real users experience, I forgot to write them down as documentation, it affected the later process.

The Case of Competitive Analysis

It’s not ideal to limit competitive analysis to less than 5 competitors. I struggled with the design phase with the lack of reference on the baseline design practice for social media.

With Problem Statement and Hypotheses set ahead, I should’ve explore as many keywords as possible based on the project objectives, including social media practice.

Your feedback is so much appreciated.

Thank you

Let’s talk

Leave a Reply

Your email address will not be published. Required fields are marked *