TOUGH MUDDER
Workout App
TOUGH MUDDER
Workout App

Black ink
User-focused eCommerce
for Website



ABOUT THE BUSINESS.
Black Ink is an independent gift store focused on the experiential side of retail.
While their mission is to be an explorable store, they have yet to bring that ideology to their website.
I HAVE A PROBLEM.
How can I bring the in-store mission to an online experience through user-centered information architecture?
RESEARCH.
I started this project with a survey to narrow down my target user.
A survey of 23 people between the ages of 18 and 50, showed that 95.7% of these users shops online for gifts,
73% prefer to shop online because it is more convenient.
In order to understand and learn more about who Black Ink's competitors were, what the users usually bought when shopping online for gifts and what they did not like or thought needed to be improved on for a better
online shopping experience, I conducted multiple contextual interviews.
THE COMPETITORS.
When analyzing Black Ink’s major competitors, the online shopping experience showed at least one
or more of the following criterias:
-
Shop navigation button is located on top right side of the page.
-
Images and descriptions are clear.
-
Checkout process is modern and straightforward.
HOW WOULD USERS FIND & CATEGORIZE PRODUCTS?
While visiting the store I gathered a list of over 100 product they currently sold. I performed an open card
sorting experience.
The goal was to find out how users would identify and categorize these products.
The users were given a 100 pieces of paper with product name written on it. The users were advised to group them together as if they were shopping online and was looking for these specific items within a category.
Open card sorting.
Revealed 8-13 categories. I was able to merge some of these categories such as "bar essentials" and "coffee and tea" into a drinkware & bar essentials categorie, same tactic was applied with "toys", "games" and "kids activities" were merged into Toys & Games category based on users feedback.
Close card sorting.
I invited different users from the previous experiment.
The users were given the same 100 pieces of papers with written product name on it, but this time they were also given 8 main categories tittle and I had a more oriented positive feedback from users.
SOLVING THE PROBLEM!
After combining the user research and competitive analyzes, I came up with the following solution statement.
I believe that building an ecommerce platform that is easy to navigate. Black Ink’s customers will be delighted and engaged while on the site and will be inspired to come back.
I will know this to be true when the number of people visiting the website increases and the amount of online purchases increases.
TIME TO DESIGN.
Keeping the focus on discoverability, I dived into
sketching the user flows.
My initial idea was to create:
-
Sub navigation bar to easily access categories.
-
Filtering system to find products by price, relevance,
and customer reviews
-
Filtering system to find by brand, color, size and material.
It was also important to keep the checkout process as
straightforward and streamlined as possible.
On the product page, I mainly focused on providing
details such as:
-
Additional pictures.
-
Detailed description of product.
-
Customer reviews.
My goal was to aid in making a purchase decision.
VALIDATION TIME.
Users found it was confusing having multiple options for filtering and finding products. They expected to find the same filtering options on the left filtering system (facet) as they found on the center bar, they also did not feel the need for a search bar. Users expected to see a form of progress such as a progress bar during the checkout process.
FINAL ITERATIONS.
I removed all three features, top bar filter, left facet and search bar. Added a progress bar during checkout progress when I digitized paper sketches into Axure, and performed multiple rounds of usability tests.
There was a lot of “copy and typo issues” I was able to iterate on.
Users pointed that they wanted the “continue shopping” button to take them back to the similar items listing instead of taking them all the way back to the home page.
BUMPS ON THE ROAD.
I have learned a lot with this project. Time management was crucial but the most challenging part for me was to create the wireframe and clicable prototype in Axure, which I was learning at the same time.



Product listing page
Product detail page
Tools: Pencil and Paper for Drawing, Axure, Google Drive, Keynote.
Length: Two-week-long Solo Project Working on Research, Information Arquitechture,
Digital Wireframing and Digital Prototyping.
Low fidelity prototype
Product Discovery and Checkout flow


