Peace out Paradise
Artisanal Pottery in the Digital Age
Background
The challenge of the project was to design a responsive website for a local business, while focusing our efforts on organizing the information in a clear way for both the customers and the stakeholders.
Role
UX Research
Information Architecture
UI Design
Brand Identity
Team
4UX Designer
Timeline
10 Days
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.
Insight
To address Peace out Paradise's problems, we conducted an interview and created an affinity diagram to identify pain points:
Starting a business without a supportive network is challenging.
Choosing handmade pieces from an online platform can be hard.
Business Analysis
n 2020, e-commerce in Germany grew by 14.6%, reaching around 83.3 billion euros. While specific data for online pottery sales isn't available, it's likely affected by the overall e-commerce growth.
Many German potters now sell online due to increased interest, appreciation for handmade items, demand for unique home decor, and pottery as a hobby.
We studied our client, their brand, message, and competitors using these insights.
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.
We identified the main problem to be addressed:
A craft lover needs more awareness about pieces because they want to know how the product looks and feels before buying it.
How might we help our users have a smooth and personalized experience while choosing and buying ceramic pieces so the business will increase their selling?
The problem
Card sorting
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.
Site map
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.
Low-fi Wireframe
We began by creating low-fi wireframes 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:
How to integrate the background picture with text clear on the homepage.
We also identified potential UI problems that could create issues with clarity and usability.
Moodboard
We visually translated our pottery studio philosophy into a moodboard.
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.
The moodboard helped us to keep the style and aesthetic consistent and on track with a client's goals and expectations.
Final design before iteration
After two weeks of intensive design, we arrived at our final wireframe. This stage emphasized the crucial balance between the client's requirements and the user's needs, a lesson learned through thorough research.
Subsequently, I opted for an iterative approach to identify potential improvements and refine the design through user testing.
For instance, I tackled issues on the homepage where the hierarchy and button placements were challenging to understans. To address these concerns, I focused on improving padding and margins for a more cohesive design. Additionally, readability was inconsistent and sometimes compromised by font size.
This iterative process aimed to fine-tune these aspects.
Iteration
By iteratively working on the product, I enhanced the usability and graphic balance of the homepage. Through a series of user tests, I improved the clarity by reorganizing the sections.
I removed the carousel at the beginning because landscape images don’t perform well on mobile devices. Instead, I replaced the images with an illustration of the space. This illustration conveys the studio atmosphere—bright, colorful, and happy.
The top bar was redesigned, with buttons now arranged in the upper right and the logo consistently positioned in the upper left. Additionally, I refined the UX writing and button hierarchy, ensuring they are consistently placed at the bottom and accompanied by clear descriptions.
Final prototype
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:
Can we have more features?
I undertook the development of this page as a personal project, adding it to the website to improve the lack of aesthetic cohesion in this particular page.
To enhance its visual appeal, I created custom illustrated cards and I created a better hierarchy that integrate with the rest of the design.
My Takeaways
How to use visuals to tell a story: I had hard time finding a good UI Design for the homepage, the UX was clear from the beginning, but applying a good hierarchy and clarity with UI elements was a challenge for me. Design value is much beyond moving pixels. Nonetheless, visuals is a powerful tool in promoting a shared understanding among cross-functional teams.
All in all I am a happy designer and I hope I will have more chance to tackle more project like that.