The Gamekeeper: A Design practice for a Local E-Commerce
The online purchasing trend is becoming more and more common which negatively affects local economies. For these small businesses to increase their annual sales, they must improve their online presence to be more competitive in the market.
PART I: UX Design
The challenge is to design an online website for a local shop in Amsterdam in two weeks. The focus is to deliver a wonderful shopping experience for users by applying extensive but effective research methods. This project was done within a group of 3 individuals.
We have selected The Gamekeeper, a store on Hartenstraat, as our case study. It is quite a busy store that offers a wide range of board games targeted mainly for adults. The store has a website already but it needs drastic changes to offer a good user experience in online shopping.
1. Empathise
After choosing the store, we did some market research and competitive analysis. We found both direct and indirect competitors to the store where we compared the brands and later compared features on their websites.
The team and I identified Schaak en Go as a direct competitor since it is a similar store in Amsterdam with similar types of products. As indirect competitors we identified Intertoys, Spellenrijk and Bol. The latter options offer a wider range of toys in general (not just board games) and already have an established website with multiple features that facilitate e-commerce.
To continue our research we worked on setting up a survey to collect data from people about online shopping for games. We started a draft by using the Lean Survey Canvas in order to develop a plan and devise the purpose. This canvas is designed to quickly set up a survey in an iterative way. The aim of the survey then is to get to know our targeted user and learn the shopping habits of that user. As a team, we also prepared an interview with 10 main questions and multiple follow up questions to obtain the most relevant information needed to understand user thoughts and feelings.
Trending GoBeyond.ai articles:
1. Best Practices for Managing E-Commerce Customer Service
2. Top 15 Magento 2 Extensions For Your E-Commerce Site
Most valuable insights obtained:
- Board games are popular with millennials who organise occasional game nights with friends.
- Millennials often use games they already have and don’t buy news ones since they find them expensive.
- These millennials also find delivery times not fitting with their spontaneous planning habits; they would like to receive the game in the same night.
2. Define
The research resulted in important data that we transformed into actionable information to develop an affinity map. We started by noting relevant quotes and insights on multicolor sticky notes; differentiating between qualitative and quantitative data. Then we rearranged and grouped the information under headers and sub-headers.
Reading through this map, we were able to identify some frustrations and needs of the targeted user.
To answer them, we developed a few “How Might We” Statements. HMW statements help turning the challenges into design opportunities and set the path for innovative solutions.
Up to this point, we have gathered the sufficient information needed to create a primary and a secondary persona in order to understand our user’s goals, behaviours, experiences and needs. These personas represent the different user types that will test our final product, the website.
The team and I performed a short brainstorm session to generate all our ideas (with no criticism or judgement) around the insights obtained from the affinity map and HMW Statements. This helped in rendering a mind map that connected those ideas around a central subject; our users’ pain points. The sub themes of the main concept focused on 5 main points:
- Expensive and slow delivery
- High game price
- Unclear product description
- Need for inspiration
- More social activity
We later continued to form a Customer Journey map that graphically interprets the storyline of the user’s relationship with the product. This journey map can serve two different strategic roles:
- Current Journey: demonstrates the way users interact before our suggested solutions
- Future Journey: demonstrates the way users could interact after our suggested solutions
We developed a scenario of our user for our current journey where we mention her actions according to a timeline. We also included emotions, thoughts and pain points along this journey. We could then find opportunities that translated into design possibilities explained in the future journey.
We further moved on to developing first a problem statement that precisely describes the issue we need to solve and second a hypothesis that is a prediction of what could prove the success of our proposed solution.
Problem Statement: Millennials who organise occasional game nights need a cheaper and faster way to acquire these board games because they think games are expensive and it doesn’t match their instant planning habits.
Hypothesis: We believe that providing a board game rental service for millennials who organise game nights spontaneously will achieve more customers in the millennial age group, we will know we are right when we see a 20% increase of customers in that age group.
3. Ideate
As a team, we later brainstormed solution ideas that answer our problem stated above. We gathered our solutions and prioritised them in a MoSCoW chart based on 4 categories.
A renting feature for games is our main focus in this challenge. It solves the fact that our user finds games expensive to buy.
I found that a MoSCow is very beneficial at this stage of the process since it filters all the ideas presented on the table and prevents the designer from putting energy into solutions that might not result in the best outcome for the derived problem. It clarifies the specific mandatory features in developing a fully coherent product.
Since we derived sufficient knowledge about our targeted user and our problem and found ways to solve the pain points; it is time to develop the site. We moved on to understand the structure and relationship between all areas of a site through information architecture to later develop a site map.
A site map will help us define our goals before heading to the design process. Arranging the site pages in a systematic and hierarchal view allows us to ensure that the website meets our intended goals and highlights our main features.
I could honestly say that I found this part of the process quite challenging and delicate. At this stage as UX designers, we must develop a good user experience through a focused and an easy to navigate site.
With the site map defined and the user journey developed, it is time to design the user flow. A user flow depicts the path of the user to fulfill a certain task, and by that it would validate our user journey!
In our user flow, we took on some decisions to refine our task:
Laura does not know the game she wants for her game night but only knows for what date she wants it > she checks all rental games available > sorts the products on popularity > filters the product on number of players > selects the game she likes > & proceeds to checkout as a guest.
4. Prototype
The first step in prototyping is sketching !
Drawing the storyboard workflows before diving into digital production, is an efficient way of determining the interfaces of the pre-defined user flow. Sketching low fidelity prototypes saves time by producing quick representations of the interfaces and testing them out to make the proper changes before turning them into mid fidelity.
Once we tested out the paper wireframes, we came across a few missing features that prevented our user to perform the given task. We edited these changes and started producing mid fidelity wireframes on Sketch.
5. Test
Here is the interactive prototype that we designed for you to test !
PART II: UI Design
Keep the client in mind !
After conducting the sufficient research and developing the low fidelity prototype, it is now time to add life to my wireframes. I proceeded into selecting color schemes, text styles and UI elements.
In order to start my design system and UI design, I first defined my brand attributes. I looked into what my client, The Gamekeeper, represents:
Traditional. Cosy. Warm. Authentic. Friendly.
Based on that, I worked on a moodbaord to help identify my design system and text styles.
After a series of trials and experimentation in colours, typefaces and UI elements (cards, icons, from fields..), I finally decided on the design. Check it out here below!
Reflections & Learnings
As a first UX/UI Design challenge, I admit it was difficult to follow the design thinking process without having to jump into solutions. As a person coming from a Landscape Architecture and an Urban Design background, I tend to think directly about solutions to solve the problem at hand. Through this project, I learned to focus on the problem first and defining it properly so the process could result in a better outcome. I also learned to conduct the proper and the needed research to base all my findings on, without making any assumptions.
On the other hand, it was a really fun learning experience. It was interesting to work with teammates from different fields and backgrounds and see what each of us could bring to the table !
