Always Event Co.

A local wedding and event coordinator, Always Event Co. (AEC), needs to reach more people and have a place where prospective clients can learn about AEC's services. In this UX/UI design project, I worked closely with the business owner to craft a user-centered online experience that will meet her goals.

PROCESS

My approach to this project was structured with a standard 5-step design thinking approach, shown below. I followed this process because it maximizes information sharing by making the user and business goals central to how the design is constructed. The final deliverable of this solo project is a high-fidelity rendering of the AEC site.

Discover

Product Strategy
Stakeholder Interview
User Interview
Style Discovery
Competitive Analysis
Landscape Analysis

Define

Persona
Job Stories
Customer Journey

Ideate

Low-Fidelity Sketches
Content Strategy Map
Mid-Fidelity Wireframes
Style Definition: Style Tile

Prototype

Clickable Wireframe
High Fidelity Mock Up

Test/Refine

Clickable Mock Up
User Testing
Refine
Final Comps

1. DISCOVER

I began with investigating the problem and possible solutions. To create a foundation for this project, I met with the business owner to create a game plan for the project. We established a problem statement, a set of business objectives, and success metrics. With this context, I explored AEC's audience, style direction, competition, and design inspiration.

Market Context

There were 2,126,126 weddings in the United States in 2019. That's according to Wedding Report, who found the average cost of a wedding to be $24,675 that same year.

Wedding coordinators make up a notable portion of what couples spent, with Wedding Wire estimating the average spend on a wedding planner to be $1500.

Average Wedding Planner Graphic from www.weddingwire.com/cost/wedding-planner

The Problem

Always Event Co. is ready to grow. The business owner has spent years honing her craft while working with other companies, but is now ready to take on more business of her own. In our initial conversation, the business owner identified the need to:

Reach more prospective clients and provide them with easily accessible information about her services.

Business Objectives and Success

Objectives: Help prospective clients learn about AEC and reach out. Clients should be able to get a good idea of professionalism and fit.

Success: means the solution will 1) provide information to prospective clients about services and prices, 2) build credibility, 3) gather online leads.

Stakeholder Interview

In further conversations, I met with the business owner to build alignment and insight by exploring the company's competitive advantage and target users.

User Interviews

To learn about who AEC's potential users are, including what motivates them, I conducted two user interviews with people who had been brides within the last two years.

Of particular note was that both brides indicated that having prices listed on the site would increase their likelihood of reaching out the the vendor, even if the price is above their budget.

Major insights from talking to users indicated:

1) Price is a significant deterrent to finding a coordinator online.
2) Professionalism and trustworthiness are primary reasons a bride decides to book or not.
3) Convenience is a main criteria brides consider when deciding whether to reach out.

Solution

Based on the user research above, the solution need to address price, professionalism, trustworthiness, and provide convenient ways to contact AEC.

At the start of this project, Always Event Co. didn't have an online presence. A website will provide an effective way to meet business needs, namely reach more prospective clients and provide them with easily accessible information about her services, while addressing the needs of users.

With this goal in mind, my proposed solution is a website that, when successful, will:

1) Provide all the details about price and services that prospective clients need to make a buying decision,
2) Demonstrate professionalism and trustworthiness through design and content, and
3) Gather online leads through convenient contact methods.

Style Discovery

In order to begin gathering style inspiration, I created a Dropmark board to collect useful ideas. Using the 18 collected items from sources like Behance and Dribble, I conducted a "gut test" exercise with the business owner to better learn the language and preferences surrounding the AEC brand. I took notes on how she responded to each item, making sure to ask why along the way. Some items that stood out were: clean layouts that made good use of white space, neutral colors, more established modern designs that are not highly trendy.

Competitive Analysis

To understand AEC in context, I compared wedding coordinators working in the same area. Using several important areas of comparison, we are able to uncover opportunities.

In particular, a common problem among the competition revolved around pricing. The contents and differences between packages were often unclear, and there was a lack of options for more price-sensitive brides, or no price listed.

Landscape Analysis

Helpful inspiration for the site is not limited to businesses in the same industry. I gathered sites that effectively perform some feature that may have application to the AEC site.

2. DEFINE

This phase is centered around consolidating and ordering the insights that have been gathered so far. This phase will result in a defined archetype of our user as well as a visual representation of our user's journey of interacting with AEC online.

Persona

Using the insights from stakeholder and user interviews, I created a persona to describe the target customer. This archetype will help align efforts going forward—a necessary step to ensure the designs are user-centered, and account for the most pressing user needs.

I consulted the business owner in the process of creating the Ashley Shepherd persona to learn who her target customer is, and what common attributes are.

Ashley is a young, active professional who was recently engaged. She realized there are things she might be missing and wants the help of a professional coordinator. Below you can see her goals broken into "discovery goals," or what she wants to learn, and "tactical goals," or what she wants to do.

Job Stories

To uncover gaps in the process, as well as show the opportunities available to the organization, I leveraged job stories. These helped clarify the role and necessary function of the website's different sections. The business owner and I collaborated to create the following:

1. Introduction

➤ When I arrive on this website, I want to see pictures of past work, so I can understand your style and form expectations.

➤ When I arrive on the website, I want to learn about the coordinator so I can know if we will work well together

2. Research

➤ When I’m searching for info on this site, I want to find clear and concise package deals that I can quickly compare my options.

➤ When I’m searching for info on this site, I want to see multiple reviews, so I can understand your track record with clients and credibility in the industry.

4. Experience

➤ When experiencing this service, I want to trust your expertise, so that I can relax and enjoy the event.

➤ When experiencing this service, I want things to run smoothly, feel satisfied in my decision and investment.

3. Inquire

➤ When inquiring, I want to quickly access contact information,  so I can ask questions and get help efficiently.

➤ When purchasing your services, I want well-defined details on what I’m receiving, so I can make sure I’m making a good investment.

Customer Journey Map

To consider the user's experience holistically, I created a customer journey map. This map shows the customer's initial contact through process of engagement, and into long term relationship with the organization. As you can see in the map below, I identified key interactions, as well as the user's feelings and goals at each touch point. The map design is based on an original version by Carolyn Li-Madeo.

3. IDEATE

Experienced product development professionals know that experimenting early is inexpensive, and experimenting later can be very expensive. With that in mind, the Ideate phase focuses on divergent thinking as I explore ways to meet user and organization goals with visual design.

Low-Fidelity Sketches

I sketched a set of preliminary low-fidelity ideas, focused primarily on structure.

Since our competitive analysis showed that many competitors lacked clarify around their packages and services, crafting easy-to-understand layouts is a key part of AEC's differentiation. I experimented with a number of approaches to the "packages" page, inspired by tech product pricing as shown in my landscape analysis.

Content Strategy Map

Any ingredient being put into the site that needs strategic consideration as an important element of communication must be considered in our content strategy. To translate the insights gathered in the Discovery and Define phases, I ideated in the following areas using the associated deliverables:

➤ Goals: Business as well as functional and emotional user goals. Insight found in Personas.
➤ Competition: Consider the content treatment portion of our Competitive Analysis.
➤ Context: Design for objections, questions, length of stay v. task to be accomplished, and how the user is approaching the site, including state of mind and device used. Insight found in Journey Map.
➤ Motivations: What drives our audience? What are the motivations of our stakeholders? Each User Story covers a motivation for our users.
➤ Hierarchy: Include strategic consideration of page and screen hierarchies. Insight found in Site Maps.

Mid-Fidelity Wireframes

To begin establishing page structure, I created "blueprints," or wireframes, for each page of the site using Invision Freehand. Establishing content hierarchy required looking back at our research to identify the customer and organization goals for each page. The user stories and content strategy described above also informed the visual choices of the wireframes.

Style Definition: Style Tile

In terms of detail, the Style Tile exists in the middle between a mood board and a comprehensive. This deliverable was created with the goal of collaboratively defining real interface elements in-context without spending the large amount of time needed to establish and refine a comprehensive layout. This encourages iteration that is collaborative, contextual, and low-risk.

The main elements of the style tile are: client brand elements, typographic samples, color, form and UI elements, imagery, key components, comp teaser.

a. Client Brand Elements, Typographic Samples, and Color

In our design discovery earlier in the project, I collaborated with the owner to note style preferences. I applied these insights in the style choices made below.

The brand personality should communicate a warm friendliness and charming sophistication, so I chose a classic-looking serif display font for headings, Playfair Display, and a less stylized serif font for body copy, Frank Ruhl Libre.

The business owner expressed interest in neutral colors, so chose a beige, a grey and a salmon hue. These seem popular in the events industry, and are therefore useful in communicating the brand identity upon first glance.

b. form and UI elements, imagery

In our design discovery, the business owner was notably drawn to designs that used square and circular structure elements. I applied this idea to the section sample on the left, using a rectangle to define the section structure.

One of the vital organization goals as defined in the customer journey map is to "make the contact process as streamlined as possible." With that in mind, I rendered a sample contact form.

Imagery is an important aspect of communicating professionalism and brand identity. To service the AEC brand, the imagery should be bright, crisp, people-focused, and not overly stylized.

c. Key Components

The "About Me" section is an essential part of creating the warmth and friendliness that the business owner described and essential to the brand. I included the hand-styled font as inspiration.

Assessing professionalism is the first user goal on the customer journey map, so I created a "Kind Words" section to collect reviews and testimonials.

An issue that we identified with the competition during our competitive analysis was unclear package options. In the "Services" section, I sought to present the packages in a clear, visual way that would make the package differences quickly apparent.

d. Comprehensive Teaser

As as preview of the comprehensives to come, I created a landing page with a corresponding mobile design. This allowed the business owner to better visualize the final product.

RECEPTION

The presentation of the style tile went well. The business owner reported that her style was "very understood" and approved all elements to more forward, with the exception of the light salmon color, which she clarified should only be for accents and not prominently featured.

4. PROTOTYPE

This phase centers around making the wireframes testable in a mid-fidelity state, in addition to adding fidelity to the designs by combining the wireframes with Style Tile elements.

Clickable Wireframe

To bring the wireframes to life in a way that allowed us to simulate navigating the site, I created a clickable collection of wireframe screens in Invision. The business owner tested the user's path through the site to confirm that the goals of each page were applied in the content hierarchy.

High-Fidelity Mock Up

Combining the structure outlined in the wireframe designs with the Style Tile visual elements approved by the business, I created the first high fidelity mock up of the site. I used the copy that was available at the time, and some temporary filler where needed.

Some research indicates that 1366px is the most common screen width, so I established a grid system for each page based on this, with 12 columns.

‍

In our collaborative review, the business owner clarified that the pricing section should be structured in a different order, to prioritize the package information differently. We iterated on the design a number of times to maximize readability and streamline the content. See a sample below.

5. TEST/REFINE

The Test/Refine phase brings together our highest fidelity clickable prototype of the project. Testing this prototype will provide the insights needed for the final round of revisions.

High-Fidelity, Clickable Mock Up

To simulate the user's real-world experience as closely as possible, I created a clickable, high-fidelity mock up in Figma.

User Testing

It's important for designers to regularly recall that we are not making products for ourselves. Our products need to work for the intended audience out in the real world. Truly, we can only fully come to terms with any misguided assumptions and biases by empathetically observing the experience of the end user.

I tested with an individual who had been a bride within the last year. I gave her access to the clickable prototype and asked her to evaluate the site just as she would when she was looking for a coordinator. I observed her screen and facial expressions, asking her to explain her though process as she went. To the right is the main section of my notes from this section.

The feedback was almost entirely positive. In the end, a few notable insights came to light:

➤ About page: Would like more information, including information about qualifications.
➤ Contact page: “I love forms.” The fields prompt my memory so I don’t have to think about what information to provide.
➤ Packages page: “I’m looking for prices." If prices are listed, "I’m ready to contact them, even if they’re a little out of my price range."

Revisions

Based on the testing feedback I received for the high-fidelity clickable mock up, I made the following changes, collaborating with the business owner where necessary.

➤ About page: Full re-write. My test indicated that the about section was not robust enough, so the business owner re-wrote this section, adding important information and structuring it in a more readable way.
➤ Packages page: Streamlined. It was very important to get this page right, so the business owner and re-ordered body copy and updated the visual structure of the packages to increase clarity.

Final Comps

Guided by the techniques outlined above, the finalized designs are the culmination of hundreds of intentional decisions.

CONCLUSION

At the beginning of this project, we defined a successful solution for AEC as one that will: 1) provide all details that the bride needs to make a buying decision, 2) communicate professionalism and credibility through design and content, and 3) allow prospective clients to reach out easily and quickly. The testing I conducted indicates that the solution is effective on each of these fronts, and the business owner agrees. The next steps would involve translating the designs into a functioning website and conducting further tests in addition to analyzing the life site's user metrics over time.
‍

See More of my Work:
The Job Seeker's Network
The Customer Experience App
LinkedinBehance