Loading
Docquity Website | Mobile App

The most Trusted Community of doctors in Asia

Image
Brief

Docquity helps you with masterclasses, courses, webinars, publications and an extensive library of content from the region’s best healthcare professionals.

Discover

We facilitated remote discovery workshop with the stakeholders to gather and understand their challenges of parents using the existing app. Workshop helped us map and document the insights.
Some objectives we derived from the workshop insights were:

  • Parents were not able track the the skills that the child is learning through Miko.
  • Provide a seamless login experience for multiple users, such as parents and grandparents
  • To help parents set goals / tasks and instil habits in their children and gamify the whole experience.
  • Simplify navigation throughout the app .
DEFINE

After gaining a deeper understanding of the users and business requirements, we started by identifying the personas and mapping out the existing information architecture of the app. We identified the issues and restructured the information architecture keeping the personas in mind for ease of navigation throughout the app. After finalising the information architecture and user journeys with the stakeholders, we began creating the wireframes.

Mobile App UI

We created engaging and colorful UI screens for the Mosambee app, showcasing bars, graphs and other visuals which is easier and more impactful for the users.

Typeface

Aa
Lexend Deca Bold
Aa
Lexend Deca Medium
Aa
Manrope Bold
Aa
Manrope Semibold
Aa
Manrope Medium
Caption + Heading 1 + Paragraph
Community of Doctors

Community of Doctors

Exchange ideas with the best doctors in the region. Education designed and led by leaders you know and respect.Mastermind sessions with world-class speakers.

Button >
Aa

Colours

Here are the set of color styles based on the brand guidelines. When it comes to color, contrast is critical for ensuring text is legible. We've added WCAG 2.1 contrast ratios to our color system so you can make sure you're designing with accessibility in mind.

Primary

The primary colors are the "brand" color, and is used across all interactive elements such as buttons, links, inputs, etc. and other high priority components.

Colour Red

Hexcode #E2504B

Colour Black

Hexcode #1D1919

Colour White

Hexcode #FFFFFF

Usage of Primary Colours

The primary #Red are mainly used to highlight priority items, especially in icons and text. The #Black_Gradient is used for the main CTAs, while the #Black is used across all paragraphs

The most Trusted Community of doctors in Asia

Exchange ideas with the best doctors in the region. Education designed and led by leaders you know and respect.Mastermind sessions with world-class speakers.

Button arrow

Colour Red

Hexcode #E2504B

Colour Black

Hexcode #1D1919

Colour Black_Gradient

Hexcode #252424 #424242

Secondary

The secondary colors are used sparingly or as accents, while the primary color(s) should take precendence. They’re used to highlight and support the primary action.

Colour Blue

Hexcode #00B5D5

Colour Deep Green

Hexcode #1B4A52

Colour Error_Red

Hexcode #DC1313

Colour Warning_Yellow

Hexcode #E2B93B

Colour Info_Blue

Hexcode #2F80ED

Colour Success_Green

Hexcode #27AE60

Icons

vector

Here are few ways the icons have been used in different sizes, across the website.

icons preview desktop icons preview mobile

Web

Custom designed icons for use across website and all web products. The site uses these icons across 4 different sizes: 16px, 24px, 44px and 64px

Icon size guide

The icons are used only with the following colours. And they’re used in the ratio of 70:30 -> Deep Green:Red

Colour Deep Green

Hexcode #1B4A52

Colour Red

Hexcode #E2504B

Here’s the custom set of icons....

Custom icons web Custom icons mobile

Mobile App UI

vector

We created engaging and colorful UI screens for the Mosambee app, showcasing bars, graphs and other visuals which is easier and more impactful for the users.

Mobile App UI Screens

Website UI

vector

We created engaging and colorful UI screens for the Mosambee app, showcasing bars, graphs and other visuals which is easier and more impactful for the users.

Website UI Screens

Conclusion

What we acheived from this project?

•Seamlessly introduced payment process from TV to Mobile
•Elevated user experience through easy personalizationa and easy navigation
•Revamped the Login/Signup process to be more user friendly
•Improved playback experience by providing features which weren’t provided before
•Improved TV experience by following familiar mental models.
•Intuitive UI and simplified viewing experience
•Built a multi-experience for users – Viewers are consuming content on multiple devices
•Seamless delivery of content on multiple devices is no longer an option for OTT players, it is cmandatory.

What we learnt from this project?

•Indepth research and competitor analysis plays an important role in the output of the design.
•Learnt designing experiences for TV.
How to seamlessly build a multi-experience for users
•While the variety and quality of the content will be important to acquire new viewers, UI/UX will plays a decisive role in retaining them
•A simple and delightful user experience will always remain the most important factor that will define the success of any OTT platform.

Image