A mobile app which helps you live better.

Product design, healthcare, mobile application (iOS & Android)


Background & the challenge

A bit of context before we proceed. What you are about to read is part two of the revamp process at RingMD. Part one was about fixing the brand and building a strong visual design structure as a base to build product design on top of it. You can read all about part one here. While part one focusses more on the design decisions made in picking the right shapes, color palette, typography, and iconography, part two focusses on knowing and designing for your users, the technology, and its extensions and limitations.

We had a huge technical and design debt from the previous product builds, the challenge was to reshape and restructure the entire app both from design and information architecture point of view.


Process & ground work

A considerable amount of effort was spent on developing design personas, understanding the users, their journey, product system maps, the information architecture and its flow. Laying the ground work and a solid bedrock of strong user experience provides a perfect platform for user interface design. I’m not going into the details of each process here for obvious reasons, however, I’ll provide an overview of the structure, my strategy & approach in taking on this giant.  

1. Research
(Who are the users? What is the product? What are the goals?)

2. Creation of personas, maps, module splits & wireframes
(Product system map, user journey map, module splitting, and wireframes)

3. Creation of early low-fidelity designs, presentation & discussion with the team
(Communication is the key. Keep everyone on the page and in the loop, to prevent big surprises)

4. Sprint Planning, Kanban, JIRA boards & product specification documents
(Define team tasks and bind everyone together to the build goals) 

Design process & presentation to the team

"Design is not just what it looks like and feels like. Design is how it works” - Steve Jobs.  

There is a lot of insight, instinct, science, and commitment that goes into designing and building something that is relevant, beautifully simple and works in solving a problem for the users. Affordances and signifiers that need to be clearly defined to obey the user experience rules laid out earlier, navigation of the product on various platforms, web, iOS, and Android.

Designing the vector art,  iconography, typography and making up the design language comprising of various little elements to make up the layout. This is the part where you create immense value for the product through creative problem-solving. This is the part where you asses what real challenges are, prioritize them, produce solutions and deliver a delightful product.


Delivery & handover for implementation

Working with the team to define the goals clearly early on helps in cutting down the ambiguity and to understand the dependencies of each team member. One of the most important work is to focus on building a broader understanding of the product, what it does and why it matters. I evangelize and encourage a wide range of Q&As both from design and development teams.

Communicate. Communicate. Communicate. Documenting my design clearly to communicate with the development team is the key part of my product building process. Design documentation is an artifact, which squeezes down complexity and distils design into a structured, presentable, and easily understandable language for the engineering team. Here are some samples of my documentation to help you understand the level of details captured and communicated to the development team for the implementation.  

One thing you have to remember as a product and design owner - Design and development process is never done.


Website product re-design (2017)

And true to the words - Design and development process is never done. We have started working on the next transformation cycle of product design. 

Here's a quick view of the product design video.

Here's a quick under the hood view under the for the above video. Prototype connection grid.