UX/UI Design
Fashion Council Germany
Background
The Fashion Council Germany is a non-profit organisation intending to increase the German fashion industry's cultural relevance. They are financed primarily through member contributions and donations but, in return, offer their members events, networking opportunities, mentoring programs, and digital content in the form of webinars, editorial content, as well as research pieces.
The original website separated interviews and news into two different categories. The user research showed that users perceive this as confusing. Their engagement with this section was also relatively low. As a result, we decided to simplify the information architecture and give the different content pieces running heads, making it easy to add new categories like research pieces without cluttering the navigation.
The user research also showed that users base their decision to join the fashion council primarily on existing members' reputation. Therefore, we decided to add an extra profile section for each member.
The event section includes a Download as PDF button. In the User Research, we conducted, we found out that Fashion Agencies or Studios often like to print out Event Calendars to put them up on a wall in their office. To address that need, I included the Download as PDF button as prominently as possible in the upper right corner.
On mobile, we keep the download as PDF button less prominent as people are unlikely to print out the event overview from their phone, and it would take up too much valuable screen real estate.
The left screen shows the landing page with a direct newsletter subscription and a link to the member's section. As a new page visitor, the member's area is often the most exciting place to go, so we included it right on the landing page. The Newsletter subscription is prominent, so the Fashion Council can generate new leads but doesn't cover the full page obstructing the user's navigation.
The interface guides the user through every step of the way to ensure the next step is always the most evident step to take
Error States: Because the interface uses red as a guiding color, error states colored in yellow. Errors are prominent so the user can still identify mistakes quickly while successes are more subtle yet identifiable to keep the elegance of the brand intact
I was also responsible for establishing a digital style guide to ensure components are all designed consistently.
Process
Identifying the Problem Space
Because the website had a breadth of information and pages, I decided to differentiate the user goals between task-related activities that had a specific goal in mind and browsing related activities with no specific goals.
%202-1.png)
%204-1.png)
%203-1.png)
My Role
I was the UX/UI Designer for the project, conducting interview studies, designing the interface, and facilitating workshops with the team. I also developed the Project in Webflow and kept the team up to date on the feasibility and viability of specific features and cost estimations.
Defining the Design Direction
To understand the user's current experience, I conducted a series of user interviews and used those findings to create an as-is scenario map with the team. We also created a to-be scenario map to align on the way forward with the team. Based on these findings, I made a couple of sample screens to define the website's look and feel.
Because Fashion is a very visual industry, I created a variety of styles for the website based on the Typography in their Logo. These styles helped facilitate the discussion and helped in shaping the final look and feel of the website
Content Management and Implementation
I implemented the Website in Webflow, setting up a Complete Content Management System for their communications department and migrated all of the old content to the new website.
Key Learnings
Especially for a visually demanding industry, it makes more sense to start with high fidelity designs right away to facilitate discussion.
Valuable user insights don't always come from asking questions directed to the website or product. Many interesting insights came from asking users about their general workflow for specific tasks (e.g. planning events).
When working on a low budget, you have to be scrappy with user testing. The Fashion Council didn't want to ask their members directly for input without any compensation. Therefore we recruited participants that were acquaintances or friends from the communications team.