PROJECT NAME
Happy Doudous eCommerce & Brand Identity Design
MY ROLE
UX & UI Design
Brand Identity Design
SOFTWARE & TOOLS
Figma
WordPress
WooCommerce
OVERVIEW
Happy Doudous is a stationery boutique brand that provides preschool methods and life skills for children. This project includes an eCommerce website and a Brand identity.
PROBLEM FRAMING
Happy Doudous were primarily focused on an eCommerce platform using WordPress builder. The client needed visual simplicity, flexibility for her content, and a website they could invest more time in scaling rather than fixing in the future.
APPROACH
The biggest issue for us to go into the project was scope so we needed to be resourceful with how we gonna focus on our time. We were happy to prioritize focusing on basic core eCommerce features that would meet the client's needs.
Style boards
The client and was also looking for style guidelines on a logo, and a font type. The exploring style guideline played an essential role in both web and print collaterals.
New visual language/Patterns
Hand-drawn illustrations seem to be the best approach to deliver a meaningful and clear message to the audience. Colored geometric shapes will assist and support these visuals to add more value to the brand identity.
- Content-driven visual Identity
- Feel-like-Home Vibe
- Simplicity and Intuition
- Adapted for children and family
Pattern
The pattern created comes from Montessori’s geometric sharps. Patterns that will play the decoration role to support Communication design (Social Marketing Design) and E-commerce website for Happy Doudous’ customers and users: To be organized with their shopping experience. We can associate these patterns to visual materials(product) for Happy Doudous.
Logo
Happy Doudous' logo is the initial point of identification. This is generally the first element that clients come into contact with and will ultimately align with the brand. The shape of the Happy Doudous logo refers to several aspects related to the brand. It originally presents doudous (dolls) / family / doodle. This is a reference to the brand name. Doudous is a reference to soft dolls to play with and happy feelings. It is also a symbol of family members. If we focus on the graphic form and hand-writing, we can see such elements as a doodle that children draw to play. The combination of these elements perfectly identifies the Happy Doudous brand.
Design System
Happy Doudous were seeking a kid's feel on the typeface. After multiple tries of changes, we landed on TOMO Fango - scissor cut feel, and childish and Montserrat - the simple and readable.
The Scheme
From the Landing page to complete your payment. In order to design the best eCommerce experience, creating a site map was useful to get a detailed view of the user flow and examine what happens during each step during their journey.
Grid & Layout
Wireframe
Before designing the UI, I created wireframes to test them on a few target users. In order to design the best eCommerce experience, creating a site map was useful to get a detailed view of the user flow and examine what happens during each step during their journey.
User Interface Design
Easy to access
This shop page designed to provide easy access to customers/users' needs to make a purchasing decision- from this shopping list and price to pay.
Accelerators
Happy Doudous provides flexibility and efficiency for users. Rather than looking at the detail of each product, the customers can quickly add items to the cart in the shopping list. And the cart on the navigation bar has the touch which is used to make the core actions of the cart category. See how the user can perform the core (check shopping list, remove selected items, view cart, checkout) by using the placement of the mouse on the web/ touch in mobile phone.
Order Tracking
Happy Doudous provides order tracking for users to easily download digital products and manage their order history. From the business perspective, it gives users to directly purchase their previous shopping list via simply clicking the button- Order again
Learning
Critical feedback from the early stage
Sometimes, clients often don’t know what they really need. Before developing a design in WordPress, showing the design in detail is essential to get important feedback during the workshop. This could also save budget because a designer can quickly change design elements from the early feedback of a client so easy to show our direction we’re going.
