Leah Callahan Design
Leah Callahan | Designers
down arrow
down arrow

Enroll

Web App Redesign and Development

enroll

The Process

For 14 weeks we dove into the challenge of reworking Enroll’s experience to add even more depth to its purpose. Our process starts with opening up the problem, exploring crazy possibilities, and then closing down the project and narrowing our opportunities down to realistic strategies.

Analyze

Lifting off with Enroll, we dove right into a web audit where we analyzed the current flow of Enroll — from the Marketing site, through the onboarding process, the dashboard layout and taking a test experience. We researched competitors and their methods of informing and encouraging their users to become better testers.

Old Enroll App Design:

enroll

Define

After analyzing, we entered the needfind stage, where we found the vision of Enroll through experience maps that focused on the big picture of Enroll — making the web a better place.

Experience Map

Discover — learning about what Enroll is specifically.

Clear expectations — the "ah ha" moment and understand the clear expectations that Enroll sets for its users.

Exciting narrative — keeps the user engaged and excited about being apart of Enroll. It provides them reassurance that they are making an impact and helping the web while staying engaged with gamification.

enroll

Personas and Journey Maps

To help grasp who our users are and what they do, we created personas where we learned what type of users we want to be involved in Enroll and what type of users may become roadblocks. Along with learning about our users, we created journey maps for each persona to dive deeper into how they each would experience Enroll from first signing up, down to their own outreach for the site. ​​​​​​​

enroll
enroll
enroll

Opportunity Sketches

We continued opening the project up through opportunity sketches — where we explored ideas of making the web a better place, concepts on gamification, and how to obtain high-quality testers.

enroll
enroll
enroll
enroll

Ideate

Within the Ideation phase, we strengthen our opportunities into concrete suggestions for the redesign of Enroll.

Ideas include a point system to incentivize users, an onboarding guide, a messaging function to collect user data, and social media connections.

enroll
enroll
enroll
enroll
enroll
enroll
enroll
enroll

Lo-Fi Wireframes

We then dove into lo-fi sketches to visualize components for on-boarding, dashboard, and admin sections. ​​​​​​​

enroll
enroll
enroll
enroll
enroll

Hi-Fi Wireframes

After refining our ideas in ideation sketching and story building, we began hi-fi wireframes. Throughout our wireframe process, we completed user testing in order to validate and reflect on our design decisions.

enroll
enroll
enroll

Content Writing

With a redesign, came new content as well. We examined different personalities and then carefully crafted our messages with humor, lightness, and a bit of sarcasm.

enroll

Moodboards

Explored a range of styles, through creating five different moodboards. Each Moodboard displays a cohesive approach to imagery, iconography, typography, and color. We decided on the moodboard "ZooKeeper" which shows a minimalistic design that will keep users focused on the content before them. More detail and attention are within the achievements to add to the discovery and satisfaction of the user winning.

enroll
enroll
enroll
enroll
enroll

Visual Designs

Below are examples from the early stages of visual mockups.

enroll
enroll

We later changed visual directions for a simpler approach.

enroll
enroll
enroll enroll

Testing our visual designs with a thumb reach test to ensure the best user experience.

enroll
enroll
enroll

Badge Design

Branching off of mood boards, we crafted, named, and sketched 100 badges. The badges are broken up into 5 categories based on how a user earns the badge. Each category depicts a theme within the badges for that category.

enroll
enroll

We explored three different styles of badges — monochromatic, silhouette, and cartoon. We chose to go ahead with the cartoon style, due to its adaptability and the vibrancy it would bring to the app.

enroll
enroll
enroll
enroll
enroll
enroll

We mocked up how the badges would appear when receiving multiples and mixed with locked badges.

enroll
enroll

Code

After finding our creative direction, we quickly brought our designs to life through front-end code, based off of Helio styles and components. This included HTML, CSS, Sass, JavaScript, and CSS animations. From there, we were able to create a coded style guide complete with repeated visual patterns and different components used throughout the Enroll site — making it easier to build out the rest of the site.

Below are mobile screens of the final redesign in code.

enroll
enroll
enroll
enroll
enroll
enroll
enroll
enroll
enroll

Special thanks to ZURB for giving me this incredible opportunity and experience, and for sharing with me their knowledge!

down arrow
down arrow