Social good app & responsive website for ICC —
My third UX case study
Photo by Benny Lam
About ICC
Build a "caring community" to help HK schoolchildren who live in subdivided flats to protect their eyes and see the future
The Problem
In Hong Kong, there have about 50 thousand school children living in subdivided flats. They do school work and use electronic devices in low-light areas that have raised concerns about the student’s eye health. Many parents do not have the resources to regularly check their children’s eyesight and they also do not have adequate information about how to maintain good eye health.
The Goal
Build an app and responsive website to help HK schoolchildren and their parents has proper information and the resources to maintain the student’s eye health.
Project Overview
Project Duration: September 2021 to November 2021
My role: Visuals, Interactions, Research
My responsibilities: user research, wire-framing, prototype, usability testing, iteration, and the creation of the final high-fidelity prototype.
User Research Summary
A study by a Hong Kong NGO finds more than half of the parents surveyed say their kids do schoolwork in poorly lit areas. Caritas Development Project for Grassroots Organisations also notes most parents do not have the resources to regularly check their children’s eyesight. According the survey, I create empathy maps to understand the users I’m designing for and their needs.
Building Personas
Crazy Eights
I did a quick ideation exercise to come up with ideas for how to make the app is easier for low-educated and non tech savvy people to use.
Create Problem Statements
Identifying the problems that users face is one of the most important parts of UX design. Problem statements provide clarity about your users’ goals and help UX teams identify constraints that prevent users from meeting those goals.
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the ICC app. These designs focus on eye break alarms and eyes health tips initially.
Digital wireframe
Low-Fidelity Prototype
The low-fidelity prototype connected the primary user flow of features, so the prototype could be used in a usability study with users.
Here is the prototype made for the Usability Testing
Usability Studies
To understand how real users interact with our designs and how well our product meets their needs, I planned a usability testing session. See the full Usability Testing Report here.
Creating Affinity Diagrams
Once I finished all the usability testing sessions, I collected a lot of research data. These data were used to make an affinity map to find the common themes or relationships in this observation. So that I can further understand and define the problems in our product and design.
Research Insight
After identifying themes and analyzing the common patterns during creating affinity diagrams, I come up with insights for each theme.
A real community
Stakeholders expressed in interviews that connects parents and school children who live in subdivided flats and volunteer is necessary
User Profile System
Users who want the app can record their eye health history and the index of eyesight.
News & Event
Users think news & event notification is useful.
Timer Notification
Users think timer notification is useful but don’t need to let the user set the duration.
Refining the design
After I shared those insights from our research with stakeholders and agreed on the ones to take action on. The next step is to improve our designs based on what I’ve learned. Among those insights from the usability studies, I’ve prioritized the pain points that were highlighted by participants during our research. The design thinking process is a really iterative process, very often prioritizing and advocating for user needs is our responsibility. This entire process of researching, synthesizing, and then iterating based on that research, is a loop, not a line. That means the cycle is often repeated many times.
Style Guide
To let our teams design and develop a product following predetermined standards. I created a sticker sheet with a series of reusable elements that allow teams to maintain consistency within a design and across products.
Final Mockup Design
High-Fidelity Prototype
The final high-fidelity prototype followed the same user flow as the lo-fi prototype, and include the design changes made after the usability study.
View the ICC high-fidelity prototype
Sitemap
I created a site map to show how pages are prioritized, linked, and labeled. Having this site map helps me plan the website before I created it.
Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the design to fit the specific user needs of each device and screen size.
Design For Accessibility
Inclusive design is a win-win for customers and businesses. It expands your product’s reach, sparks innovation, and helps the company take on a position of social responsibility.
Based on the standard of WCAG, I used the luminosity contrast ratio of images and text to meet a contrast ratio of at least 4.5: 1.
Use icons to help make navigation easier.
With ample white space and large font size.
Takeaways
The app makes users feel like ICC really thinks about how to meet their needs.
One quote from peer feedback:
“ICC app helps bring caring about my kid eyes health to a personal level in a way that’s easy and engaging.”