DADA Parenting Coach UX/UI Design
About the Project
Project Name: DADA Parenting Coach
Project Lead: Tatiana Rubleva
Project Duration: 2 weeks in November 2020
Project Description: I joined this already ongoing project in a late stage with the main task of finishing the UI Design for a mobile-first web app that assists dads with parenting advice.
The concept is focused on fathers who sometimes struggle when it comes to parenting or who just want useful tips for activities and problem solutions. Most parenting advice platforms are often exclusively or heavily focused on the mothers and therefore this app is a promising concept.
I was a part of an international team of designers and engineers spanning the US and the UK. The app is now in a beta stage with further development to come.
Role in the Project: My main focus was to refine the existing UI designs for all mobile screens and the creation of all breakpoint screens from scratch, including tablet portrait & landscape and desktop. Aside from that I also assisted in creating a landing page for all breakpoints, general UX improvements and harmonizing already existing UI elements across all screens.
Project Outcome: COMING SOON
My tasks in this project were the following:
- Create breakpoint screens for tablet & desktop
- Harmonize & partly rework exisiting mobile screens
- Assist with UX improvements
- Create a landing page
The project was engaged with the help of the following tools:
- Figma (Complete Design)
- Zoom & Google Meet (Collaboration)
- Slack (Collaboration)
I was recruited for the project to flesh out the tablet and desktop UI of the parenting app ahead of the development handoff. When this happened the overall project was already in a delivery phase. From the point where I dropped in, I started my own phases according to the Double Diamond.
In the initial meeting and project onboarding I was asked to review the current state of the project in terms of both UX & UI. In the process I found points on how to improve the overall usability of the app such as a button in the Book Smarts section that allows users to read the next chapter without having to go back to the overview screen and select the next chapter there.
Implementation of a Grid
Up until that point no grid was used by the designers. However for the addition of breakpoints for three different screen types, a grid would save a lot of time and would guarantee a more consistent outcome when used. Therefore I implemented a 12 column 8px grid and adjusted all mobile screens accordingly. This already led to an overall more consistent design across all screens.
Incorporating Material Design
When looking at the screens I noticed that they looked very much as if the Material Design Guidelines were included into the design. After inquiring I found out that no one had specifically implemented these guidelines but a resemblance was unmistakable.
However I also noticed that some specifications of the Material Design Guidelines were not present such as the concept of elevation. After consulting with the project lead, I started to implement elevation in accordance to the Material Design Guidelines across all screens to ensure consistency and a better representation of the guidelines in the app.
Designing the Breakpoints
After adjusting and reviewing the screens for the mobile version of the app, I began designing the tablet screens from scratch. Based on the established grid many screens were naturally resized and adjusted for the bigger devices.
Some screens needed a few enhancements to work well on bigger screens. One example is the book insights screens of the Book Smarts section. Users can read short summaries of various parenting books chapter by chapter there. While most texts in the app are rather short and fit a bulletpoint, this section comes with a heavier text load of several paragraphs. To make it more comfortable for the user to read these longer passages, the text size was enlarged unproportionally in comparison to other parts of the app.
In general both the portrait and landscape orientation feature a heavy resemblance to the mobile screens to provide the user with a consistent experience across mobile devices with very few screens as an exception.
Designing the desktop experience for DADA came with the need for more adjustements as the patterns for web and desktop vary from mobile patterns and it was the goal to provide users with a natural and comfortable experience across all devices.
The sign up screen received a new layout more similar to known sign up and login experiences on desktop rather than just resizing the existing screens from the tablet breakpoint.
Another change was the permanent display of the menu in addition to the navigation bar, which is now placed at the top of the screen rather than at the bottom. The drawer style menu is hidden behind the three dots icon on all mobile devices and blends partly over the active screen when drawn out. On desktop the menu is always visible on all screens except for the sign up flow and gives access to more personalized functions of the app. It is positioned on the left side rather than on the right side as it is with mobile devices – again for reasons of similarity to other known desktop experiences.
Even though there are a number of structural differences between the desktop and mobile experience, the overall design and functionality is kept as close as possible to deliver a consistent experience.
Designing a Landing Page
The last task was to design a landing page for all breakpoints explaining the app in short and calling users to try the app. The landing page was created in close collaboration with Tatiana Rubleva.