CASE STUDY @ LADYMARRY

A site that provides a hassle-free wedding planning service.

WEB     UX     VISUAL     ILLUSTRATION

ROLE

Design Lead
UX researcher
UX/UI designer

DURATION

Sep 2017, 5 weeks

SKILLS

Goal-Directed Design
Research & Synthesis
Design Strategy
Wireframing
Sketching & Illustration
Hi-Fi Prototyping

TEAM

Minrui Li (Design Lead)
Joanne Jiang (CEO)
Yibin Gao (CTO)

TAKEAWAYS

Startup mentality, MVP & Progressive iteration
Designer's value in a business group
LadyMarry offers one-stop wedding planning services including coordinator, officiant, designer, florist, photographer, etc. and coordinates till the big day. The website is designed for those who are looking for certain vendors and all-inclusive services for their weddings.

✨Final Result✨

Increased the goal conversion rate (+169%), the avg. page views per visit(+28%), the avg. time on page (+57%), the every session duration (+33%), reduced the bounce rate (-22.2%) and the exit rate (-23.7%).

Kick-Off

After talking with CEO and interviewing 3 brides, I listed conditions that need to be considered:

Define Problems 🔍

With goals and constraints in mind, I defined problems of the original website by analyzing data and interviewing target users.

The gap between conceptual models

In traditional US weddings, couples find vendors by themselves. So when they land on LadyMarry's website, they expect to see a search engine or ads listing platform with plenty beautiful pictures.
However, LadyMarry is more like a middleman, who will finally become a virtual middleman using AI technology. The gap between the conceptual models and lack of effective explanation make users confused.

Low desirability, less trustworthy

The heat map is one evidence that the website has a low desirability from users' eyes. For content, the website didn't echo with ads and user's expectations very well. Visually, the grey illustration, uneven layout can not make the website good-looking and trustworthy.

Lack of consistency across the product suite

LadyMarry currently has 4 digital platforms: 1 website, 1 web-based application, 1 mobile application and 1 blog. However, they are visually less connected and lack of a consistency in content, which will cause confusion and weaken the power of brand.
I decided to focus on the first 2 problems, because the 3rd one can not be solved only by redesigning the website. So I paraphrased the problem I want to solve:

How to help target users quickly understand, get engaged and trust LadyMarry's service, so as to contact our wedding expert and get real help?

Brainstorm & Sketch

I brainstormed solutions to the issues of Understanding, Trust & Getting Engaged and move forward with some promising ideas.

Rich Information

New Information Architecure

Users want to everything as they see "one-stop", they expect to find everything on this website. So I create a list of services and refined the site map to make it more logical and dynamic. There is a comparison of old site map and new site map.

New workflow & Layout patterns

For services like florist, cake, photographer, I categorized them into several groups and different layout for them, for example:Florist, cake, hair and makeup - they have a lot of pictures, they can be filtered by product types; for DJ/MC, Musician, Photographer, Videographer, I highlight their work samples and styles, rather than people; for photo booth and venue, highlight styles.

Illustration & Co-Creation

One challenge was there were not much good-quality photos left for the website. That was to say, I could not adopt the strategy that to convince users by showing lots of past works of LadyMarry like other competitors did. But I found another way to build trust--Illustration.

Facilitate understanding: how LadyMarry works?

Imagining when new couples log in a vendor website, they actually know nothing about wedding planning — totally a mess. Traditional service vendors show them a lot of good pictures, the amazing results,and tell them "Just leave this to me!". But miscommunication happened a lot, which makes couples lost confidence for vendors. For LadyMarry, I want to highlight we close the loop with "3C", coordinate till the big day.

Build trust: how a certain service works?

Transparent communication brings trust. Here, I try to explain "How It Works" to couples, to tell them how we customize services for them, the dimensions we need to considerate.
I tried diagrams, icons, but finally chose illustrations as the educational method--on one hand, it's easy to read and quickly understand, on the other hand, the elegant hand-drawing style shows LadyMarry's taste and sincerity, moreover, for users didn't see works that satisfy their needs can also clearly express their visions to LadyMarry using the picture. Here is an example of flowers in a wedding.

Elicit emotions: wedding planning is enjoyable

Finally, our couples and vendors all like these illustrations very much, they even print it out when having meetings to facilitate the conversation. For couples, they always feel overwhelmed and tired during the wedding planning, but pretty pictures and effective communication can release their burden a lot.

Other Details

Wording

For example, I changed "contact us" into "free consultation" since our target users are sensitive to price, which I learned from sales reps.

CTA buttons

In the original version, all CTA button are khaki, which looks too pale and vague, can not attract users attention, let alone increase the CTR. I changed the color into LadyMarry pink, as well as put more CTA buttons in prominent positions.

Implementation

I took 4 weeks designing and 1 week implementing, here are some "OLD vs NEW":

Validating and Iteration

Then I tested with users. Incoming brides showed their appreciation and get attracted by the website, especially the illustrations-- "Beautiful and professional!"

I keep iterating the details on website (sometimes do AB testing) and check the data from Google Anallytics and Hot Jar.

Takeways

Startup mentality, MVP & Progressive iteration

A startup has very limited resources and managers have to make a balance among all the departments and services. For a new service or function, we have to have something first, test the MVP then iterate. It's OK the first version is not perfect, we can polish the website/product later with feedback from our users.

Designer's value in a business group

Designers are problem solvers. In a business group, I was supposed not only to advocate for users but also to solve business problems. Sometimes I have to compromise due to business goals and constraints, but it's more important to communicate, understand and collaborate.