Header.png

Franck

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. 

01_Martha with Franck.png

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.

02.png

Vendor prices aren't always easy  to find online

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 $$$

Underestimate final wedding cost by 50%.

Lots of contracts

Manage an average of 15 vendor contracts while wedding planning.

Planners?

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.

FR Storyboard.png

Storyboard of the user's experience based on interviews

 
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

Sketches.png

A few sketches brainstorming the flow

I started with rough sketches, moving into mid-fidelity to get some initial testing done fast.

estimate.png

Portion of the Estimate Screen

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.

Revised Flow.png

Revision to the "Save Estimate" section of the flow

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.

Style Tile.png

Style Tile and Single Screen Mockup

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.

 
08.png

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.

09.png

Make it Easy to Find

To back up the primary CTA, I also decided to add "Find Your Style" to the navigation menu based on user behavior. Many of the users would check navigation for this link when reading through the middle of the page rather than scrolling all the way back up.

10.png

Less is More

I reworked the product listings layout to reduce cognitive and visual overload, because the test revealed that users were confused by interface and interactions available, specifically with the color swatches, which was heavily constrained by the small screen size. 

Outcome

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.

Hifi.png

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.

Lessons Learned

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.

07.png

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.

Client Testimonial

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

Heidi Halgund

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.

Featured Work

Thought that was interesting? Check out my other featured projects.

Arrow Birth

Desktop Web

UX/UI, Research

Paw Prints

iOS Mobile App

UX/UI, Research, Visual

PetHarbor

Website Embed

UX/UI, Research

Say Hello

Wanna know more about my projects or work together? Let's chat about it!

Call me, beep me,

if you wanna reach me...

  • LinkedIn
  • Instagram

© 2020 Martha Magsombol