top of page
Introduction
The Bach Planner
A responsive website that is mobile-first and features useful tools to help users plan bach parties stress-free.
Duration: July 2022 - November 2022
Tools: Figma, Canva, Google Meet
My Role: Product Designer
Skills: User Research, Wireframing, Prototyping, UI Design, Usability Testing, Logo Design, End-to-End Development
Background
Due to the influence of social media, extravagant bach parties have become the new norm, often spanning the course of a weekend or involving travel to another destination. When bridal parties are tasked with planning and organizing the bach party for the bride and/or groom, many people get overwhelmed and don’t know where to start. This involves creating an itinerary, managing event details, and accommodating the needs of the entire bridal party. The whole process can be daunting, stressful, and time-consuming without the proper tools or resources.
Objective
Implement the end-to-end development of a responsive website that is mobile-first.
Scope
Create an MVP that includes a case study presentation and high-fidelity prototype to hand off to developers.
Devices
Mobile
Discover
Discover
Why
-
Learn about competing party planning apps and services
-
Identify specific pain points, challenges, motivations, and needs when planning a bach party
-
Determine what is needed to provide a better planning and organizing experience for the user
How
-
Competitive analysis
-
User interviews
-
Affinity mapping
Competitive Analysis
-
Determined current competitors - direct.
-
I wanted to focus on other party planning apps that help users plan bach parties.
-
Identified their strengths and weaknesses, features, and what type of planning and organizing experience they have.
Takeaways:
-
In order to provide a better planning and organizing experience, my design must:
-
Provide free, essential planning tools
-
Ability to share event details and trip planning with a group
-
User Interviews
-
Interviewed 5 users within the target age group of 21 - 40 years old that was conducted either in-person or via FaceTime.
-
Empathized with their pain points and challenges when planning/organizing a bach party.
-
Identified their motivations and needs when planning/organizing a bach party.
Takeaways:
-
Pain points when planning/organizing a bach party:
-
Communication
-
Budget
-
Itinerary
-
“It was hard for us to communicate in between us being also busy and come up with a plan."
- Jonnicca (Female, 34 years old)
-
Motivations when planning/organizing a bach party:
-
Likes planning/organizing
-
Important event
-
Easy group communication
-
“Planning and organizing is something I like to do because of the creative aspect of it. I wouldn't mind planning a bachelorette party again because I think it's fun and exciting.”
- Marielle (Female, 31 years old)
-
Needs when planning/organzing a bach party:
-
Divide tasks
-
Centralized platform
-
Administration
-
“It would help to have an app to help centralize communication where we can share a group chat and itinerary.”
- Joseph (Male, 35 years old)
Define
Define
Why
-
Define the problems users face when planning/organizing a bach party
How
-
POV statements
-
HMW questions
-
User personas
POV Statements
-
Actionable statement that is addressing the problem we're trying to solve
-
I'd like to explore ways to help individuals who are in charge of planning and organizing bach parties to be able to communicate effectively in a group because it's difficult when they don't receive responses in a timely manner.
HMW Questions
-
Reframe question in a way that will help us generate solutions to the problem
-
How might we make communication within a group that is planning and organizing a bach party be the most effective?
User Personas
-
Identified user's goals, motivations, needs, and frustrations when planning/organizing a bach party.
-
Created 2 fictional characters that represents the target audience and helped me further empathize with the user and the problems they're facing.
Ideate
Ideate
Why
-
Brainstorm ideas and develop solutions to help solve our problems
How
-
Feature set
-
Sitemap
-
User flows
-
Task flows
Feature Set
-
Brainstormed possible features to include in the product.
Takeaways:
-
I kept my user personas in mind and thought of what features to include and separated them into 4 separate categories based on level of significance:
-
Must have
-
Nice to have
-
Surprising and delightful
-
Can come later
-
-
I prioritized what was needed to deliver an MVP and focused on including those in the final design.
Sitemap
-
Created a roadmap of the website and ensured priority features were included.
User Flows
-
Demonstrated the different paths a user could take when first logging into the app.
-
Created user flows for all the actions a user could take to access the different features and their functions.
-
The main 3 features are:
-
Guest List
-
Bach Chat
-
Let's Plan
-
Task Flows
-
Followed a user's journey through 3 specific tasks.
-
I discussed with my mentor and we decided to design flows that will show a user's experience with signing up to use the website, then using 2 key features, Bach Chat and Let's Plan, to plan a bach party.
-
Task #1: Sign up.
-
Task #2: Create a "Bach Chat" message.
-
Task #3: Create an activity.
Design
Design
Why
-
Establish structure, determine flow of design, and validate prior to applying UI design
How
-
Low-fi Wireframes
-
Mid-fi Wireframes
-
Logo Design
-
Icon Design
-
UI Kit
Low-fi Wireframes
-
After developing my task flows, I sketched out key screens for each flow using my iPad.
Mid-fi Wireframes
-
After receiving feedback from my mentor, I proceeded with developing my low-fi sketches into mid-fi wireframes using Figma.
Logo Design
-
I wanted to design a logo that was very simple and incorporated a ring to represent marriage.
-
I came up with 3 final designs using Canva and took a poll to see which was more favorable. After discussing with my mentor, we decided to proceed with logo option 1 because it was simple, contained the business name, and could be easily resized across multiple devices.
Final Logo:
Icon Design
-
I designed 9 icons to be applied to the UI of my design.
-
4 icons were used to represent the 4 different planning tools available on the website: My party, Bach chat, Let's plan, and Guest list.
UI Kit
-
I compiled a UI Kit, which contained all the elements that I applied to the UI of my high-fi wireframes.
-
Planning bach parties can be stressful, so I wanted the brand colors to feel fun, warm, and celebratory. I decided on the brand colors of blue, gold, and pink. I incorporated lighter shades of each color to function as neutrals and secondary colors.
-
For typography, I decided on 2 sans-serif fonts: Poppins and Circular because they were simple, fun, easy to read, and paired well together at different weights.
Prototype
Prototype
Why
-
Create a model that simulates how a user will experience the product
How
-
High-fi Wireframes
High-fi Wireframes
-
I used the UI Kit to adapt my mid-fi wireframes into high-fi.
-
After receiving feedback and performing any necessary iterations, I created a prototype using my high-fi wireframes that will be used for usability testing.
Mockup_1
Mockup_2
Mockup_21
Mockup_1
1/21
Test
Test
Why
-
Validate product by testing the high-fi prototype on potential users and refine based on any feedback that was received
How
-
Usability Testing
-
Priority Revisions
-
Final Prototype
Usability Testing
-
I tested my high-fi prototype on 5 users within the target age group of 21 - 40 years old that have planned/organized a bach party and have attended a bach party.
-
I performed moderated usability testing that was conducted either in-person or via Google Meet/FaceTime for all 3 task flows.
-
Success metrics were determined by:
-
User successfully completed each task.
-
User was satisfied with interface of product and found it easy to use.
-
User had minimal to no errors while completing each task.
-
User was able to complete each task within 2 minutes.
-
-
Task flows:
-
Task #1: Sign up.
-
Task #2: Create a "Bach Chat" message.
-
Task #3: Create an activity.
-
Takeaways:
-
5/5 users were able to compete each task successfully.
-
5/5 users found that the interface was simple and easy to use.
-
5/5 users completed tasks with minimal errors.
-
5/5 users completed tasks quickly under 2 minutes.
-
5/5 users were very satisfied with their overall use of the product to complete each task.
-
Errors:
-
3/5 users attempted to select a profile picture instead of skipping it (optional).
-
Priority Revisions
-
After collecting feedback from users, I prioritized what was important to improve the usability and interface of my product then made iterations to my high-fi wireframes.
Before:
After:
Iterations:
-
Removed "select a profile picture" because it wasn't a priority to have during initial sign-up.
Before:
After:
Iterations:
-
Added (+) icon to profile picture in dashboard screen to alert user they can add/change profile picture. This icon replaced having this step in the initial sign-up flow.
Before:
After:
Iterations:
-
Removed Jenna Watson from ‘Bach chat’ message thread because it confused users during the task flow when they had to send a new message to her when a thread with her name already exists.
Before:
After:
Iterations:
-
Removed drop shadow from buttons and changed stroke color of "Home" button and "Create new activity" button to look more clean.
Final Prototype
Conclusion
Conclusion
Conclusion
-
Overall, I believe that this prototype was a success because all users were able to successfully complete each task and found the navigation to be easy and familiar. I also learned a lot and was able to identify areas of improvement for further testing and development of my design.
Future Considerations
-
Due to the quick turnaround of this project over the course of 4 months, there are a few things I would do differently if given the time and resources:
-
Interviewing a larger and more diverse group of individuals so that I can gain more insight.
-
Ask for feedback earlier on in the process and make revisions as needed.
-
Enhance the overall UI of the design to make it more appealing and step out of my comfort zone with more color and images.
-
Conducting usability testing with more people to get more feedback.
-
Continuing to build out the remaining flows.
-
Continuing to iterate and improve the overall functionality and interface of the product.
-
Working with a developer to finalize the product and bring it to life.
-
bottom of page