Style quiz and shoppable moodboards for engaged couples
Role: UX/UI Design, Strategy, and Research
Team: 1 UX/UI Designer, 2 Business Stakeholders
Platform: Responsive Mobile Web
Tools: Figma, Whimsical, Maze, Loom, Notion
Problem: Planning a wedding is stressful and the technology and the industry itself is far behind in technology.
Solution: A website where the user can take a style quiz, shop a custom moodboard, and get in touch with a wedding concierge all on their phone at their own time.
Outcome: I delivered the company’s first official prototype for the founders to pitch to investors, third-party vendors, and early adopters. The final design had a 100% task completion rate and was reported to be very easy to use by usability test participants.
My role as a solo designer with the stakeholders
Unveiling the Problem
Co-creators of Franck are industry experts with years of experience helping couples coordinate with vendors and plan weddings. None of the existing platforms allow engaged couples to browse specific third party vendors in one website with transparent pricing to create rough estimates before getting in touch with them.
Through some additional secondary research, I learned that 71% of couples ranked wedding planning as more stressful than buying a home or landing a new job.
Underestimate final wedding cost by 50%.
Lots of contracts
Manage an average of 15 vendor contracts while wedding planning.
Many don’t hire wedding planners because of associated time and cost.
Here comes the Bride
I spoke to newlyweds and engaged women about the experiences with the process. All of them reported their experiences handling third party vendors, and some talked about how wedding planners helped them ease into the process.
The Proposal (of Solutions)
I tackled the problem based on my research with potential solutions. I started with a user flow as a quick way to connect the clients’ features into a seamless experience. Here is a shorthand of the basic flow:
Find a Style → Shop Moodboard →
Estimate → Account → Schedule a Call
Based on my conversations with users and the business stakeholders, I came to the conclusion that scheduling a call was what was needed to help the users achieve their goal. Engaged couples reported getting in contact with and hopping on calls with vendors to plan their wedding.
**Spoilers: this could not be more wrong.
Wireframes to test the concepts
I started with rough sketches, moving into mid-fidelity to get some initial testing done fast.
The test revealed major pain points, especially with this portion of estimate screen. Looking at the button label, it was unclear to the user what the next step was.
To alleviate the pain point here, I needed to change the button labels revise the task flow to reflect a more straightforward experience.
I changed the button from "Create Account" to "Save Estimate," because this is the user's observed goal for the screen. It then prompts the user to sign in, which is a necessary task for their goal, but the user's expectation is explained in the screen. Along with the prompt to sign in was the link to create an account in case it was first-time user.
Engaged with Iterations
Given how visual-rich the experience of Franck is, it was evident that I needed to move into high-fidelity to test a fuller experience with end users.
Something Old, Something New, Something Borrowed, and Something...Accessible
Since my clients were new to designing for web, it was useful to show them the style tile accompanied with a mockup of a portion of the homepage. I adjusted colors on the brand palette to adhere to meet at least the WCAG 2.0 Level AA conformance.
This was a crucial step because it not only gave them a good idea of our direction, it also armed me with some basic UI components to design the rest of the site with. I moved the prototype with the necessary iterations up to high fidelity for further usability testing with end users. 100% of users were able to complete all the tasks, but the following are some of the major iterations based on the qualitative feedback I received.
Find Your Style > Schedule a Call
I originally thought that scheduling a call was the user’s end goal, but I was wrong!
I made iterations to highlight the style quiz as the primary call to action on the home screen, because testing revealed that first time users were more interested in this as their step 1 than scheduling a call.
The high fidelity prototype that I handed off can be viewed in the link below. The overall design resulted in a 100% task completion rate and was reported to be easy to use. Given the iterations I made, I hypothesize that the experience would be even easier to use across the board. Considering the early stage of the product, the impact was more qualitative to the user experience, which include the more approachable home screen that appealed to the user’s goals and a simpler UI layout that reduced cognitive overload.
A sampling of some of the high-fidelity screens
Happily Ever After?
This prototype is far from finished and my work only encompasses their first MVP, but it gave Franck a foundation to work off of to then pitch to investors, early users, and future designers and developers who will make this project come to life.
“Working with you has opened our eyes to the value of UX Design. We were more than satisfied with your diligent work for us. We are forever grateful for your ability to lead the charge in bringing our prototype to fruition.”
- Sloane and Heidi, Co-Founders and Clients
Moving forward, I included in my handoff a list of future recommendations not only for the product, but for the roadmap for future designers working on the project. Additionally, I helped put together their marketing website using the same visual style on Squarespace and it can be viewed live at hello-franck.com. Measuring the success of it once it hits the market, I recommended that they track quantitative measures such as completion rates for the style quiz as that was the main value prop of the website as well as conversation rates.
Collaboration as a Design Team of One
While I was the only designer working on this project, I had close communication and access to my clients, the co-founders of Franck. This was the first time that I took on the entire process alone and I learned a whole lot about efficiency.
I utilized new tools and methods such as Notion for project management and documentation and Maze for additional usability testing in short periods of time. Most notably, my favorite tool that I discovered was Loom. Often times, I had a lot of information that I needed to relay to the clients, so I utilized Loom to walk them through my deliverables so we can focus on the good stuff during our weekly meetings, and even had time to workshop ideas if we needed to.
"Martha took in all of our ideas and concerns for the user experience and product design and built out a clear roadmap for our project. She is diligent and to-the-point in her approach to task management and she over-delivered on every item. She is well studied in her craft and unafraid to take on any unknowns. We are so incredibly grateful to her for leading us to our launch day ––– providing us with our prototype, weeks of real user feedback + research, and our first marketing website."
Co-Founder and COO at Franck
Franck is currently preparing to seek early investors. Feel free to check out their marketing site here.
All doodles in this case study done by me.
Franck illustrations were provided by the company’s brand guide.
Thought that was interesting? Check out my other featured projects.