Branding an E-Commerce Experience
Timeline: 2 weeks
Responsibilities: Brand Identity, UX, UI
Deliverables: Career Foundry project to create brand guidelines for the design of an e-commerce website (mobile & desktop).
Overview
The goal of this project was to develop a distinct visual identity to support a dynamic e-commerce experience. The target audience was that of the ‘browser’ persona, as described by the Niels Norman Group. These customers “choose to spend time on your site, with your company, with your brand. They are using your site as entertainment and inspiration”. I wrote up brand guidelines to create a cohesive visual identity. These guidelines acted as a north star for the design of the product experience.
Branding an E-Commerce Experience
Timeline: 2 weeks
Responsibilities: Brand Identity, UX, UI
Deliverables: Career Foundry project to create brand guidelines for the design of an e-commerce website (mobile & desktop).
Overview
The goal of this project was to develop a distinct visual identity to support a dynamic e-commerce experience. The target audience was that of the ‘browser’ persona, as described by the Niels Norman Group. These customers “choose to spend time on your site, with your company, with your brand. They are using your site as entertainment and inspiration”. I wrote up brand guidelines to create a cohesive visual identity. These guidelines acted as a north star for the design of the product experience.
Branding an E-Commerce Experience
Timeline: 2 weeks
Responsibilities: Brand Identity, UX, UI
Deliverables: Career Foundry project to create brand guidelines for the design of an e-commerce website (mobile & desktop).
Overview
The goal of this project was to develop a distinct visual identity to support a dynamic e-commerce experience. The target audience was that of the ‘browser’ persona, as described by the Niels Norman Group. These customers “choose to spend time on your site, with your company, with your brand. They are using your site as entertainment and inspiration”. I wrote up brand guidelines to create a cohesive visual identity. These guidelines acted as a north star for the design of the product experience.
Visual Identity
Aesthetic and minimalist design was an important heuristic in developing the brand identity. Website visitors can form first impressions in as few as 50 milliseconds, so the art direction and visual tone used throughout the experience are needed to convey where this brand sits in the market.
Using subtle, earthy tones coupled with a delicate visible grid structure and soft background, I looked to elevate the e-commerce experience into a leisurely activity that echoed the brand name Flâneur.
Thunder typeface, designed by Rajesh Rajput, was used for the logo. The accent circumflex can also act as a brand mark where necessary. I chose to use DM sans font and Material Sharp Icon set throughout the site for their sharp terminals to compliment the logo and grid structure distinctive to the brand.
Visual Identity
Aesthetic and minimalist design was an important heuristic in developing the brand identity. Website visitors can form first impressions in as few as 50 milliseconds, so the art direction and visual tone used throughout the experience are needed to convey where this brand sits in the market.
Using subtle, earthy tones coupled with a delicate visible grid structure and soft background, I looked to elevate the e-commerce experience into a leisurely activity that echoed the brand name Flâneur.
Thunder typeface, designed by Rajesh Rajput, was used for the logo. The accent circumflex can also act as a brand mark where necessary. I chose to use DM sans font and Material Sharp Icon set throughout the site for their sharp terminals to compliment the logo and grid structure distinctive to the brand.
Visual Identity
Aesthetic and minimalist design was an important heuristic in developing the brand identity. Website visitors can form first impressions in as few as 50 milliseconds, so the art direction and visual tone used throughout the experience are needed to convey where this brand sits in the market.
Using subtle, earthy tones coupled with a delicate visible grid structure and soft background, I looked to elevate the e-commerce experience into a leisurely activity that echoed the brand name Flâneur.
Thunder typeface, designed by Rajesh Rajput, was used for the logo. The accent circumflex can also act as a brand mark where necessary. I chose to use DM sans font and Material Sharp Icon set throughout the site for their sharp terminals to compliment the logo and grid structure distinctive to the brand.
Browsing and Navigation
UI components were designed with ample whitespace and subtle colour combinations to build a cohesive digital experience that ensures functionality and visibility of system status. I continued to employ an angular aesthetic to all UI elements, such as buttons and text fields.
All flows and interactions are designed to provide a smooth, seamless user experience. A fixed search bar ensures that search is available for customers to find products according to their mental models. An advanced search component allows easy navigation through categories, application of filters, and sorting of products.
Cross-selling is employed throughout the browsing experience, inviting users to explore related items and suggested products to guide their navigation. Suggested products help users navigate the site, leading to new categories and products.
Browsing and Navigation
UI components were designed with ample whitespace and subtle colour combinations to build a cohesive digital experience that ensures functionality and visibility of system status. I continued to employ an angular aesthetic to all UI elements, such as buttons and text fields.
All flows and interactions are designed to provide a smooth, seamless user experience. A fixed search bar ensures that search is available for customers to find products according to their mental models. An advanced search component allows easy navigation through categories, application of filters, and sorting of products.
Cross-selling is employed throughout the browsing experience, inviting users to explore related items and suggested products to guide their navigation. Suggested products help users navigate the site, leading to new categories and products.
Browsing and Navigation
UI components were designed with ample whitespace and subtle colour combinations to build a cohesive digital experience that ensures functionality and visibility of system status. I continued to employ an angular aesthetic to all UI elements, such as buttons and text fields.
All flows and interactions are designed to provide a smooth, seamless user experience. A fixed search bar ensures that search is available for customers to find products according to their mental models. An advanced search component allows easy navigation through categories, application of filters, and sorting of products.
Cross-selling is employed throughout the browsing experience, inviting users to explore related items and suggested products to guide their navigation. Suggested products help users navigate the site, leading to new categories and products.
Preference Tests
Preference testing revealed that users felt their browsing experience was superior when landing directly into the flow of products with the advanced search and filtering options fixed to the top of their screens.
Another alteration made following these tests was to remove the add-to-cart icon and increase the font size of the price. The icon was dispensable as these low-frequency purchase items often require more consideration before they are bought. This decision also felt more appropriate for the browser archetype.
Preference Tests
Preference testing revealed that users felt their browsing experience was superior when landing directly into the flow of products with the advanced search and filtering options fixed to the top of their screens.
Another alteration made following these tests was to remove the add-to-cart icon and increase the font size of the price. The icon was dispensable as these low-frequency purchase items often require more consideration before they are bought. This decision also felt more appropriate for the browser archetype.
Preference Tests
Preference testing revealed that users felt their browsing experience was superior when landing directly into the flow of products with the advanced search and filtering options fixed to the top of their screens.
Another alteration made following these tests was to remove the add-to-cart icon and increase the font size of the price. The icon was dispensable as these low-frequency purchase items often require more consideration before they are bought. This decision also felt more appropriate for the browser archetype.
Checkout Flow
According to the Baymard Institute, 21% of customers will abandon their cart due to long or complicated checkout processes. By using breadcrumbs in the checkout flow, the user understands where they are in the process, reassuring them that it will not take long to complete the purchase.
Throughout the process the customer has the option to open a dropdown displaying their order summary. This helps to engender trust and keep the user at ease before they finalise their payment, knowing that they’re certain of what they are ordering.
Users are also informed that all transactions are secure and encrypted and are presented with recognizable payment option logos to put them at ease.
Checkout Flow
According to the Baymard Institute, 21% of customers will abandon their cart due to long or complicated checkout processes. By using breadcrumbs in the checkout flow, the user understands where they are in the process, reassuring them that it will not take long to complete the purchase.
Throughout the process the customer has the option to open a dropdown displaying their order summary. This helps to engender trust and keep the user at ease before they finalise their payment, knowing that they’re certain of what they are ordering.
Users are also informed that all transactions are secure and encrypted and are presented with recognizable payment option logos to put them at ease.
Checkout Flow
According to the Baymard Institute, 21% of customers will abandon their cart due to long or complicated checkout processes. By using breadcrumbs in the checkout flow, the user understands where they are in the process, reassuring them that it will not take long to complete the purchase.
Throughout the process the customer has the option to open a dropdown displaying their order summary. This helps to engender trust and keep the user at ease before they finalise their payment, knowing that they’re certain of what they are ordering.
Users are also informed that all transactions are secure and encrypted and are presented with recognizable payment option logos to put them at ease.
Mobile Menu Navigation
Referring to NN Group studies, I designed the mobile menu to support their findings. These included ensuring both label and icon were tappable with the same function and opting for a right-aligned caret icon - the icon shown to provide the user with the most expected outcome.
I also explored the Baymard Institutes findings on mobile navigation that found by displaying product categories as top-level navigation items we avoid the unnecessary friction that can occur hiding items beneath a ‘shop’ item.
When running usability tests on the wireframe flows, several participants indicated that the accordion menu items would benefit from increased visual hierarchy. In the final design, I used a smaller font size and a list indentation to indicate that list items belonged to the selected product category.
Mobile Menu Navigation
Referring to NN Group studies, I designed the mobile menu to support their findings. These included ensuring both label and icon were tappable with the same function and opting for a right-aligned caret icon - the icon shown to provide the user with the most expected outcome.
I also explored the Baymard Institutes findings on mobile navigation that found by displaying product categories as top-level navigation items we avoid the unnecessary friction that can occur hiding items beneath a ‘shop’ item.
When running usability tests on the wireframe flows, several participants indicated that the accordion menu items would benefit from increased visual hierarchy. In the final design, I used a smaller font size and a list indentation to indicate that list items belonged to the selected product category.
Mobile Menu Navigation
Referring to NN Group studies, I designed the mobile menu to support their findings. These included ensuring both label and icon were tappable with the same function and opting for a right-aligned caret icon - the icon shown to provide the user with the most expected outcome.
I also explored the Baymard Institutes findings on mobile navigation that found by displaying product categories as top-level navigation items we avoid the unnecessary friction that can occur hiding items beneath a ‘shop’ item.
When running usability tests on the wireframe flows, several participants indicated that the accordion menu items would benefit from increased visual hierarchy. In the final design, I used a smaller font size and a list indentation to indicate that list items belonged to the selected product category.
