Brief & Branding

The brief for the project was to create a custom marketplace platform that gives fashion designers a place to sell high-quality, unique and ethical  products, and a means for people to view and buy them. I had to be attentive to the financial, ethical and corporate fabric of the Alterist brand. A major aim, for example, was to avoid the often DIY appearance and reputation of upcycled fashion marketplaces online (e.g. Etsy).  

After studying the style and features of Dover Street Market, Raeburn and Martine Rose's sites, it became clear that in order to
appear as both non-conformist and contemporary as well as:

• Persuade the lucrative high-fashion customer that their products are appealing

• Convince buyers and the industry that sustainability is important and can compete

• Ensure the site can sell products easily, a move that would allow it to be attractive to prospective and established designers who may want to get involved
  

the interface would have to be clean, modern and easy to use.

Site design

After my brief with Altruist we collectively decided the following decisions were important:

White space

This allows quality content to breathe and there is a strong trend in high-end retail towards minimalistic interface design.

Interactive animation

In order to give the interface some life, animations were to be used in a number of capacities.

For the designer images on the homepage, upon mouse hover, the image scales down, with a delay on the return, creating an enjoyable way of experiencing the featured designers.

Typography

Through discussion of a number of sans-serif fonts, Inter was chosen by the creative director as the standard typeface for the site. It has good readability for smaller text elements as it has a tall x-height, but also has a strong, professional presence when used for headings and titles thanks to the large number of weights within the family. It’s variable, widely recognised and the style is a very popular sans-serif as it was specifically designed for computer screens.

Tempos Roman Mono, was introduced as a second typeface for the brand to diversify its appearance and to complement its dynamic, anarchic and contemporary brand vision.

Features: no star ratings

No star ratings were necessary as each item was unique, handmade and one-of-a-kind. It also shows clearly that their items are not mass produced and cheaply made and this tool, often used by fast fashion sites, triggers the user to question the quality item prior to buying. The lack of rating contributes to the exclusive branding, distinguishing Alterist from platforms like Depop and ASOS.

This is also an ethical decision as it takes pressure off the individual seller as Alterist acts as the quality control for their products.

Alterist is therefore taking the same approach as Ssense rather than ASOS, Ssense being one of the top online marketplaces for high fashion where buyers don’t have to question whether there is quality control as, besides from the high-fashion respective pricing, all the products are under the trusted Ssense umbrella.

Usability

Looking at successful fashion marketplaces, the main function of their platform is to direct the viewer to the clothing, alerting them to the value of the brand’s products and sustainable vision without slowing down the sale process.

This is achieved by continuously executing a smooth user experience throughout the site, which includes:

• Using large, recognisable buttons, icons and brand-relevant imagery to lead to clear and predictable destinations

• Ensuring there is a clear route from entering the site to completing a purchase and beyond

• Making sure that the systems in place are all working in tangent with one another (covered more in the development section later on)

A large part of the design of Alterist focused around the experience of the designers that sell on the platform. They needed an interface that gave them access to the back-end systems so they could manage their stock and orders through their personal login. The usability values listed above were ever more required here, as a lot of the success of the platform depended on how easy it was for users to control their seller profile. The dashboard is very simple, in keeping with the rest of the platform, creating a functional route for both buyers and sellers to handle their administrative processes.

Development

UX

The UX development was fundamental to the smooth functionality of the site. From initial discussion with the Alterist team, the screens were written on post-it notes to create a paper prototype, from which the site was built as a skeleton within Webflow with all the buttons functional to create a fully working prototype. As is visible in the image of the Webflow interface below, the left-hand side of the interface includes the pages of the site, which was translated from the paper prototype.

This prototype was then tested by friends within the fashion industry to test the product with those who are well-versed in the world of online shopping. From this, responses were handled to develop the prototype further. Issues that came up through this method of user testing included:

• In the filter section of the shop and designers page, beforehand there wasn’t a ‘confirm filters’ button which left the user confused as to whether the filters had been applied or not. Even though they are applied automatically it is important to have the reassuring feedback of pressing a button to confirm a task.

• Bringing a ‘top picks’ section into the homepage. The test group wanted to immediately see new or exciting products that are handpicked by the Alterist team. This not only gives a chance for featured designers (giving Alterist another potential source of income) but also gives the user more content more immediately, something that came up frequently within testing.

• Functional considerations for the seller's stock management. There were functions missing such as selecting all the items as opposed to having to select them individually, as well as small things like including the category type in the information on each product row.

Platform custom build

Although the development was handled externally, I wanted to have the limitations of the web during my design stage so I decided to design within Webflow. Not only did this show the automating capabilities of HTML and CSS in real time, but also responsiveness to any screen size is a much more tactile experience using this technology.

Using viewport width and viewport height for sections, images and even text elements brought a whole new idea of responsiveness to light that was directly visible during the design process. Creating a platform that is as operable and visually enjoyable on both desktop and mobile devices is now standard in our mobile-heavy world, and I wanted to utilise the right tools to achieve this target.

This also narrows the room for error during development, taking the guessing game away from the handoff with the values of all parameters clearly visible. I was constantly in conversation with the development team throughout the process of building the platform, and the accessibility of using this method was really appreciated with the coders.