top of page
Version 1.1 | Mobile & Software
App Information Overload:
MySejahtera's User-Centric System Redesign
SCOPE
MySejahtera is a contact tracing and health monitoring mobile app developed by the Malaysian Government to combat the spread of COVID-19 in the country. This case study aims to revamp and refine the app's user interface, shifting focus towards optimizing user navigation and streamlining efficiency. This work involves researching into the current app dynamics, conducting user research and reimagine user flow.
TIMELINE
Version 1: July 2021 (3 weeks sprint)
Version 1.1: Mar 2024 - Apr 2024
MySejahtera's app has inundated users with information overload, largely stemming from the expedited development process. This prioritization sacrificed the crucial aspects of a user-friendly interface and intuitive navigation, resulting in a significant impediment to user interaction efficiency within the app.
The Challenge
My Role
As a personal case study, I took the initiative to address the shortcomings of this new app, driven by numerous user complaints voiced online. Recognizing the need for substantial improvement, I embarked on a comprehensive redesign journey, encompassing thorough research, sketching, mockup, wireframing, and prototyping.
CHAPTER ONE
Think
User Testing
As this is a newly formed app, I was not able to perform any historical data analysis to track user behavior or user interactions. My first step was to seek qualitative data that could pinpoint major issues in user navigation, as well as identify early issues in the app that could be corrected within the first few iterations. Testing was conducted with new and existing users of the app.
This round of testing was moderated. A video recorder and audio recorder were used simultaneously.
The Rainbow Spreadsheet
To collect qualitative data and visualize it in quantitative format, I employed a rainbow spreadsheet. This tool catalogues common occurrences observed during user testing sessions and quantifies the frequency of each event experienced by users.
In the user flow diagram, it's apparent that the app lacks clear organization and purpose. This ambiguity can be confusing for users, as the app's motive or intended use is not clearly defined. Some questions the user may wonder is "How do I book a COVID-19 vaccine appointment?", "Why are there videos on mental health?" or "Is this a health app or a COVID-19 app?"
Current User Flow Diagram
.png)
Finding Inspirations
Now that I had background data about the mobile app, I began scouring similar apps used in other countries or similar user flows. The ultimate goal was to scope out the market, get inspired, and find opportunities for a better innovation on my end.
User Testing
Effective qualitative data collection played a pivotal role in this project, prompting user testing at various stages. Conducted through focused, small-scale sessions, these tests aimed at iterative enhancements and incremental improvements.
Sketches
I conducted three rounds of burst sprints, with each sprint lasting 10 minutes, to produce rapid sketch iterations. After refining my top three designs, I solicited feedback on my sketches from various sources, including current users, friends, or even strangers. With those in mind, I was able to begin closing in on a design.
Make
CHAPTER TWO
Wireframes
I focused on wireframing high-impact pages and refining specific modules to enhance user navigation and intuitiveness while reducing information overload. This strategic approach provided a clear direction for shaping the app's concept and streamlining its design.
Utilized low-fidelity wireframes to convey the skeletal framework of the app, including content hierarchy and essential functionalities.
.png)
-1.png)
CHAPTER FOUR
Final Design
Check
CHAPTER THREE
Utilizing the design prototype, I observed numerous existing users as they navigated through the app. This exercise proved invaluable in generating ideas for elements to be tested and subsequently integrated into future design iterations. This qualitative insight seamlessly complemented quantitative data, enabling us to prioritize key areas for improvement in subsequent iterations.
User testing and recording
I conducted the user testings live, so I could watch firsthand how the user interact with the app.
Although this is a personal case study, I proactively undertook the challenge of enhancing this high-impact app. Serving as my inaugural UI/UX case study initiated in 2021, I revisited and redesigned it in 2024 to showcase the evolution of my skills and proficiency as a UX designer. You can check out the previous version of this case study here.
Learning Outcome
Looking back on my wireframes and mockups, I've come to appreciate the significance of thorough design research and the decisions made during the initial stages of the design process. It led to fewer iterations and smoother transitions from ideas to tangible outcomes. If you have any feedback my project, please feel free to share them with me :)
While I successfully completed the case study within the designated deadline, I acknowledge the potential for greater efficiency. I recognize the importance of setting a stricter scope and maintaining focus on the core objectives throughout. At times, I found myself inadvertently expanding the scope with additional ideas or 'nice-to-have' features that deviated from the original project scope.
The most rewarding part of this project is witnessing my growth as a designer. Comparing my thought processes, ideas, and design methodologies between the previous and current versions of this project has been incredibly insightful. Looking ahead, I anticipate the opportunity to revisit this project in the future, furthering my evolution and continually refining my skills as a UI/UX designer.
UP NEXT
Mockups
During this phase, I explored a wide range of color palettes, gradients, typography and layouts to elevate the design to a new level for MySejahtera.
The wireframes seamlessly transitioned into the final product, underscoring the efficacy of the initial research and design efforts. See it with this side-by-side comparison.
bottom of page