MyNutri - App & Responsive website
MyNutri is a digital platform, app and website for a nutritional coaching service for people who are new to technology. The platform must be super simple and that it uses the device’s resources to a minimum and a dependence on moderate internet connectivity. Aimed at users looking for a coaching service for nutritional education on current issues and in collaboration with expert teachers in this field.
Date:
July 2021 to August 2021
Services:
Conducting interviews, benchmarking and competitive audits, design Personas, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Client:
Google Career Certificates
Project overview
The problem:
In about 95 percent of emerging markets, people rely almost entirely on expensive prepaid mobile data, and many can only afford 250MB of data per month. This variable alone has a huge impact on user behavior. Devices that connect to the Internet, but do not have all the capabilities of a smartphone) are still popular in various parts of the world. Depending on a person’s location, the network can change from WiFi to 3G to 2G or have no connectivity, and the product has to adapt to that.
The goal:
Design a nutrition coaching service for people who are new to technology.
My role:
UX designer leading the app and responsive website design from conception to delivery.
Understanding the user
I conducted interviews and created empathy maps to understand the users I am designing for and their needs. A primary user group identified through the research were vegans, getarians, and youth seeking quality nutrition. This group of users confirmed the initial assumptions of online self-learners in search of quality nutrition.
The research also found that most use the download of videos on their device only when connecting Wifi in public networks and that they seek advice from nutrition teachers specialized in sustainable food, vegetables, without harming animals and focused on exercise and strengthening their systems. immune system for the benefit of your health.
Persona Jean
Persona Alejandro
Competitive audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the nutritional coaching digital platform.
Ideation
I did a quick ideation exercise to come up with ideas for how address gaps identified in the competitive audit. My focus was specifically on a quick access to the programs and the specific video program that the user is taking and to the variety of available coaches.
Starting the design
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Nutritional coaching service app. These designs focused on a quick access to the programs and the specific video program that the user is taking, to the variety of categories available and professional coaches to choose from.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected if checkout process, so the prototype could be used in a usability study.
See the low-hi prototype in the following link: low-fidelity prototype
Usability study: parameters
Study type:
Unmoderated usability study.
Location:
CDMX, remote.
Participants:
9 participants.
Length:
30-60 minutes.
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Refining the design
Mockups
After several iterations, we changed the position of the navigation menu and its elements, made the progress bar more apparent, and decided to use SVG images to optimize loading.
We changed the copy to identify where to contact the coach, we reduced the text and made the CTA button to contact him evident.
High-fidelity prototype
The final hi-fi prototype featured cleaner user flows for accessing the ongoing program. It also met the needs of the user to contact the coach and request feedback, in addition to identifying the different programs from the available categories.
See the high-hi prototype in the following link: high-fidelity prototype
Accessibility considerations
- Color palette with WCAG 2.0 level AAA standards.
- We include in the hamburger menu a choice of language selection in a great variety for different countries.
- Provided access to users who are vision impaired through adding alt text to images for screen readers.
Responsive Design
Sitemap AI
With the app designs completed, I started work on design the responsive website. I used the MyNutri sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Going forward
Impact:
The platform allows you to access very complete nutrition and coaching programs that are super easy to use, in different languages and from different countries. It optimizes the resources of the devices and allows a use without the main need to use the internet.
It allows users accessibility not provided by the competition.
What I learned:
While designing the user journey to find programs and follow a specific program, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the platform designs.
Next steps
- Validate the adjustments in the prototype in a new usability study with 5 new participants. Coordinate recruitment with the specialized agency.
- Provide the prototype of the buying process to the visual design and development team to include them in the next sprints.
- Conduct more user research to determine any new areas of need.