E-commerce for “Flat of the Hill”
Information Architecture / Card Sorting / Wireframing /Axure
Solo design project focused on creating an online shopping experience for a local gift store.
What do you think of when you hear “gift shopping”? Are you thrilled and excited to visit a gift shop? Or would you prefer to click through the website and get delivery the next day?
“Flat of the Hill” is a local gift store with a huge variety of unique gifts from Boston-themed souvenirs to candles and dishware. This tiny pearl is located in the most popular tourist travel paths. There is no doubt that when you walk in there you will end up buying something exclusive.
Problem
My goal for this project was to design an inspiring, easy-to-navigate, online gift shopping experience for “Flat of the Hill” so gift-shoppers would have easy access to their favorite local store, without losing the excitement of browsing, and help people find unique and fun gifts.
User Research
Interview Insights
“Gift store websites should be focused on gifts, not on distractions”
“As simple as possible”
“Packed navigation with many small categories with more tiny subcategories, make me get lost in gift store websites”
During the Research phase people shared their feelings about their in-store and online experiences. Actual stores feel more valuable for people because they can touch, see, and smell products and support local businesses.
On the other hand, when they shop online inspiration drastically disappears. Many websites feel cluttered with different fonts and animations that make them feel tired and overwhelmed from the screen.
The Challenge
How can I design an easy-to-browse online platform that will make people feel engaged and inspired?
The Card Sorting begins
If you’ve ever been to a gift shop you have a sense of how it is organized. Honestly, I had a hard time trying to categorize the enormous amount of unique products . I conducted 11 open card sorts using Optimal Workshop to figure out what categories people would create.
The majority of participants created the following categories: bags, jewelry, kitchen, beauty, and pets. Based on the results, I decided to have a second round of Card Sorting, but this time a closed one. I was surprised only by the “Lunch box” item - it was 50/50 split between the “Travel Bags” and “Kitchen” categories. What team are you? 🤷 🍱
Analysis and synthesis of card sorting results helped me to build the Information Architecture and Site map for the website.
Open Card Sorts
Optimal Workshop Results
Closed Card Sorts
How Do the Competitors Do It?
The next step in my agenda was the Competitive Analysis and User Flows. Analyzing competitors helped me during the sketching process, gave me ideas for the main navigation bar, and pointed out some missing points during the browsing process. The following User flow shows the check out process.
Sketching and Testing
Usability testing helped me choose which navigation type people prefer to use the most. I conducted 5 usability tests and I had about 5 different options and only 2 made it for a last round of testing. As a result, I kept Mega Menu, because people want to see all categories and subcategories from the first glance.
Mega Menu
Two Step Navigation
Mid-Fi Prototyping and Testing
At this step, I had a full concept of the project in my sketches and then created the wireframes in Axure. 🤔 The most challenging part was the checkout process. It feels really simple at first, I’ve experienced that process in my everyday life, but creating it from scratch, honestly evoked lots of questions in my head. 🧐
Cart
As I mentioned, the cart was the hardest part in my project. I started from the bottom and it went through constant iterations and changes, based on users’ feedback.
Find a gift feature
During the usability testing people found this feature useful and suggested to change the window size, add steps at different price ranges, and change the color of “Show Gifts” button.
Search bar
I changed the size of the search bar because it looked prominent and distracted users from the navigation bar.
The Solution
Welcome to the online e-commerce “Flat of the Hill” website. The renewed platform gives shoppers the ability to order their favorite items with a smooth 3-step checkout process. The feature “Find a Gift” was my favorite part to design as it works like a randomizer and emphasizes the element of a surprise, similar to the effect users feel in real gift stores.
Follow the Scenario and view my Prototype on the link below.
“ Next week your office will have a yankee swap holiday party. You remember that recently your favorite store “Flat of the Hill” has an option to order gifts online. You know that they have unique and fun “Creature Mug” that is under 20$ . You are going to order two mugs - one for the party, another one for yourself. "
Lessons and Future Steps
1. Communicate with the business owner
This project gave me a chance to briefly communicate with a business owner, get to know their products, and realize how challenging it can be in organizing such diverse items. For the future I would want to interview the business owner and get more details about their in-store organization, local favorites items, and know statistics about their sales and who is their target audience.
2. Simple things are not actually that simple.
The checkout process was an unexpected surprise and took me a while to design. The lesson that I learned - don’t underestimate simple things. Next time I will do more research and sketching to see the whole picture.