Enroll App Redesign
Summer 2017 Design Internship | ZURB, Inc.
ZURB is product design agency located in Campbell, California. Their company includes a team of designers, researchers, and nerds that help companies design better products, websites and services by uncovering #DesignInsights. ZURB gave me the opportunity to work alongside their team the Summer of 2017 as a Design Intern.
When we were first presented with the project, the understanding was a redesign of the app, Enroll. Enroll is a web application that allows for anyone to sign up and become a user tester. From there, users are prompted to take tests and share their thoughts, feelings, reactions, and experiences about website or app interfaces. Enroll currently has over 100,000 users worldwide.
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:
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.
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.
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.
• Making the web a better place and how to convey to our users that they feel this particular way.
• Exploring Gamification and the different kinds of methods that we can incorporate into Enroll to keep our users engaged.
• Analyzing different ways we can achieve high-quality testers.
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.
Lo-Fi Wireframes
We then dove into lo-fi sketches to visualize components for on-boarding, dashboard, and admin sections.
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.
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.
Prototype
In the midst of many iterations of wireframes, we created prototypes to bring the wireframes into a flow and clickable experience.
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.
Visual Designs
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.
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.
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.
An early idea of incorporating a surprise and delight when the user receives a badge. (Using an old badge design).
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.
Special thanks to ZURB for giving me this incredible opportunity and experience, and for sharing with me their knowledge!
