ToBeWed- App for the Newly Engaged

Timeline

September 2022 - December 2022

Role

UX Designer

Tools

Figma and MockUp

Responsibilities

User research, wire-framing, prototyping, iterating, etc.

Overview

The Problem

Newly engaged users needed better and affordable options for their wedding day.

The Product

ToBeWed is a mobile app designed for newly engaged couples to directly connect with their wedding planners to handle their bookings. It is also used for  couples to book on their own.

The Goal

To provide limitless booking options but, more importantly, precise and clean organization for those important appointments for the big day.

Understand the User

“A successful design, begins with the user in mind”

With this being the first app I created, I wanted to make sure that with each step in the design process, I questioned:

“What would the user do?”

When I asked myself this, it allowed me to create personas that represented the users I was reaching out to and most importantly, their needs.

User Personas

User Research: Before the Design

During the user research process, an unmoderated study was conducted based on finding the effectiveness of client messaging and if the vendors were adequate enough in supplying the users needs.

Pain Points

3 out of 5 users feel as if onboarding was the easiest part to complete. With that being said, make the booking and client messaging just as easy.

All of the participants were confused on the navigational aspect, and want differentiation in regards to onboarding.

Majority of users find it unclear where to find bookings and need more of a concise sample to test and organize bookings.

Majority of users found it difficult to see the profile tab, and needs more of an intuitive design to decipher the different elements of the app.

Summary

The results included correlated with some of the conversion rates and user error rates I was searching for when finding that the booking process needs more efficiency when trying make appointments with vendors.

The Pre-Design Process

With using the digital tool Mockup, I used mindfulness experimentation while visualizing how I wanted the user to view the app based on their concerns.

Drawing Wireframes

Digital Wireframes

This shows the homescreen where planners and newly engaged couples have a saved list and recommendations slide tab to showcase curated options based on their saved list.

During the process of making this lo-fi wireframe, I applied visual assets where you will be able to share the invoice with the client or planner. 

This is the prototype to the user flow of the lo-fi model of ToBeWed. While discovering and interpreting the issues of the model. I was able to gain more insights that can be applicable to high-fidelity model of the mobile app.

I conducted an unmoderated usability study with 5 participants from diverse backgrounds who tested the app for bugs, accessibility, and user efficiency. Here is what was found: 

Usability Findings

Majority of users find it unclear where to find bookings

1

3 out of 5 users feel as if onboarding was the easiest part to complete

2

Labels proved to be useful and the main indicator of what to look for.

3

Users couldn’t navigate client messaging, and want a clearer way to differentiate icons in the app.

1

2

3

all of the participants were confused on the navigational aspect

Onboarding was the easiest, an insight being focused on keeping the user flow of onboarding the easiest

Refine The Design

MockUps

Using notes from the usability study, I was able to completely transform how the users view the way they booked for their special event.

After Usability Study

Before Usability Study

Taking from the insights of the usability study, I applied foundational empathy tools to really take the users needs into account and iterating exactly what they need.

After Usability Study

Before Usability Study

High-Fidelity Prototype

Accessibilty Considerations

Adding a calendar function to where users can track their appointments and dates makes it easier for them to stay organized within the app.

In the profile tab, users are allowed to change different functions and aspects about their profile to make the app cater to their needs and wants.

Providing a share button for when users want to share vendors via client messaging allows for them to communicate back and forth with their planner.

Impact and Takeaways

“I like the easy user flow during onboarding. Most apps have such a long sign up process but this made it very easy to complete.” - Participant C

With keeping the user in mind, consistently iterating and testing designs for flaws and keeping the overall user flow was the #1 goal when creating this app and still is.

What I learned:

  • The flow of the app is has more initial importance than the color.

  • With this being my first app I created, implementing your experiments allows you to be creative but also thinking critically about your designs.

  • Empathy is now my #1 goal to meet when developing products. 

Next Steps:

  • Conducting more usability test with this app would be ideal. I ant to be able to fully maximize the potential of what this app has to offer to users around the world.

  • Adding more functions. This app has the purpose of having multiple updates so that it can be be fully functional for years to come.

  • Coming up with different designs that can be iterated into the process of research and developing common functionalities that the users love and deciding what the users don’t need.