Antum Loyalty App
Fast-paced project operating on agile sprint cycles to deliver dev-ready UI designs for a loyalty app and website.
The scope of this project was immense for the relatively short amount of time allocated. With only 6 weeks from start to finish, the project needed clear organisation within the team and manageable sprint cycles. The group of 6 UX/UI designers was split into 3 feature teams, each ready to tackle a portion of the total 34 product features across 3 sprints, lasting 2 weeks each. Each sprint would consist of first creating the user flows for each feature, then the lo-fi wireframes and finally developing those into hi-fi UI designs, following the direction of the mood board and creating necessary components along the way. After each key deliverable had been delivered it would be added to the client-facing deliverables pack, where feedback was gathered and actioned before moving forward. Once all specified features were brought together as a whole, the final product would adhere to the experience principles; providing a seamless omnichannel experience, making users feel valued through special treatment, helping users to better themselves by aligning rewards to personal goals, and fostering a social vibe by forging real-life connections.
Each feature team had to tackle around 3-4 features per sprint. Using the highly detailed functional requirements in the brief, knowledge of best practices and logical reasoning work on the user flows started. These laid out the user’s movement through the product, mapping out each step from the point of entry right through to the final interaction. Defining the logic for each feature was vital as it helps to calculate the number of screens that needed to be designed, as well as confirm with the client their expectations of how the final product will function. Once the logic for a feature had been mapped out, lo-fi wireframes were sketched out for all required forms; native app, mobile web, tablet web and desktop web. These wireframes illustrated the space allocation, prioritisation of content, functionalities available, and intended behaviours. It was decided that all this work should be contained within Figma as it would streamline the transition to the final UI design and promote an organised and efficient working environment.
Starting with lo-fi wireframes first allowed for a large number of screens to be laid out with a great degree of agility. This considerably simplified the process of designing the hi-fi UI design. The mood board created at the beginning of the project followed the colour scheme and visual tone of the brand concept; a minimal, clean and modern feel utilising purple as the accent colour and bold imagery to invoke a luxurious impression. This drove the decision to choose a suitable UI library as a foundation for the design system. As screens were designed, components were built into the design system and integrated throughout the teams, increasing efficiency the more it evolved. Despite the smaller teams working individually through dedicated features lists, it was a highly dynamic working style where teams would share progress and collaborate when and where it was needed. The result was a complete translation of the user interactions, beginning to end, into a set of dev-ready screens organised into a comprehensive deliverables pack.
This project was quite a testament to the way that remote design teams can work efficiently if equipped with the correct tools and backed up with solid planning and organisation. With the project lead in Germany, the design lead in Indonesia, the client in Saudi Arabia and the design team split up between the UK and India, it was truly an international effort. This increased the importance of sensitivity to everyone’s working styles and flexibility to overcome inevitable barriers. However, keeping everything within Figma and meticulously following the design systems allows for a great amount of work to be completed with speed and agility. Furthermore, designing within the design system meant the process of localising the UI was also as simple as possible, despite this requiring flipping the alignment of all the components to flow right to left, which is natural for Arabic-speaking users.