A website for new moms to have access to information and support needed in their child's first years.

1. Parenting Guide Hub
Mercy Oluokun

2. The product:
The Parenting Guide Hub was designed for first
time parents to provide all the needed
information they need to care for their
child/children.
Project overview
Project duration:
July 2022 to June 2023

3. The problem:
Users have limited access to sufficient
information needed as a first time parent on a
single platform.
Project overview (Cont'd)
The goal:
To provide first time parents with all
the information they need to care for their
child/children via our App and website.

4. My role:
Generalist UX designer – Involved in the
design process from Conception to Delivery.
Project overview (Cont'd)
Responsibilities:
User research, Lo-fi and Hi-fi
Wireframing and prototyping, User Testing/
Usability testing and documentation,
Accessibility considerations, Iteration of Designs.

5. Understanding
the user
● User research
● Personas
● Problem statements
● User journey maps

6. User research: summary
I carried out my primary user research using surveys. The feedbacks gotten was used to create
user pain points and personas.
This research was carried out so that I can gain more insight to the problems first time parents and
guardians are facing regarding caring for their child/children.
Carrying out this research has helped me gain a clearer perspective to users' needs and the
desired solutions that will make this app one that meets each user's needs.

7. User research: pain points
Limited Access to
Parenting
Tips/Advice
Not all web platforms
offer all the needed
information that a new
parent needs.
Scattered
information on
several platforms
Information is scattered
on several platforms.
Causing users to visit
several websites in
search of parenting
guide/tips.
Lack of Accessibility
features
Most platforms do not
have access to the
speaker and voice
search feature. And this
makes Information
accessible to only users
who can or have the
time to read.
1 2 3

8. Persona 1: JEMIMA
Problemstatement:
Jemimais a busy working
mom, who needs the voice
search feature to access to
basic information needed to
care for her
toddlerbecause picking up
her phone to type
every search information is
hectic amidst her day's work.

9. Persona 2: CHRISTIANA
Problemstatement:
Christiana is
an aunt/guardian, who
needs access to
the basic information needed
to care for her nieces and
nephews because she lacks
access to all the information
she needs to care for them.

10. User journey map
Persona1: JEMIMA

11. User journey map
Persona1: CHRISTIANA

12. ● Sitemap
● Competitive Audit
● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usabilitystudies
Starting
the design

13. Sitemap – Responsive Website Design
[I created the
hierarchical sitemap to
enable users navigate
through the main user flow
of the website design.]

14. Competitive Audit
I conducted a competitive
audit on two (2) other
platforms that offer similar
services.
Click here to view the
spreadsheet.

15. Paper wireframes – Mobile App
[Paper wireframes
were then created
usingthe crazy eight
ideation method
and sketches of the
wireframes that
make up the main
user flow of the app]
Crazy Eight sketches

16. Paper wireframes – Responsive Website
Crazy Eight sketches

17. Paper wireframes – Mobile App Main User Flow Sketches

18. Lo-Fi: Screen size variations (Responsive Website)
Responsive
Mobile view
Responsive
Tablet view
Responsive
Desktop view

19. Digital wireframes
– Mobile App
Moving on to the low fidelity/
Digital wireframes gave my design
more context and structure that a
real user can interact with for my
first usability testing.
Placing the main
features of the app
on the navigation
bar will help foster
user accessibility to
these services.
Users can easily
search for
information they
need on the
parenting app
using keywords.

20. Low-fidelity prototype – Dedicated Mobile
AfterI created the low fidelity wireframes,
I connected each screento the
connecting screento create a user flow for
user's navigation while using the
mobile app.
The prototype will be tested with real users,
and the feedbacks gotten, implemented in
the High fidelity design.
Link to the prototype

21. Low-fidelity prototype – Responsive Web -
Mobile and Tablet View
Link to the tablet view prototype
Link to the Mobile view prototype

22. Usability study: parameters
Study type:
Unmoderated usability study
Location:
Zoom, remote
Participants:
2 participants
Length:
20-30 minutes

23. Usability study: Findings
Some users found it difficult
to locate the favorites screen
Inability to access Favorites Navigation Text Boxes
Some users found the sign up
process and access of birth
month group difficult.
A user kept on clicking on the text
box on the user profile to update it
and couldn’t proceed since she
couldn’t fill it
1 2 3
Please Click on this link for a full read on the Research themes, patterns and Insights.
The listed below are some of the findings derived from the usabilitytest carriedout.

24. ● Mockups
● High-fidelityprototype
● Accessibility
Refining
the design

25. Digital Wireframes
The feedbacks gotten from the usability test were implemented and low fidelity designs were iterated.
Before usability study After usability study
Sign Up prompt indicated on
home screen for new users
Favorites was added to the
navigation bar for ease of access

26. Digital Wireframes
The feedbacks gotten from the usability test were implemented and low fidelity designs were iterated.
Before usability study After usability study
The Image boxes were made clickable
to avoid confusion for users

27. Mockups: Mobile App
Suggestions
Screen
Groups
Screen
Home Screen
Information View
Screen

28. Mockups Responsive Web – Design Choice(s)
I ensured the top navigation bar
for the Desktop version as well as
the Tablet had the main functions
listed here. This is to ensure ease
of navigation for the users.
I also wanted a simple interface as much as
possible. Hence the use of white background
and the texts were in a shade of ash.

29. These frames were
created with the following
in mind: Ease of
navigation; Consistency in
design; my target group
needs based on my
research.
The goal is to ensure that
each user has the same
experience regardless of
the device type they use.
Hi-Fi wireframes - Responsive website screen size variation(s)
Responsive
Desktop
View
Responsive
Tablet View
Responsive
Mobile View

30. Use Case – Thought Process
Motivationand Goals - To be able to access the information they need to get through their
child/children's earlyyears.
What building the responsive website hopes to achieve - The website should provide them
ease of access to these information.

31. The feedbacks gotten from
the low-fidelity testingwere
translated intothe mock-
ups and the prototype was
tested with real users.
The link to the prototype
High-fidelity prototype – Dedicated Mobile App

32. Link to the prototype
High-fidelity prototype – Responsive Website Views
Link to the prototype Link to the prototype
Responsive Mobile View Responsive Tablet View Responsive Desktop View

33. Accessibility considerations
I ensured that consistency
in design is maintained
for each screen view.
I tested the colour contrast
I used in my design
using Web aim contrast
checker.
Icons used were labelled
to ensure ease of
understanding for not
only the current
generation users but
every user.
1 2 3

34. ● Takeaways
● Next steps
● Website redesign (Iteration 1)
● Components
● User testing
● Compilinguser test feedback
● Website Iteration 2
Going forward

35. Takeaways
What I learned:
There will always be a need to iterate on my designs to meet not
only users' needs but also the current changing industry standards.

36. Next steps
Re-iterate on my designs
(mock-up)
Re-Confirm that new
designs meets
accessibility standards.
Carry out user testing.
1 2 3

37. I redesignedthe desktop view based on
the WCAG test I carried out. As some of
the colours used in the previous
design failed to pass the accessibility
test. I also created more components in
this redesign. Using Behance as a
source for my design inspiration.
Prototype Link
Website redesign (Iteration 1)

38. Here you can see a previewof some
components I created and re-used
across the frames. This helped me
maintain consistency in my design.
Components

39. I tested the redesignedprototype,on
the 21stof May, 2023 with 4 first time
moms ages 27-30 years. 2 in Europe
and 2 in Nigeria.
Testwas carried out via
Zoom.FigJam was used for usability
test notes.
View full notes
User testing

40. Afterthe test, I sorted the feedback
gotten based on the designaspect
mentioned.That was done in orderto
help me further prioritize the iterations
to be done.
Compiling Feedback

41. I iteratedon my design to further
improve the user experience
based on the feedback I got from
the user test.
Prototype Link
Website view (Iteration 2)

42. Let’s connect!
Thank you for taking the time to go through my design work.
You can reach me via the following channels:
Email – mercyoluokundesign@gmail.com
Mobile Number - +31 633788599
Behance - https://www.behance.net/oluokunmercy
LinkedIn - https://www.linkedin.com/in/mercy-oluokun-amande-5420397b/
Website - https://www.mercyoluokun.com/