Although it was a small project, the challenge was finding a solution that worked seamlessly across the entire site, from the Home Page to Product Pages, My Account, Cart, and Checkout.
We decided to hold a workshop with the designers and product managers involved in those projects. The goal was to rethink the order of the header elements and use feedback from ongoing work to improve the design.
Below are the steps for planning, preparing, running the workshop, and designing. The workshop included 3 main activities
Liked
Style: Minimalist design was considered the most user-friendly trend.
Space: Proper white space between elements made them easy to spot and gave the design a clean, visually appealing look.
Elements: Simple, functional, and easy to use. The user-profile icon for registration/login and the heart icon for the wishlist were preferred.
Promo Banners: Hero banners captured attention immediately, while mini pop-ups above the header served as simple reminders with a message, link, and close button.
Dimensions: Full-width headers with a height of 100-140px were the standard across most e-commerce sites.
Typographic Hierarchy: Clear and consistent use of fonts and colors for headlines, sub-headers, links, and CTAs, making the content easy to read and navigate.
Disliked
Style: Overuse of the brand’s colors in headers, headings, links, CTAs, and banners, without considering proper proportions or white space.
Elements: Poorly placed elements made navigation confusing, and decorative items were mixed with key action icons, making the header less effective.
Typographic Hierarchy: Links and labels lacked distinction, making it hard to differentiate between elements.
Promo Banners: Banners with busy background images and different font styles for headings were distracting.
Dimensions: Large, fixed headers over 150px in height, which felt bulky and took up too much screen space.
In this step, we focused on prioritizing the elements that have the biggest impact on the user. We discussed about the key elements that impact the current header, like login states, lists, notifications, and promotions.
Element Ranking Results
Critical: Brand, Category Navigation, Search, Cart, Login/Signup, My Account, Wishlist
Important: Customer support, My orders, Selling on Lazada, Liveup, Country / Language
Nice to have: Follow brands/stores, Channel selection, Official stores, My reviews, Promo
The goal was to create draft wireframes for the desktop header based on the key trends and most important elements we defined in Steps 1 and 2. We came up with two design options.
Option 1: This design focused on campaigns and promotions, with the header highlighting special offers, sales, and deals for easy access. It was designed to emphasize marketing messages and limited-time offers
Option 2: This design centered around category-based navigation, with the header clearly organizing product categories to help users quickly find what they’re looking for. It was designed to highlight our wide range of products and provide a more straightforward browsing experience.
After drafting the concept ideas on the whiteboard with the team, I began laying them out in Axure to make the designs clearer and more structured.
