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.
Lean UX, wireframing, and high-fidelity prototyping
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:
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.
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:
The strategy and functionalities of the redesigned tool.
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.
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.
Decided to use Midnight Blue and Laser Orange to create camping at midnight while learning and playing with each other feeling.
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.
(1) Not brand faced design
(2) Old fashioned unfriendly layout
(3) Unclear and impractical filter option
(4) Unclear and unattractive information bar
(5) Unnecessary amount of pop up pages for user information
(1) Leaderboard page with unorganized information & unclear badge system
(2) Profile page with old fashioned & unprofessional look
(3) Module completion progress page that does not lead user to the modules
(1) Minimal and brand faced ona pager design with white background
(2) Profile page with instant update and photo options
(3) Improved leadership board with easy and simple filtering options
(4) Improved badge system to create more awareness
(5) Improved classes completion progress to help users to reach the selected class modules
(1) Responsive and user friendly layout that has easy edit option
(2) Organized information
(3) Responsive banners
Continuous Challenges & Improvements
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.
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.
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.