NyaCa
UX Animation for an online shopping app
Applications: Adobe XD, Adobe After Effects
Duration: August 2021 - November 2021
Purpose: To exercise skills learnt in the course through a mobile app project
Introduction
I was tasked to conceptualise a brand to be integrated into a mobile app prototype which will be tailored to one of the following themes: fashion, IOT Product service (Smart home devices, etc.), health/medical, fitness, or entertainment. In addition, it is required for the prototype to have at least four distinct sections that are fully developed.
Design Process
Ideation
To tackle the design brief, I first selected the themes that I had the most prior experience with to guide my future design decisions. I selected the fashion theme as I have previous interactions with the user-interface of several online shopping applications. While branding was not yet required at this stage, I produced a rough idea of the app's concept as a base for my sketches and to find some direction when designing the interface. The general theme is for the application to have a more feminine vibe with cute and simple iconography, and the inclusion of a cat motif.
Sketches
Quick sketches were produced as a visualisation for the application's interface with the inclusion of the cat motifs. 4 main sections of the application were created: Landing & Catalogue, Checkout, About, and Wishlist. After taking inspiration and reference from other online applications such as Adidas, Nike, AliExpress, the 'About' section was removed to place all focus on the 3 pages to achieve a polished look within the timeframe allocated for the project.
Low and Mid Fidelity Prototypes
Wireframing and Animating
Immediately after sketching, the sketched interfaces were transformed into wireframes with simple animations on Adobe XD. Due to the time constraints, the wireframing and animating were done simultaneously which led to the creation of a mixed low and mid fidelity prototype. The interactions that were being animated were swiping (page and products) and the product preview,
High-Fidelity Prototype
Moving on from the wireframes, the final animations were created on Adobe After Effects to fully demonstrate the functionality of the application and to replicate user interactions within the application.
NyaCa video demo
Brand Guide
Evaluation
NyaCa, the shopping application, is successful in meeting the requirements at a satisfactory level. Viewing the project in the perspective of a potential user, there are many aspects of the application that must be improved. The elements of the user-interface could be improved to achieve more feminine look and a more professional look. Depth could also be added to some of the elements to indicate the presence of interactivity in these elements (product items, navigation bar). The animation also needs improvement as some are not realistic (item in bag) or are repetitive (transition to pages). Given my lack of experience in designing user interfaces, this project was a visualisation of my capabilities and my grasp on design concepts which can be improved in the future.