Exinity

As an innovative wealth management solution helping millennials in emerging markets achieve financial freedom, Exinity World offers a mobile first experience to trading for beginniers and advanced users alike. 

Responsibilities

 – Design system
 – Visual design
 – Interaction design
 – Art direction
 – Iconography
 – Typography

Joining the UX team at Exinity as their first designer with visual design experience, my role could be split into three key objectives: better develop aspects of product’s design through the various product development teams, develop a design system alongside evolving visual design, contribute to the UX team’s on-going work.

A.   Identifying opportunities to:

1. bring together UX, Product Management and Engineering teams design understanding with a single point of reference
2. reduce design and development overheads by identifying duplication of effort and extraneous assets
   
3. improve communication of needs between Product Management, Business, Engineering and Design through the collabarative development of a Design Brief
   
4. develop and motivate buy in to the design system and communicate its progress to Product Management and Engineering teams
   

B.   Working with the design system offered me the opportunity to:

1. identify the core principles of design for Exinity
2. offer flexible and scalable interaction models by identifing and addressing design issues such as:
   • accessibility
   • visual structure
   • typography
   • colour understanding and management
   • iconography
   • UX copy
3. bring visual and interaction design inline with the Exinity brand vision

C.   Offering support to on-going UX work progressing the product by offering solutions that:

1. communicate complex concepts clearly, quickly and simply
   
2. explore potential new features with ideation sessions and feature mapping
3. address pain points through data analysis, user interviews and testing to iterate solutions
   

Evolving the Design System

By inheriting a design system that had become inefficient, cluttered and confused due to it’s rapid expansion, I found both design and development teams struggled to make effective use of components and design patterns.

• working with engineering teams to understand their wants and needs from a design system
• understand pain points in the current system from development and design perspectives
  
• identifying best practices of market competitors
• explore potential optimisation of current components and design patterns and where visual polish could be applied

Analysing font use

Addressing font use was a primary concern after identifing the potential to not only introduce a clear typographic structure but also significantly reduce overheads for both design and development.

The inherited design system contained 3 fonts with 36 documented, 7 depreciated and numerous undocumented font variations and required a duplication of layouts for iOS and Android.

My proposed font system reduced font variations to six across two fonts for both iOS and Android, removing the need to duplicate layouts and giving a simple, clearly defined set of fonts.

This new system aimed to maximise legibility by addressing short and long bodies of text seperately, as was considering the use of numbers – quite handy for a finance app.

Colour use considering accessibility

introducing a inventory and thorough of interelational aspects of colours throughout the design system, ensuring not only that primary text and interaction colours were WCAG AAA compilent against the background but also, where possible, were at least AA complient between colours.

This was achievable by re-evaluating exisiting colours and reducing the large number of confused colours to a clearly set out set key colours defined by their use. This saw a set of 10 greys instead set out as three distinct text colours, three UI tones and a distinct key action colour.

Clear interaction points

By introducing rules around where and how colours are used, it was possible to improve user confidence through clarity of primary actions.

Introducing visual structure

Lacking any framework around which to layout pages, an introduction of a simple grid system improved scalability, visual rhythm and page structure.

Outcomes

Lacking any framework around which to layout pages, an introduction of a simple grid system improved scalability, visual rhythm and page structure.

Comparison

Design System

Built in Figma, a complete set of flexible, yet robust components comprehensivily documented in ZeroHeight. 

Developed through an iterative process, each component evolved through exposure to user testing, developer feedback and continued use by the UX design team, the system allowed for rapid prototyping by providing almost complete designs to test from.

Design System development

I provided detailed rationalisation and progress updates to stake holders, Project Management and Development teams at regular intervals.