To create a brand for a mobile app called How2Life which included an app-specific UX and UI solution for smartphone users. How2Life is a mobile app designed to provide young people with information and resources that can help navigate the challenges faced in this stage of life. For using the app users will be rewarded with points that can be used to redeem real-world rewards in the form of e-gift cards. The app is currently available on the app store and google play store, see test user login credentials below to test it out for yourself.
To create the brand and mobile app experience for How2Life. Included logo ideation, print, video, web, and promotional materials for the app. UX / UI design workflows for the app. Animations and design elements within the app and learning content itself. Visuals from the home screen messaging to the learning content, inspirational imaging, sponsor integrations, rewards, and backend UX and UI management.
Check it out for yourself. Available on both iOS and Android.
Login | jcarson@topgunhq.com
Pass | TestUser01!
I spent several days ideating over designs and different ideas for the concept before settling on the simplicity that is How2life. The design needed to be clean, versatile, distinctive and play well on the many mediums where it would go and be animated within the system. It also had to pass the scrutiny of Steve Osborne, a feet easier said than done :). The logo design included an app icon, an animated icon for loading, a horizontal, and stacked version of the logo in both white and blue versions. Click or touch any image below to see a larger version.
The below print designs were created as promotional pieces. The 11 x 17 was created specifically for the Wingspan pilot group. The QR code took users to a google doc sign up form for pilot users. Makayla character illustration by Matt Mitchell rebel-studio.com
8.5 x 11 Front
8.5 x 11 Back
11 x 17 Single Sided Flyer
The email campaigns for How2Life were all created utilizing Constant Contact and its built in their email builder, for maximum visibility across many email clients.
I created the teaser/promo video utilizing Adobe After Effects in just a weeks time. Chelsey Greathouse assisted in the order of the copy elements displayed in the video. The music track comes from Epidemic Sound.
Built with webflow in just a couple of days time to provide basic information about the app and the reasons behind its construction. Check out the static site at how2life.com.
Many weeks have been spent in conversations (weekly zoom meetings) with stake holders and developers on front and backend to make sure the proposed designs were functional, practical and could be released within iterative phases. Some designs may not reflect the current version of the app. The below designs were created and prototyped within Figma. Click or touch an image to see more.
The below video is a sample taken from After Effects for the animations created for the top information bar within the app. The animations were individually exported with LottieFiles as .json files for the developers to implement. Video includes sound.
The animations below are created with the LottieFiles Animation plugin for After Effects. Learn more about LottieFiles for after effects. The animations are then exported as .json and were shared with the app developer for implementation. The below animations are animated gifs to show the mocked up state within the app. Don't underestimate the power of gamification.
After several rough sketches, whiteboard sessions and discussions with the stakeholders and developers involved in the development, I go to work designing and laying out pages in Bootstrap Studio. I highly recommend a multi-monitor setup for this software to allow for the HTM and style sheets to be on additional monitors. See the Github Pages repo for more pages and details. The live version of the backend software is accessed through a password protected login at https://prod.how2life.com/login. The backend allows for customization of all learning and content elements, messaging, user / account management, organization management, rewards, badges, sponsors, job posting, and reporting features. The backend even allows for the customization of the apps lower main navigation, options depending on the functions the organization or school plans on using.
Note: Many pages were never setup initially to be responsive but plans for full access on mobile was a consideration and in the development pipeline.
As part of the content creation monthly observances would be created that appear at the top of the home screen. Upon touching would link out to an external url for more details about the observance.
The courses built within the app utilize the iSpring Suite. The catalog contained over 100 courses to choose from and would be programmatically released (2-3 per week) as point opportunities to keep users coming every week to earn the available points. Check out a few of the courses below. I was responsible for graphics, animations, interactions, audio / sound design, testing, troubleshooting and publishing. Courses play full screen within the app, browser experience may differ.
The pilots for the app have been successful and the user feedback has been overwhelmingly positive. When it comes to app design don't sacrifice good design for functionality, with today's technology you can have both.
"I liked the look of it, like when you put the different facts on a different card in the gambling section. Absolutely loved the hit me with the facts section. Very clever, very fun"
"It made me more interested in the content since it was visually pleasing."
"Josh I've always liked working with your designs, very clean and functional and for such a complex system it's a breath of fresh air."
