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
and at the end,
it’s paying all
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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 a specific item.
We send email update for any change in our customer's store credit.
Stock availability alert
For all those out of stock items, our customers can set an alert to get an update when it's available again.
Popular search terms
We show only popular keywords of categories that interest each specific customer.
We focus more on content that interest each customer based on his previous experience.
We apply unique algorithm that priorities those items based on the previous customer experience.
No need to show all categories here. We show only those interest our customer taste.
PPC landing pages
Top 10 pages
A great story to tell
Increase in conversions for more than $250k per month. In addition to increasing in the basket value and items added.
The website was having too many distractive elements and colors. Also you need to scroll down to click on the CTA button.
Provided more white spaces, increased focus on the CTA button, and move to the top of the page.
All we do is win
We adopted Persuasive design strategy in our design to increase conversions coming from the product page. And we did that by pulling the CTA button at the top, showing reviews, adding marketing thumbnail, remove distractions, and more.
Those changes and updates been made after getting dozens of feedback and suggestions from customers and in-house team.See the page
Research and Analysis
- Competitive Analysis
- Usability Testing
- Heatmap Analysis
- Stakeholder Interviews
- User Interviews
- A/B Testings
- Information Architecture
Average basket value
+$250k/month increase in conversions
I created a heat-map analysis for this product page and found that most of the customers (70%) are not scrolling down. And the problem with this page that you need to scroll down to add an item to cart.
And the button wasn’t clear enough. So I moved the button up to our hot spot area and removed all distraction elements around the button.
The result was increasing Avg. sales to $250k per month Al Hamdo lellah. In addition to that, it increases basket value $4 more.