june - september 2023
Flaschenpost
auditing switzerland’s largest wine retail and setting the ground stones for a comprehensive and scaleable design system
e-commerce
background
the company.
Flaschenpost is switzerland’s largest online wine retail. It’s been selling wine successfully to users of all age groups with an increase of sales during the pandemic.
my role.
I was hired to conduct a UX/UI audit and to create the first components and setup for the company’s design system in Figma.
methods.
Heuristic Analysis
Information Architecture
Wireframing
Prototyping
Design System in Figma
tools.
Figma
Notion
Typeform
ux audit
ux audit.
I started by collecting all information about the requirements for the project “UX audit”. I used a screenshot tool to capture all relevant screens of the company’s website in the three breakpoints defined by my client.
I continued to go through the four or five most important user flows on all breakpoints and noted down the immediate (potential) usability issues I experienced.
I also kept track of relevant pages and their hierarchy in Notion.
heuristic analysis
Next, I created templates to evaluate each of the two essential user flows my client had described for usability flaws according to the ten usability heuristics according to the Nielsen Norman Group. I used “accessibility” as an eleventh metric.
I created overviews for each of the flows and ranked the findings by severity.
summary.
I then created a comprehensive summary. During my handoff presentation, I used this summary as a guideline for both my client and me, and my client received the summary to use as a starting point for any upcoming product improvements.
design system
wireframing.
In order to create the design system for Flaschenpost, I started by re-creating screens in all three breakpoints from the current live version. The company was lacking up-to-date designs for these screens in Figma. The task was to create versions of these screens with consistent layout specs and consistent colours and fonts and to build a design system based on those new and improved wireframes.
creating a system.
During the process, I built more and more components following atomic design principles as well as an 8-point-grid system.
handoff.
After I finished my work with all required screens, I summarised the changes I had made and presented my results. Fortunately, my client and his team were very happy with the organised and thorough system I was able to hand off.
takeaways.
One of my main takeaways is: Great systems save designers immense amount of time and nerves. Creating those systems requires thought and good documentation and is something I very much enjoy.