Balance Between Vanity & Utility
Re-imagined the personalized homepage experience of an all-in-one wedding planning app. Produced high-impact results that supported the company’s transformation from a print+web media company to become a mobile-first product company.
Type of Project
This case study was part of a major cross-platform re-design not only to modernize the look & feel, but to re-define the holistic experience strategy of planning a wedding on The Knot. We had a fixed launch date, limited resources with aggressive business KPIs attached.
My responsibilities
I was the Design Lead for the mobile zone in charge of creative concepts, user research, scope and planning, stakeholder alignment, multi-channel experience strategy, UX/UI for the couple profile & homepage. Closely collaborated with two tech leads, two PMs, one web designer, one UX copy writer and product marketing to turn ideas into reality.
Time
The design process took place in June 2017 with a MVE launch to 10% of new users in selected states on iOS only. The coordinated cross-platform launch happened a few months later, followed by a few UI updates in early 2018.
―
The challenge (s):
The project was extremely vague and undefined during its inception. At the same time, it was the focal point of the entire re-design because the homepage is the default landing page for all members, millions of eyes on it. Knowing planning a wedding is a highly personalized journey, how might we make it beautiful and useful for 1st time users? And how might we keep it beautiful and useful for the return users at their 27th visit? Can we cater to both types of user needs at the same time? Setting the parameters and defining the specific Jobs To Be Done (JTBD) was the first big challenge. The second challenge was detecting the appropriate amount of personalization to make it memorable and technically feasible at the same time. Lastly, the third challenge was designing and building a scalable design system to support the evolving user expectation throughout that planning journey.
After a round of audit, we posted the current app screens on the wall to practice designing in the open. Many interesting conversations happened in front of this wall during the course of the re-design.
What Do Users Expect:
During the project inception, we had 11 stakeholders including two Product Leaders (mobile zone & web planning zone) joining the conversation. We had an entire white board full of business expectations, KPIs and suggested success metrics. However, when we turned the white board to the other side to discuss our engaged users’ wants and needs, the room suddenly became quiet. Everyone looked at one another, waited for someone else to speak up first. “I don’t think we know enough about users’ expectations! We can lay out our assumptions today but we are just not ready to determine the scope yet.” I broke the silence with my honest opinion. “Yes, I don’t remember we ever talked to users about this page. Yuki and I have been here (with the company) the longest, but this page’s purpose and value propositions have not been crystal clear. We will have to talk about scope and feasibility at a later meeting.” The mobile zone PL chimed in in agreement.
The very next day, I began the quest to find the answer for the members’ logged-in homepage. First, I thought about doing whole bunch distinct concepts and have users evaluate them for relevancy. Nonetheless, content should come before style in this case. Since the scope was very open-ended, the best and most efficient way IMO was to ask open-ended questions. The team was aware of the different needs between 1st time users vs. the users who’ve been planning their wedding for months. So recruiting participants for both segments was a no brainer. I also suggested adding a third group of research participants - those who just recently got married. I was curious if they would lend more wisdom in hindsight or if they wished they had known something earlier in the journey. So I asked questions like
If you had a magic wand to design a planning homepage that would be useful throughout the planning journey, what information would be displayed?
Now you just got married, imagine you are planning your best friend’s wedding, what information would you share with her on a weekly basis to help her along the way?
Key takeaway
The learnings from the 1st round of interviews were insightful and purposeful. The three groups of users all revealed the feeling of being overwhelmed with tasks and advice. At the same time, depending on where they were on the planning journey, they needed different level of guidance and emotional support.
“I want the homepage to celebrate us, our love. You know, because planning a wedding is so hectic, I want to be reminded why we are doing this! ”
“I want to know where I am in the whole planning journey. While the Checklist and Budgeter have the detail info, there is no where on The Knot to keep me on track before diving into the weeds. ”
What Do We Envision:
To prepare for divergent thinking and multi-concept testing, I tapped into the wisdom of the crowd. At XO, we had infused Design Studio into our standard design process. In the mobile zone, the enthusiasm was particularly high, several iOS engineers and PMs were strong advocates. Starting in 2017, I led a bi-weekly one-hour long design thinking meeting where designers, developers & PMs put their designer hat on to get closer to our end users. Sometimes we would watch user videos, post “How Might We” questions on the board; sometimes we would review and critique work-in-progress design together; sometimes we would draw and have mini Design Studios on the most critical challenges for the zone. This time, I shared the highlights of the research findings, then we went to crazy 8 mode!
We generated 15 detailed sketches, 6 themes. 3 out of the 6 themes received the most “essential” vote. We did all this within 90 minutes.
Divergent Thinking:
Divergent thinking is an important element of the creative process, creative maturity relies on it. Thanks to the amazing mobile team and the cross-platform stakeholders, I received an enormous amount of possible suggestions to take the Homepage/Dashboard out of its current single-dimension identity. Based on the research insights and agreed upon themes, I came up with 5 different concepts that showed a mix-and-match combo of what a dynamic member homepage could display. Then, I asked the team to vote on the individual modules that existed in each concept and help me eliminate two concepts before I go to the next phase - user validation.
Convergent Validation:
Concept testing to determine the JBTD could be fun and tricky at the same time. This homepage re-design was especially challenging because many recently engaged brides (our main target audience) had no idea what they wanted/needed. So they were giving thumbs up to every single concept and said they would be thrilled to see any one of them come to fruition. We ended up doing moderated testing with 5 users in person + 2nd round of unmoderated tests with 15 users. Finally, we hit an ‘ah-uh’ moment after reviewing all the footage and notes. (UT highlight reel here)
Couple’s profile photo is a necessary key element to personalize the experience. [Yes, validated]The completion percentage of Checklist items is what determines planning progress. [No, invalidated. The next set of To-Do items are more helpful]Inspiration is a nice-to-have element. [Yes, validated for users in the later phases. 1st time users crave inspirations]Wedding cost/spend summary will make users feel overwhelmed, thus, should not be highlighted. [No, invalidated]Summary of guest RSVP status is an important proxy signal of planning progress. [Yes, validated]Vendor hiring status is another proxy signal of planning progress worth highlighting. [Yes, validated]
What We Narrowed Down To:
1.
Big profile picture
The homepage/dashboard has an important emotional job to be done - it’s the vanity moment that celebrates love and reminds the couples why they they are going through all the logistics to plan their big day. The couple picture should be prominent on the homepage every time they log in. Wedding day count down is part of that vanity moment and celebration. Key dates could trigger micro moments of delight to boost the emotional excitement.
2.
Big picture of planning progress
On the other side, the couples have a yearning for the 30,000ft view of their planning progress. Typical planning journey for a wedding last about 12-14 months, couples go through multiple phases of planning to eventually get everything ready for the big day. The idea of “progress” is not scientifically defined so it can’t be easily translated into a % of completion. Different data visualization/display pattern for the different aspects of planning is what closely matches to the user’s mental model. For 1st time users/newly engaged couples, introducing the key aspect of planning with guidance is more appropriate.
3.
customizability
Planning a wedding is a combination of celebrating traditions and individuality. The priorities and sequence of tasks vary from couple to couple. While product folks attempt to personalize the experience based on data science and segmentation analysis, there is an element of customization that users desire to make the homepage “authentically theirs.” The ability to display modules in different orders or eliminate certain elements of the planning altogether is an area worthy of more investigation. It’s not recommended for the initial launch.
Tinkering Time:
This interaction inspiration came from Pandora. I was looking to transition users from the vanity moment to the planning experience.
When it comes to interaction design (IxD), collaborating and sketching object movements with iOS engineers has to be one of my favorite parts of the design process. iOS engineers by nature are front-end thinkers, 80% of what they do is centered around the model view controller which manipulates interface modules. Most of them are excited about new interaction patterns, when I showed them the inspirations and explained in detail how I imagined the transition could work, 3 engineers immediately jumped in and tried to sketch out solutions on paper. I found the transition pattern from Pandora to be the closest of what I was imagining.
UI Iterations:
Business Results:
The cross-platform launch was nerve-racking given our typical agile environment. The Marketing department ran the biggest cross-channel marketing campaign in The Knot’s recent history. The campaign covered social media, the blogosphere and several TV spots. On the launch day, we had a big internal celebration over champagne but we all knew the KPIs and market feedback would take a little longer to materialize. Shortly after the New Year, the results finally came in on the iOS & Android side: Installs reached 1MM (+72% YoY) within a month, new members grew 63% YoY, Quality Leads increased 109% (business KPI #1), Wedding Website creates increased 190% (business KPI #2). We successfully exceeded the aggressive business goals, and we also saw a boost of healthy retention for returned users, 70% of new users became MAPU within the first 30 days, 67% of them would still use the app a month later :-)
User Reviews:
