The Project
The Project
Embedded Files
Sunny Lane is a conceptual online store for sunglasses and eyewear created based on my explorations in the e-commerce space.
The store has a pair of eyeglasses for any personality and budget. Buyers can easily sort through different prices, colors and frames and finish off their purchase without hassle.
Duration: 8weeks
Tools: Figma
Industry : E-commerce
Role: UI/UX Designer
Goals
Goals
Defining goals
After completing an audit of existing ecommerce stores in and out of the eye-wear space, I was able to identify patterns and come up with key features that will improve the experience of the store.
Site map
Site map
Product family tree
The website structure follows the top to bottom hierarchical model found in e-commerce stores online. This organization help users understand where they are in the product and locate the information they want to access.
Wireframes
Wireframes
Style guide
Style guide
Logo
Sunny lane logo is a combination of round glasses and a word mark.
Round glasses have a strikingly simple profile that feels futuristic and nostalgic which matches the vibe of the brand.
Colors
The theme for the website is minimalistic with subtle tones to avoid taking away focus from the imagery.
Hints of peach and orange can be found around the design to help break away from the neutral colours and keep things interesting.
Typography
Work sans font is a sans serif typeface that has a modern and elegant style.
The font family has 18 types in five weights and all members are simplified and optimized for different screen resolutions.
Components
The design features various UI elements to build a cohesive product image.
Each component was carefully created to provide users with a unique experience .
Screens
Screens
Landing Page
The landing page displays products from the brand with primary and secondary call to actions.
Prioritizing easy navigation, users have quick access to the catalogue and other categories from the navigation bar.
Catalogue
The main catalogue is designed to help users efficiently find the products they want to purchase. From the top users can easily browse through curated collections.
The filters and sort button are also available to help users narrow down on their search quickly and easily.
Product
This page highlights the product alongside any useful information about the product.
Users are encouraged to share the products out of the website to other platforms.
Reviews and questions from other buyers can also be found below the product information.
Checkout
Checkout is a simple three step process from Information where buyers are required to fill in their contact details to Shipping for delivery and shipping details to the final step Payment.
Final Design
Final Design
Takeaways
Working on this project I got to understand the importance of Components. Components and variants are extremely powerful tools in a designers arsenal.
I used them to manage changes, build prototypes and maintain consistency across the design which would have been challenging without the genius behind components.
Prototype
Prototype
The video below explains how a user will navigate the Sunny Lane website. Click here to interact with the prototype.
Page updated
Google Sites
Report abuse