Loyalty Co. Prototype

Physical meets digital

What did we do?

We set out to create the best proof of concept demo app out there. The brief came from a talented, well-funded and ambitious start up looking for a beautiful and minimal design. The app also called for a physical element to work seamlessly with the digital experience, so we brought in slick micro animations and transitions for the two to react to one another.

 With all this in mind, we also needed to make sure the design was ‘branded but unbranded’ to make sure potential clients could visualise their own brand working within the app. While the branding needed to be consistent and recognisable throughout, it also needed to be simple enough that it wouldn’t clash with other brands (and clients) that would want to use the consumer loyalty program themselves. The Future Customer took on the initial user experience work, as well as creative direction - and we were happy to take on the rest.

 Three months later, we polished off the UI for all screens, coded engaging micro animations and developed the app on iOS.

Client
Park / Future Customer
Year
2017
What we did
UI Design
Development
Animation
Park Loyalty App New Wireframing@2X
How did we do it?

We had two audiences to think about while designing this app. The first (and most important) were the businesses our client would be selling to and the second were the consumers the businesses would be selling to. As a consumer loyalty app, we wanted to make sure the app was easy to use for everyday, on-the-go use. The app needed to be easy to use and navigate both during business meetings (for proof of concept), and easy to use and navigate for consumers running daily errands. We wanted to make sure the design was subtle and that the animations weren’t disruptive.

We took an agile approach to this project - working in sprints, hosting daily stand ups and weekly sprint meetings. Each week, we’d gather feedback, sign off the previous release and map out user stories for the next sprint - and each week we’d release a new version of the app for the client to QA. For anyone curious, we used TestFlight for this. We ran five sprints in total to get to the final result, which we were all pretty happy with. 

We knew from the get-go this app would feature a variety of animations, from the onboarding screens to subtle movements on icons and buttons. We decided to push the boundaries a bit and hand code animations with Squall for After Effects. Squall is a powerful tool and mirroring app that allows you to create an animation, preview it live on a mobile device, convert it into Objective-C or Swift and then include it in your app. Phenomenal, right?

Loyaltyco Map

Our client has been out and about testing, showcasing and pitching the app to generate interest from clients. Stay tuned for more details and progress! In the meantime, you can take a look through some of the animations for this project here from our very own product designer, Anthony.