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
We have created a rich competitive analysis for the Hobby market. We studied our direct and indirect competitors. We created SWOT analysis also competitors’ site features like payment solutions and unique elements of social engagement.
Heatmap Analysis
Heatmap analysis helped me a lot to understand more HobbyKing site pages. It provided me with insights about customer’s interests on each page. Were they click and if they scroll down to see all page content.
Stakeholder interviews
I interviewed most of the company’s stakeholders and got their feedback on the current website for things that need quick actions and things that need more work to do. In addition to getting more insights about the vision of HobbyKing future, and how they see it.
User Interviews
Fortunately, HobbyKing community is very loyal. And it’s easy to get so rich feedback that is really direct to pain. So many suggestions helped me to get the complete picture of what exactly I should do.
A/B Testings
I used A/B testing tool called VWO to track updates I made on live site. And then I decide which updates we should keep, and which we shouldn’t be based on data I get.
Usability Testing
I used here also VWO tool to record customer’s activities on our site. That was really useful and helped me to find errors, bugs, and mistakes that were hidden and no way to find them without such a great tool.
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
Is the website navigation menu intuitive and helpful? How would you improve it?
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.
Our statistics tell that most of the homepage visitors are clicking on search area. That's why we found it more appealing to have a clear big search are in front of the homepage.
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.
Category landing page is one of the most important pages on our site. The challenge was how to show all important elements within that specific category. For that reason, I have added more tags and call to actions that direct you clearly to what you are looking for.
There are a lot of design strategies I can use here. And I found persuasive design strategy would be the best choice on HobbyKing case. The main reason is we already have a lot of community content that we can use on the page. I tried to show most of it in the hotspot area, and before even customer scroll down.
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.
For SEO, we needed to have single pages for brands pages which contains different items in different categories. I tried to make it looks easy to navigate through different categories within a specific brand page. I hope what I did accomplished that. What do you think?
I tried to enhance our search and listing experience. One of the most important elements here were adding filtration on the left side.
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.
It took me too long time to study the best, easy, and fast checkout can be. I studied more than 50 eCommerce sites to come up with the result I am providing here. It's all starts with cart page, and how you can let the customer enter the funnel easily and without any difficulties appear.
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 would highly recommend starting from view cart page before you come to this page to see how I tried to simplify the experience in fewer steps and more convenient content to show for each customer depending on his status (New customer, Retuned customer, or an only a guest).
There were some changes been made on this page, but anyhow I made this page more engaging for customers type. You can have a look at other user account links through the link provided below.
This page needs to be organized well. What I did is having that small sort option to filter customer's orders based on order status. And even though, he can find easily and directly the status of his orders by coloring the status as you can see.
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.
The main focus for this page was from the marketing perspective. I suggested to the marketing team to have top 10 items for each category so we can use it specifically for those new customers as they still not in the market awareness. I tried to make it in a fancy way to convince more the customer.
This is one of many static pages I have designed.
You can bring amazing message through login/register page. Here I found it super useful to provide some testimonials for some influencers worldwide who are talking about HobbyKing.
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.
