Hobby King
UX Research + UI Redesign
”Twenty years from now you will be more disappointed by the things you didn’t do than by the ones you did do.
- Mark Twain -
Current website is
Distractive
Complicated
Unfriendly
Not responsive
Messy
and at the end,
it’s paying all
employees
salaries! :D.
Much to our surprise, when we look at all of these negative things, we meet the ugly truth that this current website is considered as the leader of hobby stores on the internet. About one decade, this journey started and brought a huge and great success. Making any primary changes to this website would be a brave decision. Because anything could really affect this success! But the pain would be more if nothing changed. Because competition is too high right now.
My role as a UX Manager was to lead and inspire the team about the latest trends of creativity and design. Results will show how we brought innovative UX elements that can be adapted to any eCommerce website.

Process
Research and Analysis
Starting with multi-channels of research and analysis. I interviewed most of company’s stakeholders and got their feedback about current website for things that needs quick actions and things that need more work to do. In addition to get more insights about the vision of HobbyKing future, and how they see it.
In this phase I worked with my team to understand more about HobbyKing website and the market around it. We have done extra hard work to find the best understanding of the website and were should we go with our implementation.
Competitive Analysis
Heatmap Analysis
Stakeholder interviews
User Interviews
A/B Testings
Usability Testing
Information Architecture


Information Archeticture
It’s time to take brave decisions
One of the most difficult challenges we face is how to build a new information architecture for HobbyKing's website. The live navigation is too distractive and deep. The current navigation opens a big GREEN light to exit the site quickly! :s
I worked on some information architecture tools like Card Sorting & Treejack from a website called Optimal Workshop that really helped me to bring better and easier navigation experience to our customer.
Personas




The more advanced personas you create
The more understanding for your target audience you will get
New to HK & market
Adam works hard every day and he usually reaches home around 7:00 pm. Mostly he practices his hobby on weekends. (He normally only works on his hobbies on the weekend) Sometimes he uses a search engine to do a small(some) research. He still does not have that much of knowledge about RC products. (he is not very knowledgeable about RC products.)
New to HK & advanced to market
Tim knows a lot about RC products. He heard about HobbyKing before, but he never bought from us. He used to buy products from other markets. Recently, he decided to try our website.
Returned & Beginner
Kevin knows well about RC products. But he is not a fan of trying new things. He prefers to keep an eye on specific models nor being updated with market trends. He likes to share his achievements by uploading videos or pictures on HK website.
Returned & Advanced
Matthew is an expert in RC. He prefers to assemble all his models by himself and enjoy new and creative things. He has a clear understanding of his hobbies. He gets excited when he tries a new product. He feels happy to share his opinions and reviews about HK products.

Surveys
Customers are definitely the right people to get feedback from!
We sent many surveys to our customers … Sometimes it was related to information architecture, and sometimes it’s related to organize our main priorities. I got awesome feedback that really helped me to how direct the redesign process.
Question example
Your classification is not logical, for example, if you go to Multi-Rotors & Parts. You have propellers, electronics (so product type), but then you have DJI, Multistar (Which are brands), so you mix product types and brands which is confusing and not useful for some people.
Design
If you looked at website usability tests we have, you going to laugh and get really upset and sometimes feeling useless for not achieving simple actions that can be applied fast. Such testings show us how much we need to work hard to achieve really good results. The good thing is that was a lot of opportunities to increase our conversions 🙂
One of the most important resources we get for our wireframes and designs is the research and analysis be done by Bymard institute. I highly recommend studying their research whenever you have an eCommerce website to work on.
Strategy

Designs
I have designed a lot of pages … I will pick the main ones, and if you want to see more, you can browse through HTML links provided into each design and discover more.

In addition to that, we are going to show personalized items for customers based on their activities. And because some of the categories would be difficult to understand what inside, I added more visually appealing for each category. In addition to that, I have added the number of items inside and most popular tags been used within that category. Also, those categories can be changed for each customer based on his activity.


There are a lot of new features on this page like 2nd marketing thumbnail, Hashtag tab for social content, and the ability to search through YouTube instead of going there and exit our site.


Another challenge was here is how to always show items even with those increased filters. And this was by adding those filters in a creative way like ``Price at most`` instead of having to point selections which would increase the ``no results found`` page.

I wanted to keep showing CTA with all it's affected prices in the right side. And all items can be scrolled in the left side. Also having the ``add more from wishlist`` at the top to increase basket value.



I considered order ID is the key and makes it bold. other elements can be shown easily and nicely under the title like how many items ordered, order date, order total, and other actions like canceling or viewing order items.



Those testimonials are dummy for now :p
Features
Add to cart floating button
Material design from Google is one of the strongest design trends ever made in regards to usability and ease of use. An important element is a floating button, and I wanted to use in eCommerce in a way that reflects usability and ease of use. I found using it in adding items to cart will be very useful and would bring more interaction with user’s basket. I worked closely with development team to come up with a great solution that can enhance the user experience in adding items to cart.


Filtration
I wanted to provide the customer with more filtrations because we already have a lot of items, and most of the customers were complaining about getting non-relevant items through the search experience. For that reason, I put a goal not only to provide more filtration, but to provide a solution with fewer clicks in the filtration processes, and provide very convenient results that would not affect the increase infiltration.
Emails
For any eCommerce site, emails are so important. Our old emails were very standard and don’t have that energy. So that I wanted to bring a unique flavor to each email we send to our customers and focusing more on marketing materials that would motivate and increase engagement of our customers. I am going to show some of those designs.

Price war!
This email is for our discount campaigns we launch each year.

Product price alert
We send alert email for those who choose to get alert for price update on specific item.


Store credit
We send email update for any change on our customer’s store credit.

Stock availability alert
For all those out of stock items, our customers can set an alert to get update when it’s available again.
Personalization
Each customer will enjoy a unique experience on almost every page .

Popular search terms
We show only popular keywords of categories that interest each specific customer.
Image Slider
We focus more on content that interest each customer based on his previous experience.
Products
We apply unique algorithm that priorities those items based on the previous customer experience.
Categories
No need to show all categories here. We show only those interest our customer taste.
Marketing

PPC landing pages
PPC landing pages are essential weapon for marketers. I wanted to use some fancy design that reflects our awesome products. I have designed so many PPC landing pages, and this on of them.
Top 10 pages
This is a new initiative I asked management to have because I want to attract new customers who still don’t have so much experience in the RC field. Those pages can be also PPC landing pages, and really helps with SEO.
