Case Study
Wedlock Mobile App Design
Challenge
Some busy brides/grooms hire a wedding planner to organize their big event.
However, for the busy bride/groom wanting to plan their own event (or just wanting to be more organized as they interface with their wedding planner) this website will provide everything they need to stay on track.
Solution
This website provides the budget minded bride or groom a way to find vendors and venues easily by allowing filtering by price before requesting a quote.
Challenge
As my first Google UX Design project, the challenge was how to design a mobile app that helps busy budget minded brides and grooms find venues and vendors with a focus on time saving features.
Goal
I want to understand common challenges busy people face in planning a wedding.
I want to identify common and essential needs of users planning a wedding.
Solution
This website provides budget minded brides and grooms a way to find vendors and venues easily by allowing filtering by price before requesting a quote.
My Role
UX Designer, Research Designer and Visual Designer
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.
Project duration
August 2021 - January 2022
Understanding the user
User research
I interviewed five users and created empathy maps for them. The target users were women, however, I also interviewed one man.
I assumed that users would be most concerned with a simple checklist and timeline. However, user research indicated the need for a budget tool and a way to share all wedding details with planners, vendors, etc.
User pain points
Upfront pricing model
​
Users want to save time by requesting quotes for vendors within their budget
Timeline/checklist
​
Wedding planning timeline and checklist based on wedding date.
Creating a guest list
​
A place to track your guest list, keep contact information, gifts received, thank you notes to send
Budgeting
​
Wedding expenses can quickly spiral out of control, users want a tool for tracking expenses
Persona & problem statement
Akilah is a busy CrossFit athlete and coach who needs up front pricing for wedding venues and vendors because she's on a tight budget and has little time to waste waiting on quotes.
User journey map.
I created a user journey map of Akilah's experience using the site to help identify possible pain points and improvement opportunities
Competitive audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Wedlock mobile app.
Paper wireframes
My goal was to create wireframes for the process of finding a wedding venue that fits the needs of the budget conscious bride to be.
Starting the design
Digital wireframes
(Figma)
Digital wireframes allowed me to refine the designs created with paper. User pain points were addressed by putting the menu at the top and center, making navigation simple and straightforward.
Wireframes
This is the home screen and the first of 8 screens. It allows users several choices of wedding planning options and provides a section for wedding inspiration, for the bride/groom who wants more ideas.
This is screen 2, which is the Vendor screen. The user reaches this screen after clicking the Vendor button on the Home Page. This provides vendors for all the options needed for wedding planning.
In this view (screen 6): users request a wedding venue quote. They do not have to waste their time wading through venues they cannot afford, because this frame comes after choosing the price range filter.
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of choosing a wedding venue and getting a price quote.
Usability study findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study was of a high-fidelity prototype and revealed aspects of the mockups that needed refining.
Round 1 findings
Round 2 findings
1. Users found the dollar signs with a one word descriptor of price without specific numerical costs confusing
​
1. One user still confused by the search screen, even though the city was pre-filled. They felt the prompt should advice the user to ‘continue your search.’
2. Participants were confused by the limitations of a low-fidelity prototype. Since the dropdown menu does not work, the ‘Search’ button beneath it confused users.
3. The quote confirmation modal forced users to return to Home Screen, rather than giving the option to solicit more quotes.
2. One user felt there needed to be more white space between the buttons at the top of the results page and the first search result.
3. Users felt the typography was off on the header for the request quotes screen. The font was Roboto instead of Righteous for all the buttons on this page. Also noted font size on the three buttons along the top of quote page were too small
Mockups
The first usability study: Early designs had the options for choosing wedding venues based on a price range that was defined by the number of dollar signs.
​
Users felt this was not definitive enough, so I provided actual cost ranges in the final prototype.
The second usability study revealed issues with a lack of consistency in fonts used on the venue location screen as well as concerns about the font size of the buttons on the top of this screen.
​
I increased the font on all buttons.
Sticker Sheet
I created a sticker sheet to help me retain consistency in my usage of typography, iconography, and color.
Refining the design
Before first usability study
After first usability study
Before second usability study
After second usability study
Accessibility considerations
Color Contrast
Used WebAIM Contrast Checker to check color contrast. This led to changing the blue to a deeper color, while the yellow was already within color limits.
Typography
Added alt text to images for screen readers to benefit visually impaired users.
Images
Used bright cheerful images to help users have a better understanding of services and options offered.
Mockups: refined designs
The final high-fidelity prototype has been refined to include better user flow and to address user pain points.
View the Wedlock ​high-fidelity prototype
Going forward
Takeaways
Impact
The app appeals to the need of budget conscious brides to find a venue quickly that meets their needs.
What I learned
I learned that the time I put into conducting usability studies was well worth the effort. The first study informed needed changes to my wireframes, and the second helped me fine-tune my mockups.
​
Next Steps
Testing
Conduct another round of usability studies to assure all the pain points were adequately addressed.
Ideation
Conduct research around more ways to improve accessibility.