Interning at Feral Horses; the Art Stock Exchange Platform

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.

Design System Overview
Design System Style
Design System Components
Design System Organisms

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.

Original Landing

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.

Overhauled Landing

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.

Original My Museum

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.

My Museum Redesign

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.      

My Museum Overlay

Thanks

Thanks, for reading

Made with 🤍 + 🍺 + 

Email   Medium   LinkedIn   Résumé