douceur - hero image

UIUX Design -
E-commerce App, Douceur Homeware



Project Brief


This project is designing a user-friendly, visually appealing e-commerce mobile app (UI/UX design) for the French-based designer home decor brand, Douceur Homeware, which is a expanding project of my previous web design creation.

Design Process



Branding

To begin, good branding and storytelling are the keys to a successful business. Therefore, for the first stage, I completed the branding and craft a story for the brand to humanize it, also defining its style and values. With the assistance of AI tools, I was able to refine my brand story and vision and create a moodboard to establish the style and aesthetic of the brand.


douceur - branding douceur - moodboard

User Research

knowing the user of your design along with their characteristics and needs is of utmost importance. By creating user personas and an empathy map, I can further narrow down my main target audience and discover their frustrations and needs so that I can provide solutions to help solve their problems. At this stage, I already have a rough idea in my mind.


douceur - empathy map douceur - user persona

User flow diagram

the app structure and create a user flow diagram is created. I drafted a basic e-commerce flow from login — home — categories — product listing — product details — checkout & payment.


douceur - user flow

Low-fidelity wireframe

After completing the research and documentation process, I began working on the low to mid-fidelity wireframes to visualize my ideas and design, defining the basic user flow, layout, components, and interactions. I opted for five major pages given the limited timeline — Login, Home, Search, Listing Page, and Details Page.



High-fidelity Wireframes

refined the wireframes further by adding images and colors according to the style guide I had created earlier. Additionally, I integrated filter and sort features to enhance user interaction. Furthermore, I initiated work on the interactions to make a clickable prototype for testing later on.


douceur - high fidelity wireframe

Usability Test

Usability testing is critical to ensuring that the final product aligns with the needs and preferences of users, catching any blind spots I might have missed. I invited three participants, who are my target audience, to conduct the usability test on my prototypes in person. After the usability test, I received constructive feedback and comments on my prototypes.



Refinement and Final Clickable Prototype

Refined the design based on usability test results and completed the project with a final clickable prototype ready for implementation


douceur - final work 1 douceur - final work 2