Case Study — E-commerce
Challenge
Some local shops need some improvement in an online presence, which can help the business as much as the physical location. An e-commerce website is often the best way to promote the shop, as search engines do support local businesses.
The challenge of the project was to design a responsive website for a local business or professional, while focusing our efforts on organizing the information in a clear way for both the customers and the stakeholders.
The name of our team was Cream Colored Ponies, and I was in a group with Alexander, Denise and Gabriela.
Our client
Our client is a pottery studio called Peace out Paradise, it’s a big studio in the middle of Kreuzberg, Berlin. Their biggest offer is a large space where potters can improve their skills and just spend some time relaxing while being surrounded by other artists. In Berlin, there are not really other places like this one, so the main characteristic of this studio is the calm and peaceful atmosphere. It’s quite new, it opened in 2020, and it’s still evolving and creating new things.
Research
We started our journey with a secondary research about the pottery market, we discovered that the demand for pottery expanded in the last year. This growth is attributed to various factors: increased interest, appreciation for handmade items, demand for unique and personalized home decor, pottery as a hobby.
As a beginner potter myself, it was hard to separate what my need as users were with the needs I had as a designer, but having a good overview and knowledge about pottery myself, speeded up the research and the analysis because I knew where to find the data, without struggling too much.
We started to study our client, their brand attributes, message and value, which later we used for our moodboard. With these insights, we prepared our interview for our client and our analysis of direct and indirect competitors.
During our analysis, we noticed that there are few studios that offer a large space, and typically, studios with an e-commerce presence tend to have only one potter member.
We believe that having a shop with multiple potters involved and a collective that organizes it could be a significant advantage for young potters, and a potential market worth exploring.
Based on this understanding, we conducted an interview with Peace out Paradise business to address their problems and provide clarity on their website.
We then made an affinity diagram to help us to establish some pain points:
- Ceramic classes and kiln services are the biggest income for a pottery studio
- Home studio needs a lot of space and organization, that’s why having a calm and nice space where to go is important
- Buying ceramics online stops a lot of people because they are afraid they will break, and they prefer to choose their pieces at the pottery market, they would rather choose a pickup option if they could
- It’s challenging to start a business without a supportive network in place
Narrowing down our problem
After conducting a dot vote, we identified the main problem to be addressed:
“Would be nice to have the chance to sell my pieces, because there is no enough room in my apartment anymore, for new pieces, I got enough, and I don’t know what to do with my new creations”
Based on this, we created a user persona who is an intermediate potter with a passion for pottery but lacks the capacity to sell her ceramics in local markets. She requires a platform to assist her in this regard.
The user journey is based on her experiences over the past year, where she attempted to boost her business but did not achieve the desired results.
With this approach, we have formulated our “Problem statement” as follows:
A pottery enthusiast needs another way to sell her pieces because selling them personally at local markets is not a feasible option.
And our “How might we” statement as:
How might we assist the pottery enthusiast to sell her ceramics?
It was a challenging point for us to navigate the constraints in our brief and balance the insights from our interviews with the original task.
We realized that our persona is more inclined towards selling pottery rather than buying them, which could be a potential feature rather than a traditional e-commerce platform. In the graphic below, we have attempted to represent how we will address the root problem.
As part of our webshop design process, we started our ideation phase, where each team member brought eight different ideas. We spent one minute developing each idea before selecting the most valid ones. We then used our knowledge of information architecture to understand how users would interact with our webshop and categorize its elements.
Ideation
We conducted a card sorting exercise, where we asked users to sort categories we labeled on post-it notes to understand how they would categorize elements in our webshop.
Based on this feedback, we created a site map, incorporating changes to improve user flow and navigation. We also defined content types and organized them into clear categories for our e-shop.
The User Flow
We created a user flow that shows the steps our users would take to make a purchase on our webshop. The user would start by opening the main page, then clicking on the shop icon in the menu. Next, they would select the category of pottery they are interested in, view the product photos, and select the desired product and quantity. After that, they would click on the ‘buy’ button. At this point, the user would have two options: either buy other products from the menu and category page, or proceed to the checkout process.
Moodboard
After finalizing our flow and function, we visually translated our pottery studio philosophy into a moodboard. We then conducted a survey to see if users would feel the mood in the way we intended it to be.
We then conducted a survey to evaluate if users perceived the intended mood from our visual elements. Based on the moodboard, we defined our color palette, applied the 60–30–10 proportion rule, and identified which colors would have a bigger impact on our website. This allowed us to achieve consistency in our user interface.
Prototyping
We began by creating low-fi sketches to quickly visualize our flow and how we wanted to present our process in the user interface. We then translated these elements into mid-fi prototypes and conducted quick usability tests with users to gather feedback and improve clarity.
Some of the feedback we received was related to certain functions:
- The login button that was not easily integrated with the rest of the elements on the second screen.
- Another concern was how to make the background picture with text clear on the homepage.
- We also identified potential UI problems that could create issues with clarity and usability.
Final Deliverables
The mood board helped us refine our UI and user flow, resulting in a clearer understanding of the screens we needed for our final High Fidelity Prototype for mobile.
Below you will find the final Hi Fidelity Prototype for mobile:
We also adapted our prototype to a website version to explore responsive UI design.
Next Steps
In the future, we may consider adding a login setup for memberships, as our user persona indicated a desire for personalized experiences and exclusive content.
Key Learnings
I am proud of the final result of our High Fidelity Prototype! It showed all the hard work that we put into the project.
Through this process, I learned that paying attention to details is crucial and contributes to a more responsive design. Iteration and testing at the high fidelity stage are essential for success, and information architecture plays a key role in achieving responsive design.
I hope you enjoyed our work!