Der Berliner Mode Salon
Der Berliner Mode Salon is an initiative to promote the best of German fashion design and photography. They had quite a simple website and were looking to revamp its image, create a cool news feed to push articles, editorials and events, while at the same time selling the design pieces presented.
The project length was only 2 weeks and I was working alone, so the time for research was quite short. Most of it was spent on market research, analysing their previous website and the designers they were representing.
Sitemap and User Flows
The main UX challenge was to intertwine the news feed with the store, while at the same time having a UI that lets the photography and design pieces speak louder and set the tone. The interface needed to be versatile and work well with the styles of all the different designers represented on the site.
The sitemap was quite clear from the start and the user flow that required more attention was the shop & check out one. There were several possibilities for the user to arrive at a product page and they all needed to be accounted for.
Because of the project’s timeframe, I sketched low-fidelity wireframes and once I was satisfied with the exploration, I then jumped to Sketch to try out the ideas.
A mix of elegance with unorthodox was the genesis of the design language and tone of the project. It needed to feel like a fashion website and represent their ambition to push the limit while, at the same time, being refined.
The aesthetic of the site is a lot about curiosity and discovery. Its navigation is almost the same font as the body of text, being distinguishable by its placement on the page and by the fact that it is static.
Fashion is in constant movement and since so many different designers are represented on the site, I decided to make the whole design in black and white, leaving the color to be injected from the photography only.
To keep the user experience easy and the interface clear for the user, the navigation is always positioned around the page, clearly separating its different levels, and the number of fonts is kept to a minimum. All animations and transitions are consistent throughout the pages and all icons on the site follow the same design rules of line thickness, color and corner radius. The pages are designed following a responsive grid system which maintains the aesthetic throughout devices.
I prototyped the page animations in After Effects were I experimented with transitions, parallax and movement of the different elements in and between pages.
I constantly asked for feedback throughout the process which helped me to clarify steps in the user experience, but unfortunately, I didn’t get the opportunity to do any user testing because the project was killed unexpectedly.
Coding and Testing
I honestly don’t know how this was to be built or tested because the project was killed before the client ever started to build it. I was hired as an off-site freelancer, told to only focus on the UI/UX and not to worry about the coding of it.
As I was doing the page animations, I asked some developers unrelated to the project for feedback and if the ideas were feasible. This helped me to make decisions on which direction to go.
As an Interaction Designer, I like to work closely with developers, so the process on this project wasn’t ideal for me. Because this was remote work for an agency and I had no contact with the end client or their users, sometimes it felt like designing in the dark… This all made for a bigger challenge that was exciting to tackle and I learned to be more self sufficient when not all the information is immediately available.