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.
Process
Research
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.
On the left: sitemap. On the right: shop & check out user-flow exploration.
Wireframes
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.
Mood Board
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.
Mood board for the website.
Design
Aesthetic-usability
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.
To create curiosity, the photos on the news feed are shown only partially, and thus making the transition to the Article page a moment of discovery.
Color
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.
On the Designers page, I leveraged the animations into making it more engaging and interactive than just reading their names. This way, motivating the user to explore it more while at the same time learning about the different designers.
Consistency
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.
On the Article page, a shop icon is always placed on the lower right corner of any photo that has a design piece the user can buy on the site. Once the user clicks on it, it directs to the product page.
Prototype
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.
Takeaways
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.
Credits
Client - Socialrise for Der Berliner Mode Salon
Art direction, Interaction design, Animation - Sofia Neto
Photography - taken from the brand’s websites