Project Type: UX/UI Design, UX Research

Roles: Product Design Intern

Team: Product Manager, Business Strategist, Engineer

Timeline: June - August 2018

Introduction

In summer 2018, I interned at Xenith LLC's headquarter in downtown Detroit as a Product Design Intern on the Digital Strategy team. I conducted user research on previous version of the e-commerce website and participated on its redesign. Also, I developed serial UX workflow in front-end, where everyone in the team can access order details, track order status, and manage product specifications. 

*** This project is partially subject to non-disclosure agreement (NDA) ***

Process

In the 10-week time span, I collaborated with marketing strategists, product managers, software engineers, and my design mentor Charles, to conduct research, design, prototype, iterate, and finally created seamless and logical user experience, which helped to enhance the number of page views and online purchase.

The main projects I participated include:

• UI/UX audit of Xenith.com to focus on brand communication

• Design of apparel product website on creating seamless interactions

• Redesign of UI of product entry database system

• Design mobile interfaces for the app (future)

Challenge: “We don’t know what we don’t know!”

The quote above was from one of my team members, who have struggled by the issue for a long time. Since the previous version was built several years ago upon several different third-party applications. While Xenith has evolved new product series, most of the functionalities in old version are limited and outdated. Moreover, the information architecture is somewhat misleading, and the brand communication is not clear enough to attract buyers.

The overarching goal was to optimize sales channel with a simple and clear user experience, as well as providing more effective information to tell brand and product story to target users.

Break downs

Before I get started with research and design, I decided to break down the challenge into various sub-tasks and solve them one by one. Here are the major steps of how I accomplish it:

/ Visualize User Behaviors on Heatmap

Tracking user’s behavior is an effective way to know website’s popular content, so I recommended recording users clicks on Xenith’s website and generate heatmap in Hotjar, which helped to discover their potential needs. Combining results of heatmap(left) and usability testing, I conducted the redesign of Xenith’s website(right).

/ Information Architecture

Since I don’t have prior experience to the user flow or a clear understanding of the information architecture, I decided to construct an interaction map to generate a static representation of both interval and hierarchical relations between webpages, which visualizes all the possible interactions. In this way, it would be more efficient for me to discover what kind of values the website could provide for users.

/ Prioritize key features by using Inverted Pyramid model

Getting to know the site’s information structure, I had a short conversation with both product manager and marketing strategist, and ranked the importance of target users. Base on that, I introduced an inverted pyramid model. As it is displayed in the chart below, the top represents the most substantial, interesting, and important information, whereas both importance and quantity of information decrease as moving downward. In this way, I was able to prioritize the main features by new product & key value, team sales & innovation, and product customization.

The Research

During the project timeline, I worked closely with my team to conduct extensive user research during the first 4 weeks of my internship. Thus, my primary research task focused on synthesizing the research data and collecting key insights.

/ Understanding Users

Base on the information my team provides and user demographics in Google Analytics, the primary buyers of Xenith’s product include players, parents, and coaches. In order to illustrate our users and their goals, I created three primary personas and identified their needs, which helped me to find out what is important to our users, and how to build brand communication to convince them to buy our products.

/ Heuristic Evaluation

I conducted heuristics evaluation based on Nielsen’s ten key usability heuristics, and modified some of the checklists to make applicable evaluations for Xenith. I invited four colleagues who have previous experience of user research. The main findings include:

• The website doesn't provide effective comparison between similar products.

• Product categories are not consistent between the header and footer in some pages.

• The homepage didn't provide adequate feedback for user interactions.

1. New Homepage

Key Features

Based on personas, heuristic evaluations, and usability tests I conducted, my team and I identified the key features that are important to the new webpage (icon credit).

Design Iteration

Desktop

Footer

Helmet Lineup

Main Menu

Mobile

Hero Image UI

Compare Helmets Chart

2. Xenith’s Mobile APP Mockups (future)

Before my internship comes to an end, I realized that if Xenith becomes a giant brand like Nike in the future, creating an app will be helpful if more product lines are launched. Thus, I started this self-initiated project to create basic mockup screens for future reference of Xenith mobile app. Below are some sample of the screens I created, the full interaction link can be accessed here.

3. Product Entry System UI

Beside redesigning the Xenith’s website, I also participated in creating user interface for Product Entry System of Xenith’s Production Facility Lab, where thousands of orders needs to be processed everyday. After conducting a short onsite interview with workers in lab, I sorted out their demands and generated a user flow of a typical order processing procedure.

Then, I created wireframes of the two main screens in low fidelity, with annotated notes on the side illustrating key functions of each section on the pages.

After a few reviewing iterations with my team, I designed and coded user interface in HTML/ CSS/ Javascript, where user can make easy transitions between pages (only able to display two pages due to confidentiality), by either clicking on ‘New Order‘ button, or scanning barcode.

Reflections

/ Understand B2C correlation via push & pull model

Since the goal is to build a website for EVERYONE, but every type of user are able to find things they want. Base on my prior experience working as a PM, I introduced this model as the overarching guideline throughout my design process, in order to figure out the correlations between:

• Visitor: Who are our new buyers? What makes people visit the site? What do they want to find?

• Product: What are their anxiety of not buying? Why should they buy our product online?

• Brand communication: What are we trying to let buyers know about? What is doing wrong/not good to them?

Feedback

"Mu really did a great job, not just on conducting research and redesign all by himself, but also had a vision to create something new for the future. His work and attitude toward design really impressed me throughout his internship process, we are glad to have him here with us!”

— Matt Rea, Head of Digital Strategy Team

“I really enjoyed working with Mu as his mentor during this summer. His creative talent and keen business insight is always needed in the current job market, let alone his hardworking and positive attitude toward challenges. Good luck!“

— Charles Hillard, Design Mentor

Key Takeaways

• Discover the real pain points of your clients, and understand users’ potential needs by intensive research.

• Besides design, build effective brand communication, and present information effectively in business models.

• Follow design guidelines and utilize styles and patterns that are both hierarchical and consistent.

• Try to jump out of the box, focus on product lifecycle, create new patterns for future reference!