01. Understand the users
After reviewing the project brief, my team and I set a timeline and conducted UI reference searches for gaining some initial understanding of the typically elements present in these kinds of system. We also scheduled Q&A sessions and interviews with our clients and potential users in their company. Our objective is to identify their pain points and gather valuable insights that will inform our design decisions.
So what are their needs?
I realised that we don’t seem to understand the rationale and thoughts behind “WHY” they demand such a platform, and I believe uncovering this part is crucial for creating a user-centred design that truly solve their needs. To address this, we directly asked our clients about their incentives and expectations for the platform. Here is a summary of the pain points and needs we identified based on their responses:
Pain Points 😨
Time-consuming and unorganised to manage things with the traditional method
Difficult to know the jobs-to-be-done
No quick way to glance company’s performance
Unable to effectively filter and search for a special client with the traditional method
Needs 🙏
A quick view of KPIs for increasing transparency across the company
Easy navigation of daily tasks
A client page that organised and searchable
Be able to view all relevant info about a client
Proposed Solutions
With a deeper understanding of the users’ needs and pain points, we proposed the following approach to design the dashboard and client management system:
Dashboard
Present data using clear infographics to enhance data comprehension
Include a list of pending tasks and incorporate quick navigation buttons to facilitate efficient task completion
Client Management
A page that streamlines the organisation, storage, and management of user accounts
Implement robust features that allow users to easily operate on their accounts, improving overall efficiency and productivity
A detailed profile page of each client containing comprehensive information
Enable users to attach relevant documents to the client profiles, offering a centralised location for important records
02. Define the structure
We developed a sitemap that outlined all the features and content we intended to include.
We also created a user flow to map out the key navigations of the client management page, ensuring a seamless and intuitive user experience.
03. Ideation
Wireframing
In the ideation stage, we initiated the design process by creating digital wireframes.
Design System
Below is the design system we developed, featuring a cohesive visual identity. To align with the existing app's theme, we maintained the primary colour as royal blue.
We applied this design system into the wireframes and make some refinements. Scroll left and right below for a “before and after view”!
04. Refine + Deliver
Usability Testing
We conducted moderated tests with company staff and individuals with managerial experience to assess key actions' usability and gather valuable feedback. By involving participants in specific tasks and seeking their input, we gained insights into user experience and made informed design improvements for an approachable interface.
Tester
Tasks
Participant
Observe
Give feedback
Tester actions 💻
Showing Figma prototype
Noting down participant’s action
Observing any obstacles/expressions
7 participants in total 👨🏻👩🏻
2 MyHelper staff
2 with domestic helper at home
3 with managerial experience
Task Scope 📝
Visibility of statistics on dashboard
Visibility of key client information
Ease of performing client management actions (e.g. ban/delete/preview/upgrade account)
Collect Feedback 💬
Design and layout
Ease of Use
Obstacles encountered
Overall, participants found our design to be clean and intuitive, with minimal difficulties in performing key operations. However, some issues were identified during the evaluation, which we then addressed by refining the identified problems.
Before
After
Problem 1 😓
The preview buttons is not noticeable as it is embedded with other info
Problem 2 😓
“Premium upgrading” action is not intuitive enough as as it requires users to first go to the Verification tab before they can upgrade.
Problem 3 😓
Some participants tended to overlook the view and download button
Problem 4 😓
In general, the participants felt that the wordings across the pages are too small to read
Solution ✅
Changed the colour of the button and place it next to the other action button to enhance visibility
Solution ✅
By placing the upgrade button adjacent to the premium status, users can understand its purpose and easily perform the action
Solution ✅
Changed the body text size from 16px to 20px
Solution ✅
Enlarged the button with text and colour
Let’s explore the final design!
Thank you for reading this case study. I hope you enjoyed it!
You can check out my other projects below.
Project Summary
MyHelper is a mobile app that serves as a new recruitment platform for domestic helpers and employers in Hong Kong. It allows domestic helpers to create and showcase their own profiles and qualifications, enabling them to be scouted by potential employers. Simultaneously, employers can post job listings on the platform, allowing helpers to apply.
This project aims to create a management platform that streamlines the workflow for operational-level users within the company.
Three teams worked together on this project, with our team being responsible for the following parts:
Dashboard: presents key statistics
Client Management: enables users to easily view and management all clients, including both employers and domestic helpers signed up on the platform
Project Details
Client
Darmax Global
Duration
June - July 2023 (3 weeks)
Team
Venus Tong (Leader), Adrian Luk, Lakshya Aswani, Vicky Chung
Main Scope
Wireframing, UI Design, Usability Testing
Tool
Figma, Figjam
Design Process
Understand
Project brief
UI reference
Q&A with client and users
Define
Information Architecture
Userflow
Ideate
Low fidelity wireframing
High fidelity wireframing
Refine + Deliver
Usability testing
Adjustment
Final prototyping
My takeaway
The Importance of Usability Testing
Through usability testing, I realised that even with a well-designed solution, anticipating all potential issues is challenging without real user feedback. Usability testing helps uncover overlooked problems, enabling us to refine the design for a smoother user experience.
Effective Collaboration and Communication
As the group leader in my team, I gained valuable skills in communicating my opinions and actively listening to others. I learned to leverage team members' strengths, allocate tasks accordingly, and maintain a well-structured schedule. This fostered a collaborative environment that maximised our productivity and ensured the project stayed on track for success.
MyHelper
A streamlined internal admin operation platform for a domestic helper and employer pairing app.
