LADYMARRY WEBSITE

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: Goal-Directed Design

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 are supposed to find vendors by themselves and they expect to see a search engine or ads listing platform with plenty beautiful pictures and vendor information when they land LadyMarry's website. However, LadyMarry is more like a middleman, who will finally become a virtual middleman using AI technology. The gap between 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.

Highlight 1:New Site Map & Workflow

Rich Information

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.

Design layout patterns for services

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.

Highlight 2: The Power of Illustration

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 for the wedding cake.

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":