Movement Snack
UI Design & Branding | July, 2024
A strength training app providing simple, convenient, and curated exercises to ease the incorporation of movement into the daily routines of working, sedentary professionals.​ As the UI Designer, I developed the visual identity and mobile interface of the app; visualizing proposed features through Figma mock-ups. The project was completed in 2 weeks.
By Kaitlyn & Silvia
Project Links:
Live App Demo | Figma Wireframes
1.
Movement Snack Overview
Goal
The Movement Snack App aims to help working professionals incorporate exercise into their daily routines, whether it be at the workplace or while watching shows.
Target Audience
-
Working individuals struggling to strength train consistently due to lack of time or motivation
-
Individuals in need of guidance on how to begin their fitness journeys
Brand Persona
Practical, empowering and encouraging coach.
2.
Visual Identity
Aa
Typography
Circular Air Pro and Graphik are rounded sans serif typefaces that bring an approachable, friendly, and casual appeal. They come in various font weights allowing for great visual hierarchy.
Colours
​When developing a colour palette, I considered the psychology of colour, the target audience, and the brand persona. I opted for shades of blue as I believe it best reflected a practical, empowering, and gentle identity. The pop of turquoise also brings energy to motivate users through their fitness journey.
Additionally, I ​selected colours that adhered to the WCAG 2.0 guidelines to increase accessibility in my design and the app.
Illustrations
The Illustrations are simple and playful, leaning into the practical, professional, and approachable tone of the app. They also offer high contrast through their bold line and bright colours, making it easier to read.
3.
Prototyping
Low-fidelity Wireframes
With the project goals in mind, I began creating low fidelity wireframes to map the layout of app components. Creating low fidelity wireframes allowed me to explore different design options to integrate features in ways that are visually compelling and user-focused.​ In the exploration below, I play with various layouts to present dashboard information clearly and concisely to users.
High Fidelity Prototype
Once wireframes were created, I revised the design with the developer to ensure the interfaces aligned with the design brief. I then integrated the brand identity to better visualize the final design of the product. Features were also added in adaptation to developments in the project. ​
Specs
Design specifications were included to facilitate the development process
32px
24px
16px
12px
8px
4.
Design Considerations
​While designing the UI, these were some considerations that informed my design decisions: Hierarchy, Efficiency and Learnability
Hierarchy
Visual components were kept simple to support and emphasize the primary goals of each feature. Colours and font weights were also used to increase visual hierarchy.
Efficiency
Learnability
The use of industry conventions aims to increase the learnability of app features through recognition. This is seen with the use of standard app icons.
Interactive elements, such as buttons and icons, were designed to optimize efficiency. For example, primary actions were placed at the bottom half of the screen to cater one-handed use. Target sizes were also enlarged to ease user interactions and reduce touch errors.
5.
The Movement Snack App
App Features
1
Login
Prompts users to log in to the Movement Snack App with an email and password
2
Dashboard
Shows upcoming exercises and abbreviates version of their data visualization
3
Snack Page
Presents an exercise with videos, tips, and an area to record workout information
4
Filter
Filters exercises based on condition, focus, and level of discreetness
5
Swap Exercise
Allows users to swap exercise based on movement category
6
Confirmation
Updates streak and marks completion of the exercise
7
Profile
The Exercise Log & My Exercise page track users' progress by showcasing exercise history and personal records.
6.
Project & Personal Reflection
User Testing
Eventually, user testing would be a great way to identify if the app is successful in creating satisfying and intuitive user experiences. Likewise, it could reveal pain points within the user journey, helping reveal areas of improvement with the user interface
Figma Proficiency
My goal for the project was to improve my Figma skills by familiarizing myself with its features. Whilst building the wireframes, I made efforts to create a design system using various Figma tools, like components, variants, and local styles, to facilitate the creation of icon libraries, the incorporation of styling, and the standardization of user interface elements.
Branding Practice
My second goal for the project was to improve my graphic design skills by exploring brand identities. I was able to achieve this by developing a colour palette, defining the typographic treatment, and curating a style that reflected the goals, purposes, and vision of our app. Given more time, I would have enjoyed the opportunity to design a logo, create my own illustrations and icons, and refine the UI, including the navigation bar.