Introduction
Feral Horses is an online platform that allows its users to co-own contemporary artworks by investing in shares (directly from the artist) from as little as £3. Since the launch of the beta platform in Spring 2017 the small London based startup have been able to acquire over 2600 users, have sold 20+ artworks with values ranging from £3-£24 (per share) and have raised over £135,000 on the equity crowdfunding platform Seedrs.
During my product design internship with Feral Horses, I worked directly with the CEO designing customer facing experiences across their platform. I ran multiple design sprints, the most impactful of these being building the feral design system, redesigning the feral landing and redesigning the “My Museum” portfolio section. I’ll explain the issues and design solutions I developed without going into detail on my design process.
The Feral Design System
Introduction
During my internship I developed a design system for Feral Horses, with the live platform being treated as it's foundation. By generating this design system we increased our product consistency and the internal efficiency of designing and building the platform.
What is a design system
“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”
Inconsistencies within the design
The Feral Horses platform contained multiple inconsistencies. I found in a visual audit that there were 36 unique font colours and 57 unique background colours, the typographic scale was nearly non existent as type sizes ranged wildly, in terms of grid layouts the spacing of elements often varied and there were also inconsistencies within the visual form, for example within the text styles.
The Design System
The design system allowed us to create design standards for the platform in the form of documentation, a visual design language and component inventory. This helps to ensure that the product will be developed consistently as standardized components can be used to assemble designs. This system also gives everyone the ability to design interactions, not just designers and it provides developers with a space to assign code snippets to components.
The design system was built in Figma complete with documentation, master components and templates for the Feral team to utilise. I was the owner of the system which meant I continually contributed to updating the design system as it evolved.
The Landing Overhaul
Introduction
The main problem with the landing page was that first time users didn’t understand what Feral did. We wanted to give the landing page a general overhaul, ultimately to successfully explain what we do to first time users.
The Overhaul
Working closely with the CEO I redesigned the navigation bar to give the most important links a sense of hierarchy, updated the header, subheading and illustration to state exactly what the user can get on the page and further explain the unique value proposition, implemented new CTA’s, a featured artworks area, how we work and social validation.
My Museum Redesign
Introduction
My Museum is a place within the Feral Horses platform which contains information about a users portfolio, what artwork they own, what artworks they are selling and how their artworks are performing etc. The area is split up into four separate sections, the users summary, position, active orders and transactions.
The Problem
Through research I discovered the problem with My Museum was how annoying it was for users to navigate to different areas to see information about 1 single artwork as well as optimization issues on mobile. The tables that were in use didn’t translate well to mobile at all, the user had to scroll left and right to see hidden data and actions. My goal was to condense/simplify this information into 1 single page that works well on desktop and mobile devices.
My Museum Redesign
The Redesign
The My Museum area is now split into two parts, the My Artworks section and the Portfolio Summary.
My Artworks
The My Artworks area contains all of the artworks that the user owns in a form of carousel. Once an artwork is selected, a card overlay opens, within the card overlay is information linked to that artwork that, this information was previously scattered in multiple areas behind navigation. This design was built with responsiveness in mind with the ability to respond easily to a change in device size.
Portfolio Summary
The Portfolio Summary contains an artwork allocation pie chart based on what we’ve already implemented, a Summary, a transactions table and an active buy & sell orders table. The summary card contains two sections within it, a text based summary as well as a Performance Chart, in terms of responsiveness this card is large but as it’s in two sections, the performance chart and text summary, the performance chart within the card can be placed under the text summary still containing it in one card. The transaction table shows all transactions in a table that has multiple rows with pagination to view more. The Active Orders table shows all active orders with pagination and a filter that shows buy orders or sell orders. These cards are easily reduced in width to allow a fit on mobile.
Thanks
Thanks, for reading
