NewMe App and Responsive site
The Product Introduction
NewMe (fictitious) is a tool to help new parents to learn about the Pregnancy period and the baby’s health, care, and development-related issues. The target users are new parents who do not have any prior experience and knowledge.
The Problem
Most of the new parents do not have any knowledge regarding pregnancy and the baby’s health, care, and development. So they try to seek advice from their friends and family which is sometimes quite overwhelming for them.
The Goal
​Design an app that will help them to gather knowledge from experts so that they do not remain confused and concerned.
My Role And Responsibilities
-
Conducting research
-
Interviews
-
Making paper and digital wireframes
-
Low and high fidelity prototypes
-
Conducting usability studies
-
Iteration on the design
-
Making information architecture and
-
Responsive web design.
User Research: summary
I conducted semi-structured surveys and develop interview questions thinking about their past and present experience as new parents and conducting user interviews. Most of them have the same feelings and experience and they share a common concern about pregnancy and baby development. They try to search for different topics on the internet but all make them overwhelmed.
The feedback that I received from research is that they need a tool that helps them to gain proper, authentic knowledge from the experts.
Design Process
Empathy Map
An Empathy Map is just one tool that can help to empathize and synthesize the observations from the research phase and draw out unexpected insights about users’ needs.
Persona
A persona is a fictional character created to represent a user type that might use a site, brand, or product in a similar way.
Problem statement:
Sana is a new parent who needs an easy and reliable experience with an app because she wants to take great care of her baby.
User Journey Map
Information Architecture
Information architecture (IA) focuses on organizing information, structuring Web sites and mobile apps, and helping users navigate them to find and process the information they need. The sitemap helped me to build the organizational structure of the website which ensures a smooth and better experience across devices.
Paper Wireframes
A Paper wireframe is a sketch or drawing which is the representation of the skeleton of a website or an app interface. Before I work digitally I created paper wireframes for the app interface and website.
Digital Wireframe
After ideation, sketching wireframes on paper, I created digital wireframes of the NewMe app. The app mainly focuses on providing expert advice and guideline to the users to help them to understand their responsibility as a parent toward their children.
Low Fidelity Prototype
Low-fidelity prototyping is a quick, simple way of evolving an initial idea or concept into a somewhat more tangible representation of what the final product might look like. I created a low fidelity prototype for the app and website so that I can conduct usability studies and get some feedback on my product.
High Fidelity Wireframe
Style Guide
High Fidelity Prototype
I converted my low fidelity prototype to the high fidelity prototype after conducting usability studies which follow the same flow as the low fidelity prototype including some design changes made after usability studies.
Accessibility Consideration
1
2
Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the website and app.
​
​
​
​
​
​
​
High contrast color selection to increase readability.
A clear label that can be identified by a screen reader.
