HUAWEI e-comm & Events

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.

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.