The goal was to design a brand new app from scratch. For the first couple weeks I focused primarily on competitive analysis to review what features competition offers, what are the most popular business models, free vs paid features, branding and how each competitor creates their unique value propositions through their offerings.
Based on the findings, I decided on the minimum features that would be required for the app while still introducing some of the more advanced features to capture premium users and relying heavily on the brand, story and gamification to delivery a unique user experience for fitness.
I started by figuring out the type of layout, navigation, button system and rough theme to use by collecting mood boards, references and inspirations, as well as research all of the frameworks to ensure that the features are feasible for development, including any UI related animations and components. First by drawing a simple diagram that show cased all of the screens with features and navigation. Then moved on to wireframing each screen at a time, figuring out the states and capturing all use cases of each feature to prevent any mistakes in the logic while uncovering any missing pieces.
Wireframes was a great guide to showcase how all of the app and feature states are managed, while also providing me with placeholder copy, layout and positioning. All of the user testing was done by recruiting 5 users remotely per every test to record a 10-15min video of them using the app, answering questions and expressing their experience for 3 separate tests in total. To prepare for testing, I designed screens for every single user journey, wrote down user stories and tasks and made a clickable prototype on Invision, where links could be used later for usertesting.com where tests have been conducted.
The main goal with tests was to capture usability issues, copy confusion, pricing plans/costs and value of features. I started design with user authentication screens first and kept tweaking the look and feel until | achieved the desired result. First by designing the layout, buttons, creating icons, placeholder copy and then designing the required states. For icon animations, initial icons were designed and then exported to After Effects to animate it and export it as JSON files that can later be passed to developers and be for use in prototypes.
As the app was going to be ever evolving and improving with with constant iterations and new versions with a lot of complicated features, I had to design a re-usable and easily manageable component system with defined colours, text styles, buttons, bars, tables, views, cells, icon, image assets and more. This enables developers to easily implement the styles, theme and assets into their development build and prevent messy code with clean and defined widgets while also enabling designers to work faster by re-using and tweaking existing components rather than having to re-design them from scratch, which usually leaves the screens with multiple and inconsistent design versions of the same component and create issues in development stage later on.
