Project
Dunkin’ Onboarding
Role
Sketching
Wireframing
Prototyping
Visual Design
Interaction Design
Tools
Figma
Adobe Photoshop
Adobe Illustrator
Timeline
3 Weeks (2022)
Dunkin' Donuts Onboarding
This is an abstract design approach to reimagine the onboarding experience for a popular brand, Dunkin’. The primary goal was to bring excitement and joy to the initial login and signup process for a world-renowned company.
The challenge
Most onboarding experiences are dull, but it doesn’t have to be. The challenge was to take the boredom out of a typical onboarding experience and create something fun, engaging, and memorable for potential customers.
The solution
To bring the user into a playful experience when they first launch the app, I created an animation where abstract colorful donut shapes move around whenever you land on the login screen. The effect is very eye-catching, and creates a cool, fun experience for users.
Design Details: Login page
The login I created includes round-colored donuts that move in the background as soon as a user lands on the page. Returning users will be able to enter their info and hide or display their password by clicking on the eye icon. New users, can click on the sign-up button to create a new account.
Design Details: Signup
A dark overlay helps create a sign-up page that is clean and easy to use. The bright colors are enticing and inviting for new users. The form is straightforward, allowing any new user to easily create an account.
Ideate: Sketches
I always start my projects off with a few rough sketches, to help me envision what my prototypes and the final design will look like. The ultimate goal for this piece was to create something modern and bold, but fun too.
Ideate: Lo-fi Wireframes
For this brief project, I wanted to create prototypes that could help me envision the user flow and background animation. To achieve this goal, I started off by drawing a donut-shaped icon, duplicated the shape of this icon and changed it ever so slightly to create the illusion of movement.
Interactive Prototype: Design & User Flow
The end result is a playful, modern design that is fun. The user will appreciate the fun take on a login design, no matter how they feel about donuts! I started with a simple sketch and wireframe mockup that included all of the elements necessary for the animation.
See my prototype in action below.
Closing Statements
I enjoyed the work on this short UX project. I honestly just wanted to put a spin on a login and signup screen. Using similar elements and styles gives users the impression that they are using a familiar interface to create an account while also keeping things fresh and new.
