eCommerce Site Navigation Revamp

Role: Research, UX Architect, UX Design

…

Overview

Samsung for Business website has evolved into an eCommerce platform and started offering B2B buyers a self-serve online shopping experience to research for business needs, as well as making any work-related purchases. In order to build a more robust eCommerce website, how might we remedy the drop-off rate with better information architecture on our website? The main objective of this project was to analyze the current navigation information architecture of Samsung’s for Business website and determine how to optimize the structure to make the website navigation more user-centric, but also need to take into consideration of key business priorities. I was heavily involved from the beginning until the execution phase.

 

Objective

Evolve the site navigation for the SEA market that reflects the way our B2B buyers think and behave. The new design should allow users to navigate their way through the website and find the information that they are looking for quickly.

Problem

The existing site navigation doesn’t have a logical, well-defined structure. It is confusing, and trips up our users frequently. Our business is experiencing high drop-off rate, low site traffic, and poor conversion rate.

Solution

Empathize with users to understand needs, motivations, and behaviors. Analyze existing information architecture, redefine content structure, clean up content organization and nomenclature. Data will guide us to redefining the IA to inform UI.

 

Carry Out UX Research:

  1. Analyze site navigation's current state, pinpoint what needs to be improved based on customer needs

  2. Understand business goals and business priorities

  3. Heuristic evaluation of the current website navigation

  4. Card sorting & tree testing to test current and proposed website navigation designs

  5. Redesign and refine website navigation IA

  6. Build a high fidelity prototype

―

 

My Research Process Involves:

1. Interview the sales team & the support team

Rather than going directly to the B2B buyers, I had a long conversation with our B2B sales manager and support team manager. They cut through the chaff and help me identify some fundamental pain points, barriers, and success factors of most of our existing customers. I aligned with stakeholders on the full picture of how Samsung operates as an organization, how data is collected and measured for their specific team.

2. Competitive Analysis

I then identified competitors in a similar space and comparators with similar business models and analyzed their website navigation design. I collected alternative viewpoints for how I might structure the B2B.com navigation and content.

3. Review Quantitive Site Data

Samsung B2B site has a large pool of quantitative site data that can be used. With the sales team’s support, we analyzed the data in our CRM to answer some fundamental questions I had about our ideal customer. I found out the most common job titles, contract size, location, company size/type, industry, etc.

4. Interview B2B customers

As a last resort, I can always turn to interview our prospects and existing customers. For reasons I already outlined above — this isn’t ideal. But it’s still infinitely better than guessing.

―

 

Conducting a Card Sort:

  1. Uncover users’ mental models, taxonomies the content

  2. Better understanding user expectations as it relates to the way information is categorized

  3. Identifying items or products that might be difficult for users to understand or categorize

  4. Understanding how users would name or label groups (in comparison with how a company would do so)

Card Sorting Analysis: similarity matrix

After interpreting the PCA results, I also considered the strength of card pairings by using Similarity Matrix. This tool shows the proportion of participants who grouped any two cards in the same category.

For each pair of cards, the intersecting cell displays the percentage of participants who grouped them together. The most closely related pairings are clustered along the right edge of the table and the darker the shade of blue, the stronger the association between the pair of cards.

While the PCA helped us identify categories, the Similarity Matrix helped us understand the strength of the relationship between cards within those categories, potentially identifying strong clusters or subcategories within the participant-created product groupings. 

 

Tree Testing

We performed tree testing to test the intuitiveness of the purposed taxonomy of the Samsung B2B site’s navigation. Evaluate the hierarchical category structure to uncover issues with findability and discoverability in a real-world scenario. The purposed taxonomy was inspired by two rounds of card sorting exercises, plus insights we gathered from the moderated card sorting exercises. In the tree testing, participants were asked to complete ten tasks so I could observe how they navigate through the site to try and accomplish each.

Tree testing task result example

Analyzing and Synthesizing User Research Data:

Qualitative and quantitative research yields different data types, I used both in combination for conducting effective research and getting actionable insights. In the research phase, I explored how users interpreted the taxonomy and content grouping in the current site navigation to identify which areas may be causing confusion. I found taxonomy that was unclear to users and groupings that users did not intuitively agree with, which I organized into insights to take with us to the design phase.

 

―

New Streamlined, Re-Imagining Site Navigation:

IA defines site content and functionality, while a website’s navigation is a collection of user interface components and patterns that helps visitors find information and functionality. The new navigation should accommodate the full scope of content and functionality of a site, help visitors find information through functionality, and encourage them to take desirable actions. It’s vital to define the IA before designing navigation, IA will help to handle the volume and complexity of the content and design better navigation.

Navigation Types:

  • Primary navigation: it is global navigation that has very limited flexibility, and we need to align with other Samsung subsidiaries’ website navigation.

  • Local navigation: a flyout menu appears when our user hovers over each primary navigation link. The local navigation menu supports primary navigation by providing context0relevant options.

Former website navigation IA

 

New Navigation IA


Finally, we started transforming the insights we collected from our research into concrete designs. We made sure to keep a specific user at the front of our minds throughout this process so we could analyze our design choices through her eyes. The results are a clickable prototype that we can start conducting usability testing around to continue iterating solutions to best suit user goals while looking for opportunities to bring them joy along the way.

New website navigation IA

 

―

Design Prototype:

I created comps using Sketch to communicate to other stakeholders the functionality and visual changes of the product in order to gain alignment. Also, we used these design comps to communicate to the headquarter team that our new navigation structure is aligning with other subsidiaries’ navigation bar design, color, and typeface choices are all consistent. I did many rounds of presentations to different lines of businesses, to collect feedback before handing it off to the development team.

 

―

UX Considerations & Outcome:

  • Pivoting from "solution-oriented” to “product-oriented” site structure, then map business solutions to its respective product category or business industries, to give users more specific, tailed solutions to help their business succeed.

  • Include relevant accessories, and products in their respective product categories to upsell and cross-sell. Make relevant products more accessible to users, and increase site continuation rate.

  • I took a mobile-first approach when working on navigation. It helps me prioritize both content and navigation options, I will have a clear picture of what navigation options I should include and in what order when I start working on the desktop design.

  • Gain a deep understanding of users’ mental models, so I can better understand how something works in the real world. As designers, we should never project our behaviors and reactions onto users or design layouts. Always learn about users’ needs and behaviors first, then map content to the persona that represents the right target audience.

  • Consider cognitive abilities, and how to chunk the information and feed it to users gradually in digestible pieces. How to design a navigation structure that is easy to scan and comprehend, so content is more findable,

  • Proper labeling gives users a proper understanding of what to expect from clicking on a link. We avoid only using branding term that doesn’t mean anything to users, but use simple and concise language for navigation options. We also made sure to use a standardized naming convention throughout.

  • Design consistency is key to increasing the predictability of the website, predictability makes users feel safe and secure.

  • Evaluate website navigation structures in the context of the user journey. The modern B2B buyer journey is rarely linear, their path to conversion involves multiple entry points and touchpoints, and this has a direct impact on the navigation system. We defined two scenarios of interaction and evaluated what pages users will visit to complete this scenario.

  • Avoid redundancy and removed many duplicated links and deep links from the previous navigation structure.

  • Reinvent continuously. Continue to closely monitor the data and make necessary optimizations along the way. Nothing I ever do is perfect, I need to reinvent continuously based on data and user feedback. Working closely with the data team so they can help sift through all the data and extract from it, so I’m able to understand the human behind the 1s and 0s.