Web App Redesign and Development
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.
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:
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.
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.
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.
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.
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.
We then dove into lo-fi sketches to visualize components for on-boarding, dashboard, and admin sections.
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.
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.
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.
Below are examples from the early stages of visual mockups.
We later changed visual directions for a simpler approach.
Testing our visual designs with a thumb reach test to ensure the best user experience.
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.
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.
We mocked up how the badges would appear when receiving multiples and mixed with locked badges.
Below are mobile screens of the final redesign in code.
Special thanks to ZURB for giving me this incredible opportunity and experience, and for sharing with me their knowledge!