Embedded Files
Project Overview
Project Overview
Timeline
September 2022 - December 2022
Tools: Figma
My Roles
As a student of the Google UX Design course, my role in this project was to do every part:
UX Researcher
Interaction Designer
Graphic/Visual Designer
Writer
See the full Slide Deck:
What is a "ceremony preview app"? That's a good question. I don't know, but let me show you how I made one.
For this project I chose a prompt from the Sharpen Design Challenge Generator that read “A Ceremony Preview App for a Wedding Venue in My Favorite City.”
I had recently just chosen a venue for my own wedding in June 2023, so this prompt seemed timely and appropriate. As my own venue, The New London Carriage House in Prince Edward Island, Canada, is relatively new and has a small web site and no app, I would not be at risk of copying any current product for this venue. Thus my project became:
A Ceremony Preview App for The New London Carriage House, of Prince Edward Island, Canada.
The Challenge:
The Challenge:
After my initial brainstorm of ideas (which you can see under Initial Designs), I settled on the idea that "ceremony preview" meant couples to be wed needed a way to visualize what their own ceremony could look like should they select this specific venue to host their wedding.
The Goal
The Goal
Having settled on a definition of "ceremony preview", my goal was to create an app that
Let users see photographs and/or videos of previous or staged ceremonies at the the New London Carriage House.
Let users correspond with the the venue easily about customizations and price quotes.
I figured the apps target users would be
Myself and other brides/grooms-to-be who are trying to determine if this venue is right for their nuptials.
Wedding planners (official or unofficial) who are corresponding with a venue over the course of event preparations.
Constraints
Constraints
The constraints on this project are due to the amount of time & funds I have to put into it as a certificate student (As the certificate program is about $40/month, the longer I take to complete the certificate, the more I pay.).
The Process
The Process
The certificate courses walked me through every step of the UX Research/Design process, during which I learned all about the following:
Project Overview & Understanding the User
Goal statements
User Research
Personas & Statements
User journeys
Storyboards (Big Picture and Close-Up)
Competitive Audit Report
Starting the Design & Usability Study
User Flows
Paper Wireframes
Digital Wireframes (Figma)
Low Fidelity Prototype (Figma)
Usability Study Research Plan
Usability Study (Google Meet)
Note-taking Spreadsheet (Google Sheets)
Affinity Diagram (Google Jamboard)
Usability Study Pattern Identification
Usability Study Insight Identification
Research Findings Presentation (Google Slides)
Refining the Design
Design Systems (Figma)
Mockups (Figma)
High Fidelity Prototype (Figma)
2nd Usability Study
Plan
Study
Data Analysis
Project refinement
Portfolio & Case Study Creation
The Research
The Research
Fictional Interviews
Fictional Interviews
User research was gathered through “interviews.” In this case, it was using fictional user bios supplied by the Google course and inferring how each user might feel if asked the interview questions. (I recognize that this certainly meant my answers were biased to my own opinions.)
If I were to really interview different groups of users I would include groups such as
Brides/grooms-to-be
Former brides/grooms of various religious/non-religious backgrounds
Informal & Certified Wedding Planners
Venue event coordinators.
People who have rented party venues, ages 20+
The Questions
The Questions
Screener Question
Have you ever searched for a party/ceremony venue?
Have you used a wedding venue?
Interviews Questions
What do you look for in a ceremony venue?
What have you learned during an in-person tour that could have been in an app?
What would you like to see in an app for a venue?
What problems did you encounter during venue searching that an app could have fixed?
Have you ever found a party/ceremony venue using an app/website? What was helpful? What would have improved the experience?
Are there any specific differences in finding a wedding venue than any other type of ceremony/party venue?
User Pain Points
User Pain Points
Based on my own answers from the fictional user interviews, I determined that my users had three pain points.
Limited Web Content. Venues should have photos and maps of facilities. They should make clear all the options couples have for customizing their ceremonies. The design will include space for venue photos and a form for ceremony customization quotes.
Inconvenient Contact Means. Clients want an easy way to contact venues and keep all the back and forth correspondence that happens in one place. Time differences between couples and their venue may make calling inconvenient. The design will include a messaging area and a calendar option for scheduling in-person venue tour.
Distance. Couples planning destination weddings may not see their venue before the wedding day. The design will include a map of the facility with photos at different seasons and images/video of previous weddings held at the venue.
User Personas
User Personas
The next task in the course was to create two personas, so I chose to base one of them on individuals in search of the perfect wedding venue (like me), and the other on individuals who will be the planner/coordinator for the event that will correspond with the venue. My inspiration for this second persona came from my own wedding planner who I have employed to coordinate my event for me.
The venue I have selected for this project is in Prince Edward Island, and PEI is famous thanks to the book Anne of Green Gables by L. M. Montgomery. Thus I couldn't help naming one of my personas Anne, and the other after her best friend, Diana.
Problem statement:
Anne is a bride-to-be who needs help choosing a destination wedding ceremony venue because planning a wedding from a distance is hard.
User Story:
As a Bride-to-be
I want to see photos and videos and reviews
So that I can determine if a wedding ceremony venue is right for me.
User Story:
As a Wedding Planner
I want to keep all communication in one place
So that wedding decor and ceremony days function smoothly.
Anne's User Journey
Anne's User Journey
This user journey is somewhat based on my own journey to determine if the venue in question was the one I wanted to use for my own event. I added in steps that might have helped me if I had had an app to use for this journey.
Competitive Audit
Competitive Audit
The Competitors
The competitive Audit was a little tricky because “ceremony preview app” isn’t really a thing. As I was attempting to create an app similar to a wedding website builder for couples app (such as WithJoy.com) combined with the features of a website/app that a certified wedding planner would use for the business of working with vendors and venues (such as Honeybook and Aisle Planner), I chose to use these three companies as the competitors. As the app was supposed to be for one venue, I also had to dive into what the New London Carriage House already had available on their website.
My Conclusions
First, I discovered that there's a lot more that goes into wedding planning apps than I'd first considered. The wedding website builder contains features such as guest list maintenance and emailing capabilities. Also there were effectively three different sites, there was the company site, the backend-couples site where they build their web page, and the public facing site the wedding guests see.
Second, The Wedding Planner websites/apps have contract creation and invoice capabilities.
As I was simply working on a student project, despite this deep dive into the features and services these various types of websites/apps provide to couples and wedding planners, in the end I chose to not get too complicated. I decided to focus my design mostly on the type of content a user might need to know to get an idea, or “preview,” of what their own ceremony could look like if they choose to work with this venue.
I believe the app design could be scaled up later to include some of the features I found during this audit.
Initial Designs
Initial Designs
Brain Storming
Brain Storming
After receiving the project prompt, I first brainstormed ideas in my notebook. My brainstorm included features for the app, sketches for the design, and questions I would ask users in preliminary research. Later I refined some of my thoughts in the form of paper wireframes.
User Flow
User Flow
While I had some thoughts on function and interface of the app, it was helpful to create a User Flow diagram to think through some of the interactions I wanted the app to have.
Paper Wireframes
Paper Wireframes
The best design advice I ever got was, “Don’t reinvent the wheel- look at examples, find one you like, and make something like it.”
So for this project I looked at apps I like using and find intuitive and tried to incorporate the features I felt were relevant. I particularly liked the slider I found in the Wordpress app, so I decided to use a feature like that. I also like the way Joy’s app uses cards, so I wanted to include cards in my design.
I brainstormed layout ideas for five pages. For each page I drew 5 different layouts, then starred elements in each that I wanted to keep in a final sixth layout. The pages I selected to wireframe were the Home page, the About Us page, the Plan page, the Contact Us page, and the Profile page.
I made sure that each photo carousel had controls so users could slide the photos themselves rather than have the photos move automatically for Accessibility purposes.
Figma Digital Wirefreams
Figma Digital Wirefreams
Home Screen
I organized the users needs into three categories.
About Us: The user needs photos of the venue grounds, previous weddings, and decor available to decide if they want to proceed with this venue.
Plan Your Wedding: The user needs to see available ready made packages, testimonials of previous venue renters, and a list of vendors (such as wedding planners, DJ’s, makeup and hair artists, etc.) they may want to work with.
Contact Us: Users may want to schedule a tour, request a quote after providing custom specifications, or just sen the venue a message.
The three groups of photos are buttons that will take the user to tabbed pages in the app.
The icons in the bottom navigation bar provide quick access to the Profile page, a return to this home page, and messages with the venue.
The About Us Pages: Grounds, Weddings, and Tables
The tab structure is used in all 3 of the areas (About, Plan, Contact).
The Grounds page has controls to let the user scan photos at their own pace. The user can ”like” decor photos which will be saved on their profile page for easy return to the photos.
Photos of previous weddings at the venue is similar to Pinterest so may be familiar to the user. Photos can be saved as inspo to help the venue work with the user better.
The Plan Your Wedding Pages: Testimonials, Packages, and Vendors
On these pages the tab structure is the same. The image carousels here also have controls.
The Contact Us Pages: Schedule a Tour, Message Us, and Request a Quote
A user will have to login or create an account to use the features in this section.
Profile Screen
The first section of the page will collect all the liked photos from the other sections so the user and venue can easily reference them. This will provide the venue with a better idea of how the user would like the venue decorated for their ceremony.
The second section will collect the tour date and all the preferences the user made in their request a quote form. Both the user and venue can easily see all the information in one place here.
The box at the bottom of the page will allow the user to add any additional details that may be helpful for the venue in creating the perfect wedding ceremony setting.
Figma Low-Fidelity Prototype
Figma Low-Fidelity Prototype
The app main page acts as a hub. From here the user can access three different sections, each with three tabs. The first two sections contain information that may be helpful to decide if a user wants to use the venue. The third section contains three different contact methods.
The app also has a bottom navigation bar for quick access back to the home hub, to the profile page, or to the messages page.
While I thought it would be useful for the user to set up a profile area where they could keep all correspondence with the venue in the app, I would learn from the usability study that participants did not like having to create a profile.
Usability Study (Round 1), Findings, and Revisions
Usability Study (Round 1), Findings, and Revisions
Usability Study Plan & Note Taking
Usability Study Plan & Note Taking
Using a template supplied by the course, I completed a Plan which included an Introduction, Research Questions, Key Performance Indicators, Methodology, Participants, and a Usability Study Script.
Research Questions
Does the user have enough information in the app to decide to proceed with booking the venue or not?
Can the user figure out the steps to schedule a venue tour, submit a request for a quote, or send a message to the venue?
Are there any parts where users are getting stuck?
The Participants
If this was not a student project, I would have most likely found a more diverse group of interview participants, but in order to complete the Usability Study Interview task I asked five close family and friends to be my low-fidelity prototype testers.
As I learned 5-8 interview participants is the generally accepted number for usability testing before diminishing returns, I was still within an acceptable number of participants.
I recognize that none of my participants had diverse backgrounds from the other participants and therefore my designs are at risk of being subconsciously biased.
Methodology
I interviewed each participant separately via Google Meet. I sent them a link to my Lo-Fi Figma Prototype and while they screen-shared with me so I could watch them proceed through the app, I read the prompts and questions from my script while recording their reactions in a Google sheet.
Example of spreadsheet notes for a participant.
Script
During the moderated usability study
Introduction:
Before we begin, I want you to know this isn’t a test. There are no right or wrong answers.
If you have any questions, please contact me.
This data is being collected to improve the app design and make it easier to use.
Activities
Great! If you’re ready, let’s move on to the activities! You’ll be given a list of prompts with follow up questions.
Prompt 1: Open the Carriage House app on your phone. Browse the About Us and Plan Your Wedding content until you feel you can decide if you’d move forward with renting the venue or not.
Prompt 1 follow-up: Do you feel the content supplied was enough to help you decide if you’d like to book this venue for an event? Please describe what content was helpful in making this decision. Was there content missing that would have been helpful in making this decision?
Prompt 1 follow-up: How easy or difficult was navigating through the given information? Is there anything you would change about the process?
Prompt 2: Navigate to the Contact Us section of the app. Login.
Prompt 3: Schedule a tour with the venue.
Prompt 4: Submit a form with event customizations.
Prompt 5: Send a message to the venue.
Prompt 2-5 follow-up: How easy or difficult was navigating through the given information? Is there anything you would change about the process?
Prompt 6: Navigate to your profile page.
Prompt 6 follow-up: How did you feel about this app overall? What did you like and dislike about it?
After the unmoderated usability study
Participants will complete the System Usability Scale
Participants will score the following ten statements by selecting one of five responses that range from “Strongly Disagree” to “Strongly Agree.”
I think I would enjoy using this type of app for working with event venues.
I found the app unnecessarily complex.
I thought the app was easy to use.
I would imagine that most people would learn to use this app quickly.
I think I would need the support of a technical person to be able to use this app.
I felt very confident using this app.
I found the app very cumbersome to use.
I found the communication section frustrating.
I found the venue information supplied sufficient.
I would recommend this app to a friend or colleague.
Findings
Findings
The About Us section should contain the Testimonials while the Planning section should contain the Tables information.
The current content should be made available without having to create an account or a profile.
The app needs back buttons, confirmation pages, and removing of keyboards where not necessary.
Affinity Diagram created with Google Jamboard to organize the Usability Study notes into themes from which to gain insights.
Revisions
Revisions
The majority of participants felt that the About Us and Planning sections needed to be reorganized.
The three main sections have been reorganized. The About Us section now contains Testimonials rather than Table Formations, which has been moved to Plan your event.
Message Us has been moved to the third option rather than the middle option of contact us.
Wording has been generalized from “Wedding” to “Event.”
“Decor would be for planning. Tables is planning. Testimonials go under about us. Organization is off.” (Participant C)
The majority of participants felt the content behind the login should be moved in front of the login page.
The Schedule Tour, Request a Quote, and Message Us options have been moved out from behind the Login page.
The Login page has been moved to only before the Profile page and wording in the app has been revised to indicate reasons a user may want to create a profile/login.
“I might just exit instead of creating an account. Creating an account is annoying. I can't remember passwords." (Participant E)
Some participants felt a back button would be helpful.
A “Home” button has been added with an icon indicating “Back” in the top left corner of the screen.
“A back button gives feeling of closing page.” (Participant C)
Mockups & High-Fidelity Prototype
Mockups & High-Fidelity Prototype
Design System: Sticker Sheet
Design System: Sticker Sheet
I tried to stick with colors from the Carriage House website, like the gold (or "Earth Yellow" as the Coolors Palette Generator called it) in creating my color palette. I made revisions, however, after checking the WebAIM Color Contrast Checker. The venue's website has Accessibility Contrast issues.
I thought it was unfortunate that the course only taught us about Design Systems at this point, because going back to replace many of these components with components found in publicly available Figma Design Systems such as Google's Material would have been much more work. Next time I will be copying and redesigning components from other Design Systems in my projects.
Key Mockups
Key Mockups
Photos used in the Mockups / Hi-Fi Prototype are a combination of my own, or screenshots from the Carriage House Instagram account or the Instagram account of Elysian Weddings/Events.
Figma High-Fidelity Prototype
Figma High-Fidelity Prototype
In the Hi-Fi prototype the Contact Us pages have been moved out from behind a Login page. I have left the Login and Profile pages because I believe, were I to continue this project, this app could be built out later to include some of the features I found during my Competitive Audit, and those features would live behind the Login screen.
Usability Study (Round 2), Findings, and Revisions
Usability Study (Round 2), Findings, and Revisions
Having refined my designs, I refined my Usability Testing Script and reinterviewed the same five individuals via Google Meet. Again I created a Jam Board to visually organize the collected interview responses into themes so that I could glean observations, patterns, and insights. I then prioritized my findings into actionable mockup revisions and lower priorities that might be done if the app were to be further built out.
Findings
Findings
Through the high-fidelity prototype usability study interviews, I learned an important lesson about prototype completion. Or rather, I discovered that I had an incomplete prototype. While I had focused on the broader picture of how the pages would flow, my study participants were focused on the fact that wording had placeholder text, and pages that suggested interactions, did not actually have interaction. I had failed to create a prototype that worked as if it was a real app. For my next iteration of the app design I will be focusing on creating a flow that will appear to the user as though the app is more than just a prototype, but a fully functioning app with text that does not distract from the experience.
Revisions
Revisions
Copy & Interactions
Other than changes to wording and replacing placeholder text with copy, the usability study participants most common issue was the lack of interactivity of the Calendar and Form pages. I had focused on the “big picture” in creating my mockups but had not added in-page interactions. For my final iteration of the app I added frames in Figma to create the app interactions the participants felt were lacking. In the final app iteration, users can click on a date on the calendar page (example, Jan 1) or change the day in the drop down menu under the calendar page, choose a tour time, and add their name and email before pressing "Schedule A Tour". The form page now includes check boxes, radio buttons, and text fields that are interactive.
Most participants of the usability study did not even notice the tabs at the top of the app pages. For the final iteration of the app I changed the size, font, font size, and active indication method of the the tabs. I made the tabs bigger, the font bigger, and used opacity of the font color and a border line rather than changing the background and font colors to indicate which tab is currently active.
As it was suggested by one study participant, I also changed the heading at the top of the pages to correspond to the section of the app the user is currently visiting rather than keep the name of The Carriage House at the top of the page. This will aid in less confusion while navigating the app.
Profile Pages to Client Portal
The Profile Pages were not well understood by the study participants.
Before Usability Study 2:
There had been no interactive button for participants to "Like" (press the heart shape in the corner) on any of the app pages so they were surprised to see three "Liked" photos in the profile area.
Study participants wanted to see copy rather than placeholder text.
One study participant wanted to know how or if the emails sent to the venue from the "Message Us" page also showed up in the messages area within the Profile page.
After Usability Study 2
I created an interactive photo "Like" (heart icon) button on the About Us-Grounds 2 Figma frame and replaced the "Liked" photos on the Profile page with just the one image made interactive in the app.
I removed the "Lorem ipsum" placeholder text and added copy instead. I also added interactivity so that users can change the preferences they selected earlier in the app process.
I changed the "Profile" to "Client Portal" to make a clearer differentiation that this area is for users who have become clients of the venue as opposed to app users who are still deciding on becoming clients of the venue. This will hopefully clear up confusion about sending emails to the venue in the "Message Us" section vs. sending messages within the Client Portal.
Button Blurs & Opacity
One more revision I made was to create indication of button pressing. From the main page I added frames so that the photos appear to blur when pressed before moving the user to the indicated page.
I also used opacity of button colors to indicate when a button can/cannot be pressed. For example, on the main page, the Client Portal Login button appears greyed until the user has input an email and password. Only then will the button appear at 100% opacity to indicate it can be pressed.
Revised High-Fidelity Prototype
Revised High-Fidelity Prototype
Watch this video to see the app in action!
Screen Recording Iteration 3.movAccessibility Considerations
Accessibility Considerations
Color: Color contrast of back and foreground colors was checked with WebAim Contast Checker and color is not used as the sole indication of interactions.
Text Hierarchy & Iconography: Text headings are labeled in hierarchical order and font sizes follow the hierarchy. Icons are universal so users can expect to know the behavior/outcome of interacting with them and/or icons also have text aids.
Button Placement: I tried to place most needed buttons within thumb reach of the bottom of the app page.
Alt-Text: I would expect all photos to have alt-text if this app were fully functional.
Conclusion
Conclusion
Takeaways: Impact
Takeaways: Impact
“For what it is, it works. It would make more sense if [the app] was for multiple venues. I probably wouldn't download an app just to look at one venue.” -Participant D
Takeaways: What I Learned
Takeaways: What I Learned
The entire process of UX Design from idea to high-fidelity prototype.
How to use Figma & Figma Design Systems.
How to create a UX Design case study and portfolio.
That the prototypes need small interactions within pages to work, not just broader page level interactions. And that the usability study task statements need to be precise and match the interaction that will happen with the prototype.
That despite your best efforts to create a perfect product, your usability study participants will point out ideas you hadn’t thought to include in the design.
Next Steps
Next Steps
First, if I were to continue this project, the next step I would take is to conduct another Round of Usability Testing to validate if user concerns have been effectively addressed.
Second, I would next focus on expanding the app to include other venues in the area. Currently the app is not very useful because it is unlikely a person will download an app just to see if they want to rent a venue. It is more likely they would download an app in which they had several venue options and could use the information about each venue to decide if they want to work with one of the venues.
Third, I would then consider adding to the functionality of the Client Portal area so that users could store Guest List contact info and use that to send invites and other pertinent event info about their event to guests.
Page updated
Google Sites
Report abuse