Elearning Tool

Sport Knowledge Underground

Mobile App, Web App

SKU (Sport Knowledge Underground) is an e-learning tool that helps athletes to learn the brand’s latest product and technology information by seasons. It also creates social interaction with other users while learning and exploring the content.

Techniques

Lean UX, wireframing, and high-fidelity prototyping

Roles

UX Researcher, Interviewer, UX Designer, UI Designer, Interaction Designer, UX Lead, Logo Designer

Tools

Pen and paper: Wireframe
Sketch App: UX / UI Design
Invision App: Rapid Prototyping
Zeplin: Engineering Handover

Insights & Discovery

Problem Statement

The tool has been used for many years with same design. Related to that we’ve been getting many negative feedbacks about design from both users and inner employees. We tried to expand the user persona of the tool to the consumer but unfortunately, brand department did not allow it because of the lack of brand faced interface. In order to solve this we asked ourselves how can we update our e-learning platform to meet the brand expectations?

Research & Discovery

As a lead designer of SKU, I did series of research about previous website interface and as a team, we have conducted user research with a dozen of people includes users and employees via interviews and online surveys to pinpoint the current frictions and explore the improvement areas:

Research & Evolution

Branding

Nike.com has taken as a role model for the new design to reflect the brand and bring consistency to the company. It was important to use same font style and sizes with Nike.com to create consistency between pages.

User Research

To create a tool that satisfies all users need, we used the data that we collected from users and employees around the world. Our team included designers, developers and also cross functional members to gather effective feedback for weekly and monthly design sprints.

Purpose of the Application

From the researches and feedbacks, we defined the strategy and functionalities of the tool:

Knowledge Experience

Competitive Research

In order to create an effective learning tool, competitive research with popular e-learning tools was very crucial. From the researches we learned that, when users visit the page, they navigate through by “L” shape and they don’t spend time on pop ups. Therefore, we decided to present the information as a one pager so users can access every essential information without clicking anywhere.

Colors

Our goal was to create a platform where users can camp on a knowledge forrest to learn more about the products, technology and heritage of the brand while playing games. Hence, we decided to use Midnight Blue and Laser Orange to create camping at midnight while learning and playing with each other feeling.

Logo Evolution

After deciding on colors, modernization of the old logo was necessity. One of the most important things that were missing in the first logo were the swoosh and boldness because of the lower-case letters.

Old vs. New Main Page Layout

Old vs. New User Information Pages Layout

Old vs. New Product Pages Layout

Old vs. New Admin Page Layout

Continuous Challenges & Improvements

Decision Making

New design concepts created huge impact on the timeline of redesign process’. After handling over the redesign layouts, application department started to redesign the web tool immediately.

Developers

It is very important to come up with mutual solutions with developers in order create feasible product. In our sprints, when developers are stuck with the design handovers, designing alternative work arounds regarding to the feedbacks is the top priority.

Consensus

The new brand faced and minimal web interface design created huge impact on consumer experience that satisfied our users which eventually led to higher conversion rate.