Jul - Dec '19 Freelance Dutch Coding Company Visit Website

Gripp

Role

Designer & Developer

Knowledge
  • Programming
  • Project Planning
  • Prototyping
  • UX Design

Gripp is an all-in-one CRM and scheduling tool used for managing everything happening in your company, from prospective leads and active projects to employee’s calendars and invoicing. They wanted a new application that employees could use to simply track their schedule and log hours of work. I created the design for the app, specified the API, and developed much of the UI and animations.

Wireframes and Prototypes

After the initial briefing I created the main navigation for the app. Since the app was aimed at quick “set it, forget it” interactions, the timer button became the most prominent item on screen. Starting a timer should be quick and easy: simply open the app and tap Playᐅ to start logging immediately. All dialogs are presented through “bottom sheets” that you can easily dismiss using a downward swipe.

The main screen contains a day schedule, and a running list of all the logged work for the day. One swipe brings you to a History tab, with all Tapping on any of the items brings up a detail view containing the prospective or logged hours, as well as any notes and contact details.

After multiple iterations, the wireframes were turned into fully designed screens. Gripp’s brand colour is used throughout the app in refreshing ways, for example by introducing subtle gradients throughout the app. The card design for logged hours was designed to be pleasing to the eye with subtle shadows and a colour scheme that indicated its status.

Development: UI & Animations

The app was built in Flutter, which allowed for simultaneous development for both iOS and Android. The app’s design is subtly different on the two platforms: cards on iOS cast a subtler drop shadow, buttons on Android contain ink splashes, and native controls are used as much as possible.

Thanks to this project I learned a ton about mobile app development, from proper MVC separation of concerns to layout and animations in Flutter. It’s those animations that I am most proud of: the subtle “timer is running” animation for example, or the custom easing animation applied to all bottom sheets, which give the entire app a more springy character.