UX Case Study - Hiomi, a parental control app 🇸🇬

Hiomi is a digital safety startup based in Singapore that aims to keep children safer online. The development of the current app did not involve any designers. The app therefore lacked in user-friendliness. I was tasked with completely revamping both the parent and child apps to improve the UX and UI.

Process

Following is the design thinking approach I took to create a user-centred product.

design process illustration
Understand

The first step of the process was to define the problem we're trying to solve with this project. I had an initial call with the client to discuss about the main problems they were facing with the current design and how we should approach the redesign.

After discussing with the stakeholders, the main problem with the design was that it looked amateur since there was no attention given to the design-aspect of the product. The reason for it was there were no designers involved in creating the first version of the app.

The target user base was parents from Asia. Specifically, Singapore, Indonesia, and the sub-continent.

We were able to get some potential users on board for a few 1 on 1 interviews so that we don't get carried away with our own assumptions. We wanted to validate them and make sure we take informed design decisions.

Research

In the user research stage we interviewed 3 individuals. Two of them were based in Singapore and the other from India.

I wanted to look for patterns in these interviews so that we can come up with a good persona that highlighted the main pain points and goals of the target user.

Concluding the user interviews, it was very clear that the main concern among parents was the screen time children spend on their phone. Next to this was not knowing if they are going through any incidents like cyber bullying when using these digital devices.

Main points from the user interviews:

Persona
persona
Ideate

Following the problem definition and user research, I had a good idea about what problems we needed solving with design. Both from a user's goals stand point and also UX issues in each screen.

In this stage, I started to brainstorm different ideas to come up with solutions. Personally I prefer sketching out ideas using pen and paper.

I started to sketch out rough ideas on paper and tried to create alternatives to them so that I don't get stuck on the initial idea.

Wireframes

The finished sketches gave me a clear view of what the user flows will look like from screen to screen. I then focused on converting these sketches into wireframes so that I can run them through the client and get his feedback.

I'm careful not to spend too much time on the details in this stage since we will be changing things around according to the feedback.

collection of wireframes
UI/ Prototype

After a few iterations of wireframing, we decided to move on to pixel perfect final UIs. I then converted the wireframes into UIs using Figma and made a clickable prototype.

Onboarding
onboarding uis

The onboarding process was broken down into multiple pages that made the flow more organised. We wanted to emphasise the message that we care about user privacy a lot. For this, we made a separate page in the onboarding to highlight the information we collect and why we need it.

The user will then clearly understand how privacy works in Hiomi before providing consent.

A new "packages" page was added to make the free trial experience more intuitive. The new experience is familiar since it's used by most apps these days. The user will clearly know what their commitments are.

Home
homepage uis

The client wanted to the user to have an easier way of switching between children in the home page. The current experience has a large card experience which is not ideal for a function like this.

I added a section on top that contains avatars combined with names as an alternative. The user can simply browse through the children horizontally, or add a new child in this module.

For the rest of the elements, I wanted to check what information is most important for a parent to see as soon as they open the app.

Since our problem definition identified screen time as the main concern, I focused on giving that module the most emphasis.

Following this, we added the "alerts" so that the parent can address any issues the child might be facing immediately.

Screentime
screentime uis

Screentime was revamped to show the daily average use alongside the most used apps at a glance. Hiomi will also educate the parent on what next actions to take according to context.

Limiting apps and schedules also now has a more intuitive experience compared to the previous one.

Other screens

All other user flows were updated to simplify the features by minimising cognitive load and making the flows more intuitive to users of all technical know-how.

other ui screens
Conclusion and reflections

I learned a lot while working on Hiomi. The values of the startup as well as the client was the thing that made me interested in the project. The final output was very close to what we envisioned at the beginning and I was very happy with the result.

One thing I would like to improve on is the use of a more sophisticated design system. I'm working on creating a complex design system from the ground up for my personal work. I think this will help me to learn a lot about atomic design as well as save me a ton of time.

Sign up to my newsletter

Once a month, I send a collection of the best UX resources I find to my subscribers. Sign up to learn things with me.

my memoji
Made with love, sweat and a lot of tea by Chandima © 2021