Colpar's HobbyTown
Colpar's HobbyTown is one of Denver's premier shop for many types of hobbies and interests. As one of my projects, this concept is my delivery on researching and creating an e-commerce website for a local business.
The current website surely can use some improvement. And here is my take on creating one for it.
.png)
So, why build this app?
Colpar's HobbyTown has 2 locations in Denver, and the local customers really like the physical presence of the store. However, the website is merely an "introduction" to the store. Though it contains many helpful tips and tricks for consumers and hobbyists, it does not allow customers to purchase products from the store, assist newcomers, or having the ability to check for product availability.
Therefore, my challenge was to create and design a feature that allows shoppers to perform those tasks while modifying the presentation of the website as well to produce an easy and understandable use flow.
Research
As a customer myself, I usually use the Colpar's HobbyTown website and have a hard time finding the products that I want simply because it does not have the "search" function. Another problem is I have no way to confirm the product availability in the store.
And as I think that I might not be the only one that has these problems, I researched to find the "problems" of the case by interviewing a couple of users/customers of the store.
Current design
The homepage of the website shows basic information about the store, for example opening hours, location, contact information, etc.
It also has videos on tutorials and tips on making models, information on upcoming events, etc. which is quite useful for the local hobbyists.
But the website does not have many functions as
an e-commerce site such as searching products, view product details, etc.
The plastic model page simply shows some photos of products that the store carries but does not show the detail that the customers need.
For example, the "Race cars" section on the photo here is a basic photo of the models. It is not interactive and the users can only see the outside of the model boxes.
Interviews
Upon asking the customers, I found that the majority of the customers are males. Their main goals are purchasing models and tools for the hobbies. A couple of them also come to the store for enjoying the "local" and "physical" feeling, as they want to be a part of the hobbyist community, asking questions on improving their skills, or to chat with the workers as they consider them "friends". Some others also come to the store simply to enjoy the finished products and look for inspiration in creating their own crafts.
With the results of the interviews, I was able to perform the affinity mapping and card sort to uncover the struggles that customers were facing.
Affinity mapping
With the information from the interview, I created an affinity map to see what problems the users/customers were facing in order to define the correct problems.
From the picture on the left, the themes can be "the website is not helpful in assisting users to find products," "the pictures are not interactive and does not show any information about the model," "items are put in random orders" etc.
Card sorting
Alongside with the affinity mapping, I conducted
card-sortings for the types of models to create an appropriate and logical layout for the plastic model page. The process was performed with both open-sort and close-sort to make sure the page layout is easy to use and understandable to users.
Persona
For example, the category "tanks" can be found in both themes "world war" and "modern military." But these two themes can also belong in the theme "military vehicle" (and of course not "commercial use").
With the information and result from the interview and analysis, I was able to create 3 viable personas.
“I enjoy a quiet weekend so I can spend my time making models.”
David, 45
Office manager
Married, 2 kids
Lakewood, CO
Bio
David is a father of two, who really loves miniature models. He often spends his spare time with his little family and makes models. He enjoys a quiet and calm atmosphere. He shops online sometimes.
Statement
“I can’t find what I want because all of the scales are mixed up.”
Problem
David is having a problem finding and browsing through kits because their scales are not sorted in order.
Solution
Adding an easy to use scale sorting function for the website.
“I am a beginner and can’t find the one that’s not too hard or too easy. Heck, I don't even know the names.”
John, 24
Finance Intern Single
Denver, CO
Bio
John is an intern in a firm after he graduated. His new job is giving him a hard time, so he wants a hobby that can help him relax. He’s new to the miniature hobby and not skillful.
Statement
“I'm new so I don't know how to find one that fits my skills”
Problem
John cannot find the right models he’s looking for that fit his skills since he doesn’t know their names, level or having a beginner guide.
Solution
The front page of the website will have a beginner tab for newcomers, it helps John search for the kits. If he types the name wrong, it also suggests the right products and shows the skill level.
“I want to buy a present for my son. He loves making all kinds of stuffs, so a model kit should be a nice and new surprise.”
Kevin, 32
Unemployed Married, 1 kid
Aurora, CO
Bio
Kevin's son's birthday is coming and he wants to surprise him with a model kit. Kevin wants something that’s popular, easy for kids to make, and not too expensive since he's not working right now.
Statement
“I don’t know what to buy. I wish someone can suggest for me.”
Problem
Kevin has trouble finding a cheap, easy, and popular kit for his son he can show to his friends, but he couldn't find help.
Solution
The front page now will show suggestion by showing bestselling items and users can sort the list based on price.
Information Architecture
With the current setting, we now have at least 3 new features to add to the website. To understand each additional feature, we will use the Information Architecture mapping to map out where the new features will be used or added.
Site Map
Best Sellers
Featuring
Home Page
Home Page
"Search bar"
"Search" feature allows John to look up kits that he may not know their exact names.
Airplanes
Boats
Top Brands
Cars
Drones
Features shown on front page
"Best Sellers" feature is added to help Kevin find a popular model kit easily for his son.
Aircrafts
Tanks
Battleships
Vehicles
Other
Plastic models
Main Tabs
In this case, we look at the sub-categories for the plastic model section only. Each other main tab will have their own sub-categories.
Product Page
Sub Tabs
(Plastic Models)
In general, each tab above will lead to a product page that lists the available merchandises, or show items that not currently in stock but will be later.
In the product page, we have the "Sort by" function that allows users to sort the items in the order that they want.
Based on research on other e-commerce websites and user interviews, this function will allow these types of orders:
Relevance
Popularity
Name: A - Z
Name: Z - A
Price: Low to High
Price: High to Low
Level: Easy to Expert
Level: Expert to Easy
Date: New to Old
Date: Old to New
Relevance:
allows users to look for products when their names are mistyped.
For example, John is looking for a British tank model kit named "Centurion." When he types in "Century" (since he doesn't know the correct name), the system will filter out the names in the system and show the most relevant kits.
Popularity:
allows users to look for products base on their popularity. This becomes really helpful for Kevin since he is looking for a hot, popular kit for his so he can show his friends.
Name:
a basic sorting feature, allows users to sort the item base on their name in alphabetical order.
Price:
also a basic sorting feature, allows users to sort the item base on their price ranking.
Level:
Date:
this will sort the item base on their difficulty, from easy to make to the expert level that requires many skills through time.
This is helpful mostly for John since he can look through the product list to find the ones for beginners like he is.
However, this can also become helpful to David since he is a skillful hobbyist, it is expected that he would be looking for more challenging kits.
this feature is for people who want the latest products on the market, or they enjoy vintage kits and want to find the old one for the sake of nostalgia.
So far, we've covered John's and Kevin's problems, but there seems to be no solution yet for David. Well, the thing is when we design a website for model kits, the scale is actually "pre-sorted," meaning it will not be one of the sorting options. Rather the scale is presented on the "scale page" before users get to the general product page.
Plastic models
Aircraft model kits
Product scale
Product
Page
Product Detail Page (PDP)
This design is helpful for David for when he searches for a model kit, he can choose the scale of the model first instead of choosing the scale in the product page listing. The design will be shown in the prototype.
With the design in hand, we have the user flow for each persona as below.
User flow
Plastic models
Aircraft model kits
Product scale
Product
page
David
This flow allows David to search for models base on the scale after he chooses a type of model (aircraft, tank, battleship, etc.) then he can proceed and look for the items that he wants in the scale that he selects.
John
Home page
Plastic model kits
Product scale
Product
page
Sort by: level
This flow is for John so he can look for a certain product that matches his interest while allowing him to sort the level of difficulty of the model.
Search:
Product page
The "Search" flow will allow John to type in the name of the product that he looks for and the system will filter out the closest name-pmatching items.
Kevin
Plastic models
Aircraft model kits
Product scale
Product
Page
This flow allows David to search for models base on the scale after he chooses a type of model (aircraft, tank, battleship, etc.) then he can proceed and look for the items that he wants in the scale that he selects.
Wireframing
Sketches
The sketches gave a great idea of how the website and the flow of use should look like. From research on other e-commerce websites and understanding how miniature models are sorted, the sketches that I made helped me accomplish the goal of creating a good search flow for users.
Wireframes
From the basic sketches, I was able to create the wireframes for the look of the website and have the use-flow designed in a way that is similar to the flow of other e-commerce sites.
One thing I also learn in this process is that I need to be able to create the wireframe with the grey color scale to show the hierarchy of the website (picture 2). If I use colors right away, the site may show different sections based on the color but there is actually no hierarchy in the layout system.
The initial homepage design did not have a balanced layout for its components. The blocks were not aligned properly since I did not use grids and guidelines. It served as a sample layout to see where each component should be.
Thanks to usability testing and constructive feedbacks, adjustments were made to match the needs of the users as well as create an aesthetic and balanced look.
Ex: the "Featuring..." block did not have a calculated size. Rather it was just an example of how the "Featuring..." block should look like in the product picture.
The revised homepage design looks better with the blocks aligned. The store details align with the "Featuring..." product thumbnails and create a smoother look for the page.
Understanding the use-flow and how the design of the flow should look like, the use-flow for all 3 personas can look like below:
Like many e-commerce sites, the basic idea of the flow is to allow the users/customers to find the products that they want, view the detail, be able to check out and finish the purchase
Sometimes, other functions can be added depending on the needs of the users, as in checking availability, reserve in store, notify if items are back in stock, etc.
High fidelity Mockups
From the wireframes and use-flow designed, the next step is to create a high fidelity mockup to have a look of what the real website would look like. With colors and photos added to the wireframes, the website prototype now looks vibrant and beautiful, a sign shows that the website meets the aesthetic aspect.
Final thoughts
Creating Colpar's HobbyTown site was a great experience. The concept not only allows me to learn how to create an e-commerce website for a local business that meets the needs of the users but I also feel more connected to the hobbyist community.
The process also taught me on understanding and creating the hierarchy of a page, from the information architecture - creating the user-flow step by step to the hierarchy in a page itself between its components. Then, to create an e-commerce site, it is crucial to know necessities of a web page that can meet the needs of the users and ultimately lead to the sale for the business. Features such as "add to cart," "checkout flow," "relevant products," etc. are the basic sale point for the business. But other functions such as "sorting products," "review products," "notification when item back in stock," etc. not only helps the users shop easier but also create the bond between the customers and the business.
The more I work on this project, the more I learn and understand how to create a product that can meet both the business goals and the intuitive usability for the users.
