UI/UX Case Study — I Redesigned The MySejahtera App Because It S*ck!
Design with 💙 by Binson Loke, 2021
👋🏻 The Intro
This is a short & sweet case study that was redesigned because of my initiative. So, this case study is not affiliated with or endorsed by MySejahtera. Instead, I will share the process from head to toe in this case study.
📱The Overview
For your information, MySejahtera is an application developed by the Government of Malaysia to monitor the COVID-19 outbreak in the country by empowering users to assess their health risk against COVID-19. However, if you were a Malaysian, you probably encountered some difficulties while using this app. So, let’s have a look at what flaws I have found!
📍The Objectives
- To discover the potential UI/UX flaws.
- To minimize the users’ burden.
- To enhance the overall user experience when interacting with this app.
⏰ The Timeline
From 28 Nov 2021 to 30 Nov 2021.
🖍️ The Process
Stage 1 — Understanding
I started the project by jotting down the users’ pain points and diving into the details.
Stage 2 — Discover
I observe by testing out the current MySejahtera app and pointing out the UX flaws when interacting with this app. I can discover the potential problems and proposals that will carry out later by doing this.
Stage 3 — Identifying
➡️ The Check-in Page:
The Flaws:
1. The logo is too big, and the section eats up 40% of the space.
2. The tiffany blue didn’t contrast the white text.
3. The icons are not consistent.
4. Information overloaded.
5. The text is not aligned with the button.
The Flaws:
1. The “IN” is not obvious enough.
2. The logo is unnecessary to show it.
3. Inconsistent language and the reading pattern is off.
4. Information overloaded.
5. The text is not aligned with the button.
The Flaws:
- After clicking on the check-out button, why will it not return to the check-in page?
🏠 The Home Page:
The Flaws:
- Too much stuff is displayed in one section. Also, the color combo of the icon is terrible.
💡 UX TIPS: According to Miller’s Law, the average users can only store 7 items in their working memory. So, it’s important to minimize choices as Hick’s Law.
2. The content is not shareable on social media, and I am unsure if it is clickable.
3. Bugs and errors at the bottom.
The Flaws:
- The HelpDesk is not noticeable. It should be showing upfront (floating button).
📊 The Statistic Page:
The Flaws:
- The content/sections can be categorized better.
- Why are there random Malay language showing up?
- The red color is hurting my eyes.
- The color treatment is not consistent: Flat and gradient.
👤 The Profile Page:
The Flaws:
- The “gear” icon would be more suitable.
- They shared the same information. Why not group them into one card instead.
💡 UX TIPS: According to the Law Of Common Region, users make quick judgements based on the grouped elements.
3. The refresh CTA is located at an odd position.
4. The data is overloaded.
💡 UX TIPS: According to Occam’s Razor, good design is as little as possible, without compromising the overall function.
5. The digital cert is undoubtedly essential. So why is it located at the bottom? Also, it makes the entire too long to scroll.
The Flaws:
- The logout can be located separately at the bottom and make it a red color.
- It has too much negative space between the title and the text input.
- The yellow password suggestion can be placed underneath the Old password & New password text input.
- The CTA has a small target area.
💡 UX TIPS: According to Fitts’s Law, the touch targets should be large enough for users to interact.
☎️ The Helpdesk Page:
The Flaws:
- Instead of jumping out to the browser, why not complete it within the app? Also, it has more than 3 steps for me to fill-up the form.
💡 UX TIPS: According to Parkinson’s Law, reduce the actual duration to complete a task can improving the user experience.
Stage 4— Ideations
I created the quick lo-fi wireframes (figure1.0) using pen & paper within 10 mins.
Then, I am doing a Crazy 8 (figure1.1) for more design options on the check-in pages.
💡 UX TIPS: Crazy 8, is a core Design Sprint method. It is a fast sketching exercise that challenges people to sketch eight distinct ideas in eight minutes. The goal is to push beyond the first idea, frequently the least innovative, and to generate a wide variety of solutions.
💄 The Makeover
Stage 5— Magic-fying
After a few iterations, I finally came up with the hi-fi screens to solve the users’ pain points and improve the user experience.
➡️ For The Check-in Page:
- The users will return to the home page once they click on the Check-out button — To reduce the user’s click.
- A little illustration was added to enhance the interface.
🏠 For The Home Page:
- The Share To Social Media & Copy Link was added. So, the users (senior citizens) can share the validated news with the family group.
- A floating button was placed on the home page, including 5 services: Help & Support, Language, Contact Us, What’s New, and Follow Us.
📊 For The Statistic Page:
- The overall color scheme has been harmonized, not hurting the users’ eyes.
- Also, the section has been categorized into 3 categories.
👤 For The Profile Page:
- The sections have been grouped based on similar content: Personal info (Name, IC, and States); Details (digital cert, risk status, and vaccination status). Also, The Digital Cert was moved from the Home Page to the Profile Page.
- An empty state for the digital was added for the users who want to request their digital cert.
- A related-FAQ section was listed under the digital cert. So, it can provide information on frequent concerns.
☎️ For The Helpdesk Page:
- The entire filling form flow was being simplified into 3 steps.
- Auto-filled action (text input) was added to save the users’ time.
- Then, a confirmation screen with an estimated wait time was added to achieve the Goal-Gradient Effect.
💡 UX TIPS: Goal-Gradient Effect, it’s good to provide a clear indication of progress to motivate users.
🎉 The Takeaway
I am beyond cloud nine because I was finally free to write a new case study on Medium. Although this is only a little project, I have invested my sweat and tears into it. Overall, I enjoyed the entire process, and it was an exciting journey for me to learn new stuff.
Finally, thanks for reading this far. 🤩
