HUAWEI e-comm & Events
UX Enhancements
Oct 2016 - Mar 2017 & Feb 2018 - June 2019
Outsourced via Cognizant, Bangalore
Discover-ability of Navigation and Homepage Link:
Initially an event page used to have a top navigation(fixed: Home/Product links/Login) and page navigation(floating: picture linked to respective id). The page navigation was placed between the second and third fold. The selected/hover states weren’t visible.
Merging the two and positioning it on top brought familiarity with the navigation for users on PC and mobile.
Event Cover/Top Fold Design:
The purpose of the Event page is to engage users with content. The top fold plays a major role in that. This key real estate shouldn't be eaten up by huge visuals. Rather, a glimpse of the entire page needs to appear within this. Considering the device’s average top fold, covers were designed such that they leave out some space for the main content. Key Selling Points were flaunted with internal page/section linking.
Page Design:
A mix of staged and progressive disclosure was employed in the design of event pages. We learnt that our users do not invest much time for event pages. They need to get the crux of our page within seconds. They don’t read each and every section; rather, they skim through the page. The introduction of key selling points above the average fold and internal linking held continuity in page reading. This also enabled the users to perform their task by reaching their pre-defined target much faster. Within a section, content was split into different chunks of information and visual hierarchy was assigned with size, color and weight.
Feedforward and Feedback in Component Design:
Components were designed to be intuitive even for first time users. To guide users throughout the user journey, signifiers were provided for actionable items, status of the system was displayed, error messages with help text to recover from errors and feedback after successful completion were shown.
Introduction of Login/Register Modal Dialog:
The old implantation used to redirect users to Login page whenever a login is required without informing. The Huawei ID Login Page is pretty straightforward in design but ‘Register’ is hard to find. To solve this, Modal Dialog has been introduced whenever a login is needed. This informs users and allows them to pick either of the options.
Elimination of Annoying Alerts and Dialogs:
The current honor store welcomes users with annoying confirmations with alerts and non-modal dialogs. The Cookie Policy Confirmation, Country Selector and Newsletter Subscription. The three of them occupy 32% real-estate on any honor store page opened on a laptop with 1366x768 resolution(most used), more than 50% of the screen on a mobile and on top of that they were non-dismissible. Turns out that, none of them were helping users/business due to their timing, positioning and way of presentation… design to be precise. Let’s look at them one by one.
Country Confirmation Dialog:
The Country Confirmation was designed for global URL such as hihonor.com where as the current website redirects to country specific URL like hihonor.com/in based on the location. Hardly any user changes country but everyone had to confirm.
Subscription Alert:
The purpose of subscription alert dialog is to get user’s approval and send web-push messages when site is not opened in the browser. But, asking for subscription confirmation at the first sight is too much to expect even from honor fans. The suggested timing of the alert was after the first successful login from a new user.
Ensuring Click-ability:
A clickable button should be perceived that it is clickable. Design should guide this through consistency in visual language. When using flat design style, buttons are to be elevated visually.
Opening links in the same tab:
We are often under the impression that opening in new tab allows users to stay on our site much longer and it helps them. A bit of research and observation proved us wrong. Psychology argues that “No brain can think two distinct thoughts, absolutely simultaneously”. In our observations, we found that the user’s browser was filled with duplication of our site, and lead to frustration.
SEO and Load Time Optimization:
Reducing the usage of pictures by replacing them with code and common controls. When headings and sub-headings were implemented with code and keywords were repeated multiple times, a huge impact in SEO was observed. Unique background color and minimal text styling resulted in consistent page design.
Checkout:
Speaking user’s terms when it’s needed.
Engagement:
Event Repository to showcase Current Events, Past Events, Testimonials, and ₹1 Sales in one place.
Event Page Designs
