Engage App
Brief
From November 2018-January 2020 I worked on the UX/UI for a learning app named Engage as part of my CareerFoundry UI for UX Designers Fundamentals Course. This app helps busy people tailor their study plans to their needs with: community building tools, customizable study plans, direct calendar access, and reminder notifications.
​
Problem Statement
Building healthy exercise habits can be difficult and intimidating. This responsive web app helps people make a lasting change with schedule assistance, curated routines, and interactive guides. The feel of the app should be easy, informative, and fun.
​
Tools Used
Figma, Balsamiq, InVision, Adobe InDesign, Adobe Photoshop, Adobe Portfolio.
Moodboard
I created a moodboard on Behance to organize design inspiration, color theme ideas, and visual direction. I consulted the requirements of the project brief, where I found brand guildelines including the colors orange & black, and an easy, informative and fun style.
I worked with these branding requirements to flesh out the vibe of the app, which was refined and re-iterated in the low, mid, and high fidelity wireframing processes.
https://www.behance.net/collection/174153463/Fitted-UI-01
​
Low Fidelity Wireframes
I used Balsamiq to begin ideating composition, link placement, information architecture, and functionality by creating low fidelity wireframes. I took a mobile-first approach to designing this responsive web app to ensure that the most vital elements and functions could be accessed in the smallest necessary screen space.
Mid Fidelity Wireframes
Refinement included improvements to interactive prototyping and visual design with improved information architecture, more defined fonts, icons, and spacing, and a 12-column system.
​
​
​
Style Guide
Major improvements made:A style guide was created in conjunction with the high fidelity prototypes to assist in future development of the app. Hand drawn icons, custom buttons, and color schemes can be explored here.
Hand-crafted Icons
Next, I created a collection of pixel-perfect icons in svg format.
High Fidelity Wireframes
After mentor consultation, review, and feedback cycles - the new polished prototypes were ready to be finalized.
​
Major improvements made:
Simplified color scheme
Improved text readability
Improved logo design adding white stroke to set it apart from background
Search results as a numbered list correlating to map pins
More functional field error notifications
​
