DOMO Mommie — readysetsolids.com

Ecommerce + Blog Website Design with Style Guide
browser thumbnail
Role

UI/UX Designer
Graphic Designer

Duration

15 Hours

Tools

Figma
FigJam
Wix
Adobe Suite
Procreate

WEBSITE

Introduction

This project was commissioned by a fellow peer and friend to collaborate and build the client (his wife) a blogsite with an ecommerce section to monetize her recipes. Prior to this project, she was sharing her content on Instagram and is now looking to create a website for her followers to expand her reach. The target audience for this website is for mandarin speaking users to gain tips and guidelines for baby feeding and food recipes.

domo logo

Goals + Process

The goal of this project was to create a website that catered to new mothers in both an informative manner while giving users a warm and welcoming experience. Multiple meetings with both the client and the developer throughout the design process to ensure that all parties were moving forward on the same page. Project deliverables consist of a style guide, including brand logos and graphic assets, as well as low to mid fidelity wireframes for main landing pages.

1

Research

2

Ideate

3

Prototype

4

Develop

1 — Research

Competitive Analysis

I started off my research by investigating some examples of websites that the client provided as well as some I found myself that aligned with the the kind of experience the client wanted to express.

tiffycooks.com
tiffycooks
downshiftology.com
downshiftology
doobydobap.com
doobydobap
zhangcatherine.com
catherine desserts
Key Takeaways

The goal of this project was to create a website that catered to new mothers in both an informative manner while giving users a warm and welcoming experience. Multiple meetings with both the client and the developer throughout the design process to ensure that all parties were moving forward on the same page. Project deliverables consist of a style guide, including brand logos and graphic assets, as well as low to mid fidelity wireframes for main landing pages.

Concept Map

concept map

2 — Ideate

Style Guide
style guide

Color Sheet

color sheet

3 — Prototype

Mid Fidelity Wireframes
homepage
homepage
blog
blog
products
products
contact
contact
Notes

+ I decided to go with a hero for the home landing page so that users are not overwhelmed with product information or advertisements upon visiting the site.

+ keeping the navigation simple with concise directories

+ took some inspiration from doobydobap.com with the layout on the blog section, similar to a story book format

+ went with a uniformly laid out product page to create a sense of connectedness

4 — Develop

midfi
Key Takeaways and Lessons:

This was the first project I’ve designed with a client from start to finish. Through this experience I learned how to communicate with developers as well as clients throughout the design process to ensure a smooth workflow. A key takeaway from this process was understanding how to convey ideas and concepts to contributors across other industries in digestible terms. It was also essential as a designer to check in regularly and ask the right questions in order to get the good feedback from the client.

WEBSITE