top of page
Header.jpg

Ollo: Baby Headshape Checker

A baby head scanning app designed for both doctors and parents to monitor the status of the baby’s head shape over time. This was designed for a collaboration between two companies: Orthopaedia and Starton, that needed an app to scan and monitor a baby’s head condition easily.

Duration

3 months

Team

Individual

Skills

UI Design, Prototyping

My role as a product designer

Designing a solution for monitoring Plagiocephaly.

This design project was for a collaboration between Orthopaedia and Starton that aimed to provide treatment for Plagiocephaly affordably. Known as Flat head syndrome, it is a condition that occurs within babies in their very early stages of life, where their head is not round.

Flat Head Syndrome conditions.jpg

To design a mobile app according to their needs.

One of the services they aimed to provide was a user-friendly and visually appealing mobile application that allowed users - doctors and parents - to be able to easily scan and monitor the changes of a baby’s skull over time.

Phone_edited.jpg

And to create a working prototype that will be presented at a symposium.

Within one and a half month’s time, I needed to create a working, interactive prototype for a symposium in Indonesia, where the company would present it to the doctors attending.

The result

A head scanning app that allow users to scan and monitor a baby’s head seamlessly.

Solution.png

To scan and identify

Easily identify the current status of baby’s head.

In addition to finding out treatment methods and specialists to consult.

Scan & identify.jpg

Status condition is designed to be presented as simple, as visually, and as directly as possible.

Recommendations displayed to provide guidance.

Developing the UI from 0 to 1.

UI Progression.jpg

Determining the main features to focus building first.

Due to the limited time I have, I listed which areas I would focus on designing first, based on their needs, to ensure time is used efficiently.

Initial flowchart.jpg

Low fidelity wireframes helped establish the start.

This phase was extremely helpful in determining the content and organization of the app, as well as establishing a form to the app.

Lo-fi frames.jpg

Each feedback brought it closer to the final design.

​Throughout the prototyping phase, there were many discussions and feedback on the designs, which helped refined the form further.

Mid-fi frames.jpg

Nunito was selected for the headers,
and Hind for the body content.

Understanding Plagiocephaly frame.jpg

Its rounded edges evoke a soft, calming feel, and its weight makes headers easy to read.

Nunito

Designed with UI in mind so it has great legibility, and has a professional feel to it.

Hind

Colors were chosen to align with the brand color, #00CAD4 and #544749.

Color guide.jpg

A high-fidelity for presentation before the final touches.

Exhibition ready.png

A high-fidelity was made and presented at the symposium, resulting in 60+ registrations.

Presented at the Indonesia Symposium on May 12, the app was well received by our target audience. This allowed us to move forward to designing every screen, and eventually building it in code.

The final design

Final design.jpg
Subscription page.jpg
Doctor using app.jpg
Parents 1.jpg
Parents 2.jpg
report conditions view.jpg

Reflection

This was my first experience designing for a company, and being in a working environment. I was exposed to many new things I would not have experienced in school, and as a result, I was able to learn valuable insights, especially regarding my skill set, and communicating professionally.

1.

Communication

Learning to communicate was the most vital aspect I gained in this opportunity, beyond the design work itself. I got to witness how professionals share ideas, compromise, and disagree and refute ideas. Knowing to say no is important when you truly believe an idea would not work, but being able to explain rationally and objectively is crucial than just basing it on emotions. Furthermore, it is crucial to not sound critical, harsh, or emotional when speaking.

2.

Confidence

I gained a lot of awareness regarding my skill set and capabilities. It made me aware of my design skills and what I am able to offer. And so, I would like to gain more work, design for many industries, and develop my design skills further, so that I am capable of producing an appealing and user-friendly UI for any industry.

3.

Business-centered & Copyright

As this was a design that would eventually be launched as product, it was interesting to observe the decision-making process for monetizing the app. During the process, I was able to learn about the cost factor of producing apps such as server requirements and app store policies, and how these influence what you offer.

Additionally, I also had to be mindful of copyright issues regarding typography and icons. As I had always worked on school/personal projects where I am able to use them freely, it was a different experience realizing how license requirements have a huge influence (limitation) on my work. For example, the fonts I had chosen were largely due to the fact they are commercially available and free to use by Google. Otherwise, I would have used Mikado.

bottom of page