Firle und Franz
Ecommerce Website Relaunch
Project overview
“Firle and Franz” is a sustainable clothing store located in Ravensburg, Germany. The store offers fair produced fashion for sale. In addition, Firle and Franz operates its own sewing studio where unique pieces and fabrics in bright colors and patterns are created. The existing online shop is set to be relaunched and optimized with a new point-of-sale system.
Goal
Creation of an easily navigable online shop that can compete with other sustainable ecommerce websites without losing the personality and character of the business and the story behind it. Integration of various media and channels to create an overall coherent visual language.
Role
UX & UI Designer, Visual Designer, Half of the team
Tools
Adobe Creative Suite, Miro, Figma, WordPress WooCommerce & Divi
Duration
July-November 2022
Target audience
- Women between the ages of 25-55 living in Germany with a stable, higher income
- Interested in a sustainable lifestyle, ecological living and nutrition
- Educated and pay attention to fair wages and good working conditions when buying clothes
- Often a desire to raise awareness for climate protection, accompanied by personal commitment to the issue.
Information architecture
Under my responsibility, the information architecture for Firle und Franz’s online shop was created with a focus on other competitors to ensure that they can compete among renowned ecommerce shops.
Wireframes & UI
While the category page was implemented according to the wireframe, we decided to align the product photos on the left side for the product detail page, so that users can immediately see that there are multiple views available for the product.
The customer reviews and product recommendations have swapped places to position the reviews more prominently and visibly, possibly generating more reviews in the process.
(The effect remains to be seen)
Visual Design
The logo was already set, but the rest of the brand identity was allowed and should be visually reworked. Firstly, there was no consistent visual language. Previous advertising materials and the (old) website used multiple fonts, elements, and icons that were not consistently used and didn’t always match each other.
So I created a small visual guide for use on the website and other media (especially social media). The main colors were derived from previous advertising materials and were adjusted in saturation as needed. The overall look is inspired by the physical store and their fabrics, which are seen as very colorful, lively, and cheerful. The use of colors is limited to a maximum of 3 per graphic, while the abstract elements are used to attract attention, and the icons are specifically tailored to the themes and values of Firle and Franz.
Learnings
On the one hand, this project was my first concrete online shop, so I was able to gain knowledge about WooCommerce as well as the structure of products, product pages, product carousels, and the general layout. On the other hand, we strongly miscalculated this project due to the effort involved, as a more complex site like an online shop also comes with greater technical challenges. The development of the site was mainly the responsibility of the second team member, so I was more supportive in the implementation and development, with my main tasks previously being in the concept, UX, and UI design.
Nevertheless, there were also technical tasks that needed to be solved under my responsibility without compromising on usability or design. User tests provided helpful insights that contributed to improving the shopping experience.
Overall, working with Firle and Franz was very warm and pleasant. As a result, an online shop was created with which all sides are ultimately satisfied. Since further advertising measures are being waived, concrete improvements (click and purchase numbers) still need to be observed.