iOS
Constraints & Challenges
Since Gimmie is a white label CRM, one main feature was the flexibility for customization. On every mobile or web platform, publishers should be able to choose their own theme color, add or use their own reward categories, use any or all of the gamification elements, etc. The design templates should be basic yet usable and nice even if no customizations were made. As many publishers don't have experience implementing reward programs, the templates should be fully equipped with help information and a great onboarding process.
Design Process
I studied the interaction and interface patterns on each platform by reading official documentation and testing various mobile devices.
The first step in the process was writing/drawing user cases, flows and design ideas. Then I made prototypes with services such as POP, Invision, Flinto or Marvel App.
One of the first iterations, for iOS 6. Designed with two main tabs- rewards catalog and user profile. I chose the carousel pattern for displaying the reward categories because it was a common pattern for many e-commerce and reward program apps
One of the iterations for iOS 7. Designed with three tabs - rewards, profile and leaderboard. After we implemented version one, we needed to add more and consolidate the reward categories. While the carousel was good for browsing especially with a small number of rewards and categories, it wouldn't be the best option if the number of pages increased. Once there were 8 reward categories, it's important to enable users to see all categories at a glance. Also, it was time-consuming to make the swiping transition smooth and perfect.
I solved the problem by exploring different ways to display the reward categories and replacing the carousel with an expandable list. This design pattern increased the space available to show rewards. As the drop-down was placed on the title bar, redundancy was solved. There was more space to add more reward categories if needed by the client.
To help the users learn where the reward categories are, categories list would open the first time the user launches the app or reward page.
Android
We started to develop the Android SDK right after iOS version 1 was implemented. The design process was similar, but since we had the flows mapped out it was a bit quicker and easier.
However, we needed to consider that Android phones have back buttons, and their flat and sleek UI compared to iOS6’s skeuomorphism. At the time many Android apps used different patterns for the main navigation. I chose the standard drop-down menu as there were only three tabs and used the same carousel design as iOS.
I made the UI much simpler and flat and used bold colors as suggested in Android Design Principles.
Feedback & Collaboration
After producing designs for multiple platforms, I put printed screens on a wall for viewing all the designs on each platform, to ensure a consistent user experience. As well it helped to get feedback and ideas from the team by using post-it notes.
