Intuitive & Engaging E-Commerce Platform Design.
Project Type
UX/UI
App Prototype
Date & Duration
June 25
2 Weeks
Team
3 UX/UI Designer
Tools
Figma & FigJam
Maze
Excalidraw
Project Brief
The goal of this project is to design an intuitive and engaging e-commerce platform that enables shoppers to effortlessly browse and search for products, access detailed product information, and make well-informed purchasing decisions.
Discovery
We brainstormed potential products for an imaginary e-commerce shop in FigJam and, after a vote, chose furniture.
Later, we narrowed it down to modular shelfs, as we wanted to focus the scope due to limited time and felt that “furniture” alone was too broad and unexciting.
We first created individual moodboards, then looked for common elements to define a shared visual language and derive design principles.
Design Principles
Minimal and Clean
Use spacious layouts, clear typography, and structured grids to create a calm and uncluttered user experience.
Neutral Aesthetic
Focus on neutral colors, balanced visuals, and a restrained style that lets the products stand out.
High-Quality Visuals
Prioritize clean, aesthetic product photography and a strong harmony between imagery and text.
Intuitive Navigation
Ensure users can easily explore the site through simple navigation.
Site Map
We defined the essential requirements for our website and translated them into a preliminary sitemap in FigJam. As part of this process, we analyzed the page structures of established furniture retailers offering customization options. Due to time constraints and limited user insights, we adopted a pragmatic approach to balance feasibility with functionality.
01
Homepage
-
Configurator
-
Inspiration
-
Swap Marketplace
-
Product Overview
02
Product Overview
-
Display of products with filters
-
Links to individual product pages
03
Product Page
-
Decision: buy as-is or customize
-
Image gallery
04
Configurator
-
Customize furniture (size/color)
-
Basic vs. extended options
-
Examples available or create from scratch
-
Purchase individual parts or add-ons
05
Swap Marketplace
-
Exchange / resale
-
User profiles
06
Cart
-
Product summary and checkout
-
Purchase decision (account or guest)
-
Assembly instructions
User Flow
We closely reviewed the sitemap and decided on a specific user flow: the user visits our website, customizes a shelf according to their preferences, and completes the purchase.
Highlighting the core feature of the app: the ability to configure furniture was essential to us. This flow was chosen to emphasize the interactive nature of the experience.
Style Guide
Before moving to high-fidelity wireframes, we created a basic style guide (typography, colors, iconography) and drafted initial sketches and low-fidelity wireframes in Excalidraw, based on the user flow. The work was split across the team, and design elements were set up as reusable styles in Figma.
Colors
Soft shades of gray and white with subtle blue-green tones create a clean, modern interface, while a muted accent color enhances the overall user experience.
Font
Work Sans (Neo-Grotesque): modern, friendly, and highly legible.
Icons
Lucide Icons: clear, minimalist, and offering a wide selection.
Logo & Visuals
During the process, we developed a brand name Ximaan, a blend of our first names to reflect the modular concept. We chose a stencil font to emphasize the system’s modularity and used AI to generate initial images for our high-fidelity frames. For the product photography, we aimed for a clean look with neutral tones.
Wireframing Process
By the end of the week, we had built a first clickable prototype of our flow and gained an initial feel for the app. Starting with low-fidelity frames in Excalidraw, we gradually evolved our designs into high-fidelity wireframes.
To work efficiently, we divided responsibilities within the team: Landing Page/Product Overview, the Configurator, and the Cart/Checkout process.
All work was done collaboratively in a shared Figma file, with constant exchange and feedback. Especially during prototyping, we were able to complement each other’s skills and learn from one another, for example, one team member specialized in AI image generation while another focused on animating the image gallery. Throughout the process, we consistently realized how crucial photography is for strong UI design.
Usability Testing & Research Questions
To test our first prototype and gather primary insights, we ran one unmoderated usability test with Maze and two moderated sessions via Google Meet. Having real potential users interact with the dummy helped us identify weaknesses early and validate our design decisions before moving to the next stage.
01
Do users navigate the structure and configurator intuitively?
02
Were there any points that felt confusing, unclear, or frustrating?
03
What motivated their decisions or clicks?
Test Results
After the usability tests, we distilled our findings into five key challenges. We quickly noticed recurring issues, which made it easier to define these challenges. At the same time, we found that overall navigation was well understood all users located the configurator and successfully customized a piece of furniture by size, color, and material during the sessions.
01
Buttons appeared inactive due to their grey color.
02
Search functionality was missing on the homepage.
03
Confusion in the configurator: the “Add Element” button was mistaken for “Add to cart.”
04
No visual cue to scroll: content on Landing Page ended directly at the screen edge.
05
Interactive elements should enlarge when clicked currently, they shrink, which feels unintuitive.
Improvements
Color adjustment CTA & Scrollhint
In the updated wireframe, the secondary CTA button (“Produktübersicht”) was changed from grey to a blue outline style. The previous grey version made the button look inactive or disabled, which could confuse users. By switching to a clear outlined button style, it now appears clickable and active, while still keeping a visual hierarchy to distinguish it from the primary CTA (“Jetzt Entwerfen”). We also added a visual cue at the bottom of the screen to indicate that the content is scrollable.
Label Clarification & Visual Differentiation
The first change focuses on improving the button label clarity. Originally, the button was simply labeled “Hinzufügen” (Add), which led to confusion with the action of adding items to the cart. To reduce ambiguity, the label has been revised to “Element hinzufügen” (Add element), making it clear that the action is for adding a new configurable element, not adding a product to the cart. This adjustment helps users distinguish between customization actions and purchase-related actions, enhancing overall interface understanding.
The second improvement emphasizes stronger visual differentiation of actions within the configurator. Selections, sliders, and the main call-to-action (CTA) are now visually distinct, making it easier for users to understand which UI elements are used for selection, which are interactive sliders, and which are primary actions like adding items to the cart. This clear separation strengthens usability and reduces cognitive load, supporting an intuitive, streamlined user journey.
Intuitive Color Selection
The color selection feature has been improved for clarity and better feedback. Now, when a color option is clicked, the button enlarges and is highlighted with a clear border, instead of shrinking. This change makes the selected color instantly noticeable and provides a more intuitive, engaging interaction.
Prototype
01
Effective teamwork
Knowledge sharing within the team accelerated progress and strengthened individual skills.
02
Strategic task allocation
Dividing responsibilities early saved time and ensured steady momentum.
03
Value of usability testing
Maze testing revealed real user behavior and highlighted areas for refinement.
04
Design insights
Neutral color palettes convey elegance, but call-to-action elements must remain visually prominent to avoid appearing inactive.
05
Tool proficiency
Deepened Figma expertise, including interactive prototyping and animation techniques.
Final Thoughts
Close collaboration was key: each team member contributed their expertise while sharing skills and techniques, which helped all of us grow professionally. Early task-splitting proved essential to stay on schedule working in parallel rather than attempting every step together kept the project moving forward.
Conducting usability tests provided critical, data-driven insights that directly shaped and improved our design. Without these primary findings, creating a user-centered experience would not have been possible.