I had a chance to work on Lazada’s website header. It’s a small project but the challenge was finding a solution that work across the whole website – From the Home Page, Product Page, My Account, Cart, and Checkout. So, we decided to conduct a workshop with designers and PMs working on those projects. The workshop’s goals were to reprioritize header elements and use knowledge from in-progress projects to optimize better design solutions.
We started by planning, preparing, running the workshop, and designing. The workshop went through 3 activities:
- Benchmarking on competitor designs: aimed to identify header design trends in 2017.
- Element exploration on our current header: aimed to prioritize elements that have the most impact on the user.
- Wireframing: aimed to have draft wireframe solutions for desktop header based on the defined trends and the most impacted elements. Below are the details of our workshop activities and outcomes.
We looked at 36 e-commerce desktop headers and voted for the sites – Blue-dots to vote for the 3 sites we like the most and Yellow-dots to vote for the 3 sites we dislike. We then discussed the reasons behind the likes and dislikes of our competitors.
Most liked designs:
- Style: Minimalism design was defined as the most user-friendly trend.
- Typographic hierarchy: The font and color of headlines, sub-headers, links, and CTAs were well-structured and consistent.
- Space: Use the right amount of white space between the elements to make them all noticeable to the eyes.
- Elements: simple and functional, easy to notice, and perform a task without too much reading. User-profile-icon was in favor of registering & login as well as user accounts. Heart-icon was in favor of the wishlist.
- Promo banners: hero-banners were used to catch attention in the first seconds of interaction with a website. Mini pop-ups on top of headers were wisely used as reminders on an even/add-on service. Those mini pop-ups were designed very simply with a solid background, 1 line of a message, an inline link, and a close banner function.
- Dimensions: full width and 100-140px height headers were standard for most e-commerce.
Disliked designs:
- Style: Overuse of brand’s colors for headers, headings, links, CTAs, and banners. No proportions and composition use of white space.
- Elements were displayed randomly, had to do lots of reading to navigate through the site, non-functional decorative elements were used on headers together with main call-to-action-icons
- No typographic hierarchy: links and labels were similar.
- Promo Banners: banners that used heavy background images and different font styles for heading. Animated banners had fast movements and overtook the visibility of the header.
- Dimensions: large, fixed headers over 150px height.
We discussed the elements that have the most impact on the current header like authentication states, handling of lists, notifications, and promotions. We ran a quick survey ranking questions on these elements – with #1 being the most important element to #3 being the least important.
Elements ranking:
- Most Important: Brand, Category Navigation, Search, Cart, Login/Signup, My Account, Wishlist
- Important: Customer support, My orders, Selling on Lazada, Liveup, Country / Language
- Least Important: Follow brands/stores, Channel selection, Official stores, My reviews, Promo
We drafted wireframe solutions for desktop headers based on the defined trends and the most impactful elements. We got 2 design solutions for the header. Option 1, users will navigate through the website via campaigns and promotions. Option 2, users will navigate via categories navigation.
