User Flows, Wires and Designs for Childcare App
I was responsible for...
- Existing App UX Analysis
- Competitor Review
- Sitter and Parent User Journey Maps for: onboarding, job acceptance and for each stage of a job
- Entire App Wireframes
- Low-fidelity Prototyping
- Entire App Designs
- High-fidelity Prototyping
I was asked to refresh the entire user experience for the mumaco app within one month. This included everything from user flows through to polished designs.
What’s a Rich Text element?
Sunheading
Another subheading
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
- This is an example bullet point text,
- Here
- And here
- Also this line as well.
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
And here is a really important quote that I'll want to highlight.
• • •
Project objectives...
Mumaco came to Adaptive Media, in need of a completely new app. They had only recently had their initial app developed by an offshore agency, and were unhappy with the user experience, designs and development of the app.
My objective was to review and highlight the UX issues of their existing app, along with reviewing market competitors, and create an app that could be compared to other leading apps in the marketplace, using the best design-thinking.
• • •
I was responsible for...
- Existing App UX Analysis
- Competitor Review
- Sitter and Parent User Journey Maps for: onboarding, job acceptance and for each stage of a job
- Entire App Wireframes
- Low-fidelity Prototyping
- Entire App Designs
- High-fidelity Prototyping
• • •
Project details...
Competitor Review
A review of their existing app as well as a competitor review were requested by the client
Before the review, I determined the goals of both of the app's stakeholders—Mumma Co and the users.
This allowed me to review the existing app with the goals in mind, seeing how well it achieved them, with the awareness of both the Parent and Sitter's motivations, concerns, wants and needs.
Next, I downloaded and tested the onboarding and booking experience of 2 direct competitors, and 4 international competitors of leading apps that offer babysitting booking services.
Recording the user's experience in competitor apps and including them in my review really assisted the client in understanding the level of UX that user's expect in today's leading apps.
Based on the analysis of the existing Muma Co app, and the direct and leading competitors, I determined important conclusions that would give the new Mumaco app experience a leading advantage.
User Flows
The ability to communicate the most optimal user experience to the client allowed them to visualise the journey of the user in a quick and digestible way.
The app was essentially two seperate apps, one for the Parents, another for the Sitters.
We optimised the experience by asking the parent for the required information at the start of the onboarding journey and gave them the option to complete their profile during onboarding, or skip, giving the parents direct access to the app, to view sitters straight away.
Sitters were required to complete a more complex onboarding, and weren't able to enter the app until their documentation had been validated. This was for the safety and security of the family profiles and information within the app.
Minimal changes were made to the journies, and it left the stakeholders with confidence before entering the wireframe stage.
It also prevented a lot of changes and time during the upcoming stages.
Wireframes
From the user flows, and the conclusions from the research report, I developed wireframes for the entire application.
Low-fi Prototype
This included a conversational-style onboarding experience for both the sitters and parents.
The client was able to interact with the low-fidelity prototype on their own mobile device, which gave them confidence in the project and the new user experience.
Using InVision, the client could quickly post notes throughout the screens where they required an adjustment.
Designs
Once the wireframes were approved by the client, it was a quick process to update fonts, colours and text styles. to the symbols within Sketch.
As I work with Sketch symbols, applying the design was a quick process.
• • •
Applications Used
Applications Used
Giphy Capture to capture UX Interactions & Experiences
Google Slides to present UX & Competitor Analysis
Sketch for UX explorations and solution
InVision for low-fi prototyping
InVision Inspect to handover the final solution to developers