Luxury Tea E-Commerce Site
Modern and sleek e-commerce brand
Tools: Figma - Click here to try the prototype!
Brief: Build an online e-commerce website of your choice.
Research: Competitor websites, user persona, user journey map.
Persona: A young woman in her mid 20's. She enjoys trying new things while maintaining a healthy lifestyle. She has preference for clean and modern aesthetics.
Feature List: Clean and spacious layout, modern and straightforward navigation, easily accessible call to actions and navigation, thorough item details on listings
Deliverables: Hand-drawn wireframes, Low-fidelity design, High-fidelity prototype
Persona
Based on the user research conducted, I focused on:
-
Integrating social media into site
-
Including a SALES page in the navigation bar
-
Achieving a high-end and luxurious style through avoiding clutter with bright, modern, and ample spacing
-
Include recently browsed section / feature across several pages
-
Users can add products to a favorites list and access list on all pages
-
Have small but well designed pop-up for first-time browsers
-
Each product page must have several product photos
-
Product page has icons corresponding to product specifications quick-facts
-
Star rating at the top of each product page and expanded reviews view below product information
-
Checkout process is accessible on all pages via icon for bag / items in cart
-
Emphasize the client's voice, work, and personality to strengthen connection with user
-
Clear and concise forms for checkout
-
Checkout does not move to new pages, refreshes certain page components to proceed
-
Include various payment options for a variety of users
Mood Board
My goal was to create a soothing, sleek, and modern aesthetic for the website. This would include colors that are easy on the eyes, clean shapes, simple navigation and plentiful use of images. The target persona values health and luxury, so those were aspects I wanted to maximize in the design.
Wireframes
Done traditionally using ink and paper - these are the initial wireframes drawn. Having interactive features such as sliders, buttons / call to actions, ratings will help the depth of the site. Images are used often to help further the luxurious aesthetic with frequent call to actions on each page.
Low-Fidelity Prototype
Done in Figma. Additional pages were created to help build a more thorough prototype including multiple-step Checkout, Checkout Sidebar, Favorites Page, Returning User & New User Login Page, About, Sale, and Single Item Listing.
High-Fidelity Design
All pages were fully refined - all palette colors added, component and frame-based designs, complete with prototyping routes.
Reflections and Considerations
This project was a great learning experience in information hierarchy, spacious design, and refining navigation. User testing and usability reports would help determine pain points. A few things I would improve upon this project is ensuring the color contrasts are appropriate, expanding browsing options using filters, and adding more prototype functionality simulations.