Key Definitions
There are different types of celebratory states Confirmation, Context and Celebratory.
Celebratory state: Used to celebrate milestones
Confirmation state: Used to confirm UI interactions
Context state: Used to give context within their journey
Identifying gaps
While doing an inventory of the current Zillow Home Loans experience I noticed that we did not have well structured and defined Celebratory Success States incorporated into the designs. We could not leverage our design system because those components did not exist.
Examples of current Zillow success states
Proposing Project
I created a proposal document to get alignment and the green light from stakeholders. I iterated on the proposal until all the Stakeholders agreed on the goals and vision for the project.
Stakeholders: Design System, Content Strategy, My Design Manager
Why it matters
Peak end rule
The peak end rule suggests that humans gauge their overall experiences by the most intense part and the ending rather than the total sum of every moment.
For product design, that means that creating huge positive peaks can transform an ok experience into a memorable one.
🏆 PROJECT GOAL
Improve engagement by users throughout Zillow products by incorporating celebratory success states.
Key users
Zillow end users
“Congratulate and acknowledge me when I complete a significant task, but make sure the moment is appropriate and not distracting”
Designers & Content Strategist
“Make it fast, and easy to drag and drop into my projects, but provide context so that I ensure I'm using the framework correctly”
Competitive analysis
Example 1: Tier system
We were inspired by Uber and Intuit’s Tier system for celebrations and illustration. We really liked how they broke up a component type into tie visuals and spacial representation to the component type.
Example 2: Bold brandable
Mail-chimp uses the monkey high five to take over the whole screen to celebrate the completion of creating a campaign. Asana’s occasional celebration creatures can be enabled to briefly display once a task is completed.
component type.
Framework foundation
These were the guiding principles to both design and content.
1. PRINCIPLES 🏆
Design
Motivate the user
Delight when right
Advancing to a distinct new phase / milestone
Content
Create a sense of achievement and progess
Build user confidence
Encourage further action, when appropriate
2. WHEN TO CELEBRATE 🎉
Celebratory
- Motivate the user
- Delight when right
- Advancing to a distinct new phase / milestone
Non - Celebratory
- Create a sense of achievement and progress
- Build user confidence
- Encourage further action, when appropriate
3. CONTENT COMPONENTS 📝
Rejoice
Celebrate user's success.
Example: Congratulations!
Confirm
Let the user know they successfully completed a significant action
Example: You submitted your application!
Inform
Set expectations so the user knows what will happen next, if there is no immediate action they can take to move forward.
Example: We’ll be in touch soon to discuss your loan options.
Direct
Let the user know what step(s) they can take next to move forward. This element may include a CTA.
Example: You can print your pre-approval letter and take it with you when you go home shopping. CTA: View your pre-approval letter
4. TIER SYSTEM 💡
We used a Tier system to categorize the impact of a moment and how to properly recognize the achievement.
Tier 1: Used for smaller impact moments. Inline text will be used.
Tier 2: Used for significant moments in the middle of a user journey. Will appear a modal to allow for easy dismissal.
Tier 3: Used at the end of a high impact journey. Full screen will be used as it will allow for a pause to acknowledge user's accomplishments.
4. DECISION TREE 🏡
This was a tool I created to help designers and content strategists decide which tier to use.
Testing V1 through a workshop
Goal
The goal was to validate our initial Framework with Designers. We conducted 2 activities with participants and watched them try to implement the Framework.
Workshop Activities
Activity 1 - Introducing Framework to participants
Activity 2 - Give participants scenarios and their use of the Decision Tree
Activity 3 - Use wireframes to build celebratory states
Insights from workshop
These where our top insights from the workshop:
The Framework Design and Content principles were a great foundation and where positively received
Decision tree language was too specific, and it did not account for nuanced situations
Tier system was too rigid, caused a lot of confusion for designers
Visual Elements/iconography for success states where needed
Final framework
This was the final format of the framework.
1. PRINCIPLES 🏆
2. DECISION TREE🏡
I owned this section of the framework. I took feedback from users and:
updated the decision tree to remove Tier specific language and made it about general success states
we added a sensitivity note, what might be a Celebratory product moment for the business , (selling a home) might be a sensitive personal moment for customers (selling a home because because of a divorce)
included guidance on how to partner with the constellation team for custom success states
3. CONTENT ELEMENTS 📃
4. STARTER KIT 🧰
5. VISUAL ELEMENTS 😎
