Date
2021/6 - 8
Role
Product Designer
Responsibility
Usability Test, Research, UI/UX Design
Co-workers
Product Owner, Product Designer, FE/BE Engineers
01. Objective
Assisting users with multiple forms of content to quickly find what they are looking for and conducting usability tests to ensure users understand and accomplish missions effectively.
02. Role & Deliverables
I collaborated with another designer on the redesign and usability testing project for this page. I was responsible for conducting the testing, compiling the test results, and sharing the findings internally.
03. Challenges
Due to the introduction of various types of content, which has led to different usage scenarios to consider, the once simple page structure has become very complex, thereby rendering hierarchical design and feature prioritization a challenging task.
04. Outcome & Impact
During the week of the function release, user retention and user engagement in learning saw a noticeable boost, and the course video play rate surged by 4%, resulting in an additional 800 students interacting with Hahow each month.
Project Background
Hahow is an online learning platform that began by offering fundraising video courses. Its aim is to provide a platform where anyone can learn any skill at any time and place.
"My Courses Page" is a page where users can access all the courses they have purchased and select which course they would like to learn.
However, the customer service department has received numerous complaints from users who are unable to find their courses quickly and efficiently.
Moreover, Hahow has expanded to include various types of content, such as articles and live streams, which has made the original "My Courses" page unsuitable for displaying these formats.
Project Goal
Process Followed :
Problems
After organizing all the feedback related to the "My Courses" page and categorizing it according to various needs, we identified five primary pain points.
Research
＃Competitor Analysis
We selected eight competitors with a wide range of products and analyzed their user flow and information architecture, gathering ideas for features and functions we had not previously considered.
Assumption
＃Information Architecture
After gathering user feedbacks and conducting competitor analysis, we created a proposed information architecture. We identified three levels of content hierarchies:
＃Testing Prototype Design
According to the information architecture and other problems we tried to solve, we built a testing prototype based on three main design focuses:
We also planned to design new course cards for the mobile view, providing the best experience for every devices.
Usability Test
# Key Testing Questions We Want To Know…
# Framework of Testing Questions
While planning the usability test, we considered users' experience levels and structured tasks to gradually increase in complexity from low to high, allowing for full engagement.
Online Usability Testing Tool
We chose Maze as our usability testing tool. It can connect with Figma prototypes for testing. We used it to conduct both in-house and end-user usability tests.
Usability Test Result
🙌🏻 Received 194 responds！
# Composition of Our Respondents:
# Key Insights
01. Implement one advanced search function would satisfy 90% of user needs.
Based on our user research, we found that only 10% of users would implement advanced search twice, which means offer one advanced search function is enough for 90% of users.
03. Archive function showed relatively low usability.
Despite a 95% success rate, the archive function showed low usability due to a high wrong click rate, which we attribute to users being unfamiliar with the function's user flow.
02. "Sort by Behavior" was the most useful advanced search function for users.
In our study, we found that the “Sort by Behavior” advanced search function was the most useful. Users found sorting by recently watched or recently bought to be particularly helpful, according to both qualitative and quantitative data.
04. Users wanted to manage their own content.
Our quantitative feedback indicated a clear desire among users to manage their own content, which included creating custom groups and renaming items to suit their preferences.
Final Design 🎏
Considering the time limit and project resources, we aimed to solve the most problems with the least amount of effort. Therefore, we prioritized effectiveness and efficiency and created the final design below:
Before
After
![[After Redesign] My Learning Page.](https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/b2113933-fbb2-461f-9c65-967d28ae4cf2/my_learning/w=1920,quality=90,fit=scale-down)
Highlight 01
#effectiveness
Clear Guidance and Effective Functions for User Needs and Cleanup
Solving Multi-Product Switching Problems with Clear Hierarchy
By rearranging the content hierarchy based on user scenarios and product types, we enable users to quickly access all content types by clicking on tabs, reducing the need for extensive scrolling.
Solving Poor Searching and Content Cleanup Problems with Powerful Filters and Sorting
By providing filters and sorting options for different product types, users can easily locate specific content and efficiently clean up unnecessary ones, ensuring a streamlined content management experience.
Highlight 02
#efficiency
Provide Smarter Experience in Every Devices
Smart Shortcut to Recently Viewed Content.
By adding a hover card to the entrance button of "My Learning", users can rapidly browse through the latest content they have viewed.
/w=3840,quality=90,fit=scale-down)
Comfortable Mobile Experience to Increase Efficiency
I created new course cards for the mobile view, which allow users to view more content on one screen and save them time while browsing this page.
Highlight 03
#satisfaction
Create More Surprises and Motivations
👇🏼 We created a Daily Greetings Section and chose 7 sentences from in-house proposals to give users a fresh and energetic vibe each time they visit the page.
👇🏼 We designed a Learning Dashboard that shows the total number of content owned by users, giving them a sense of accomplishment in their accumulated learning.
Welcome to visit the "My Learning Page" right away! 👀
→ Don’t forget to login first 😆
Outcome 🎯
After releasing new version of “My Learning page” forａweek, we collected feedback from users through an online questionnaire.
By analyzing quantitative data, we found:
- During the week of the function release, there was an obvious increase in user retention, and also a high peak in the number of users engaging in learning.
- The course video play rate increased by 4%, which means there was an increase of 800 students interacting with Hahow per month.
We also collected some qualitative feedbacks :
“ I'm really grateful. I had complained that it was too much trouble to find my courses because the courses I had recently watched didn't show up at the front. However, the new version of the My Courses page has completely solved my problem. Thank you Hahow. ”
“ It’s really convenient to find the courses I recently watched now, but I still wish for a function similar to labels that would allow me to categorize my courses. I’m looking forward to the next version of the page! “
Takeaways 💡
01. Try to solve the most problems with the least efforts.
Since we found custom orders provides the best user experience, the cost of engineering was high. On the other hand, by providing basic filter and sorting function can solve 80% of problems. Therefore, we decided to go for simple but effective solution in the end, try to solve the most problems with the least efforts.
02. In-house testing is crucial before launching formal usability test.
I found that despite we already checked the testing process repeatedly, in-house testing still revealed some bugs and mistake in the test. All in all, although it costs time, I consider in-house testing to be worthwhile and essential.
03. Writing insights that are relatable to the audience.
In the process of preparing to present the results of usability tests to the company, I found that providing insights that are relatable to the audience is very important. In addition to leaving an impression in their minds, it also helps everyone effectively utilize the insights in their own work.
04. Choose online usability testing tools carefully.
Due to the complexity of the testing mission, just creating the testing prototype and setting up the questions in Maze took a lot of time. Therefore, if there is a similar large-scale usability test in the future, tools must be carefully selected again.
Want more? Check out my other projects below.
