engage app

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

© 2023 by CREA8ME. Proudly created with Wix.com for deeburger darcy.rosenberger@gmail.com

  • Instagram - Black Circle