FastApps Mockup 2

UI Case Study: FastApps

FastApps is an aggregator of over 800 back office tools to provide real-time data to startups, aggregators and venture capitalists on a single platform.

Challenge

To take the current FastApps web design to mobile

Research

1. Data Visualization Best Practices

  • Primary colours
  • Maximum of 3-5 colours
  • Contrast, particularly for users who may be colour impaired
  • Monochromatic colour scheme consisting of a maximum of four shades for sequential data
  • Avoid overlapping shades of colours that have similar saturation levels
  • No traffic light colours except for benchmark purposes

2. Reviewed FastApp's existing web tool and evaluate how data visualization can be improved based on best practices

  • Not enough colour contrast, which worked against designing for accessibility
  • Pie charts not the best way to compare between different groups; bar graphs are a better choice
  • Colour palette did not fit the brand identity and desired mood of the app: cheerful, friendly and secure

Design Inception: Colours

Dashboard

The client had an existing colour palette that I retained for the dashboard background colour, since the blue did an excellent job of conveying professionalism and trust.

Data Visualization

When it came to data visualization, we presented the client with three choices:

  1. Existing colour palette that included green and red — traffic light colours that weren’t ideal for data visualization or designing for accessibility
  2. Highly contrasting colours that avoided traffic light colours to maintain data objectiveness unless intended otherwise
  3. Monochromatic colour scheme based on one of FastApp’s blue colours
Proposed Colour Palettes
The Verdict

The client liked Option #2 as they felt that it was aligned with the bright, cheery mood that they wanted to go for.

Design Decisions

1. Splash Screen

  • Designed with the recognizable isometric look of FastApps
Onboarding

2. Sign In Screen

  • Icons darken and text style is changed when input field contains data
  • Login button is filled when the user enters their credentials
Sign in
Sign in with credentials startup

3. Iconography

  • Icons inserted wherever possible to liven up the mood of the app and bring in a gamification vibe

Navigation Bar: Startup

Nav Bar_ Startup

Navigation Bar: Venture Capitalist

Nav Bar_ VC

4. Data Visualization

  • Colour contrast to allow a user to easily draw comparisons across different variables
Risk Account Page

Style Guide

Style Guide – 1 Page

Conclusion

The client was very happy with our work. In terms of the UI, the design language nicely rounded off FastApp’s UX on mobile:

  • Splash screen that retains the existing isometric style of FastApps
  • Colour palette that conveys professionalism, while also allowing the app to look bright, friendly and cheerful — suggesting that data can also be fun to look at!
  • Designed for accessibility with sufficient colour contrast
  • Plenty of icons to liven up the mood and bring a gamification vibe to the app

Epilogue

FastApps was very happy with the design language. They particularly loved the brightness and freshness of the colours, and adopted the style guide in their subsequent projects.

Last updated: October 27, 2019

Selected Works

NestReadyUI/UX Design

Javelin SportsUI Design

FastAppsUI Design

Tours of the 6UI Design

MyINUX Design

The Little PaperUX Design

contact@janicekong.com

linkedin-3-32 (1)

© 2019 Janice Kong. All rights reserved.