Home page for mobile devices

Project Brief: Perfect Tux

Perfect Tux is a Santa Clarita-based men's formal wear provider, with a focus on styles and designs for BIPOC individuals. My team worked with Perfect Tux founder Steven Burton to redesign their website's wedding planning portal. We also created a mobile version of the portal, and reworked the categories for their store page.

The Team/My Role

My team consisted of 3 UX Designers and 1 UX Researcher. As the research lead, I created user interview scripts, conducted 4 user interviews, ran 4 usability tests, led participants through a card sorting exercise, and synthesized research findings. I also worked with my team to create personas, user flows, low fidelity wire-frames, and a high-fidelity prototype.

Problem 1

Individuals planning their wedding need a convenient, easy-to-use interface to coordinate outfits with their wedding party.

UX Solution 1

Redesign wedding portal in line with feedback from users in order to streamline users' outfit planning experience.

Problem 2

The current Perfect Tux website's shopping section has too many categories to choose from, confusing many customers.

UX Solution 2

Employ user feedback to improve categorization of wares in online shop.

Categories & Information Architecture

In order to improve Perfect Tux's customer experience, I ran six participants through a card sorting exercise. Participants were asked to go through a variety of items from Perfect Tux's online shopping catalogue, create groupings of similar items, and name the groups/categories. Using this data, I then created a simplified set of categories and filters for use in the new user interface.

Original site categories

New, card-sorted categories.

Competitive Research

Initially, I researched other companies in the tuxedo and formal-wear space such as The Black Tux, Generation Tux, Combatant Gentlemen, and Indochino to see the pros and cons of each platform. I took note of their features and specific offerings to aid with the initial brainstorming session.

User Interviews & Initial Task Analysis

Methodology & Participants

I interviewed four users about their experiences planning outfits for their respective weddings via video call (Zoom, Discord.) User permission was obtained prior to recording. Users were asked additional follow-up questions post-interview.

Two users were age 30, one was 32, one was 35, and users were split 3 (male) to 1 (female) among gender. All four users had either recently been married, or were in the process of planning their wedding.

Findings

Overall: Overall, participants seemed to find Perfect Tux (or another formal-wear retailer) via internet search or word of mouth. Planning online tended to take more time than in-person.

Wedding Planning: Two participants wished they had started planning their wedding sooner.

Attire Planning: Grooms and groomsmen typically put off attire planning until very close to the wedding date, and expressed regret for this.

Coordinating Outfits:

Brides planned dresses far sooner than grooms and groomsmen planned their tuxedos.
The vast majority of groomsmen appeared to order matching suits according to what the groom was wearing.
Groomsmen usually paid for themselves, however one participant paid for all of the groomsmen and then had them pay back the money.
Groomsmen coordinated via email, group text, and chat.

Perfect Tux Specifics: The 1 participant who had used Perfect Tux before was unaware it was a black-owned business, however they were pleasantly surprised to find out. This participant also repeatedly highlighted the friendliness, professional attitude, and helpfulness of Perfect Tux’s customer service representative.

Synthesizing Data

After analyzing the data from the user interviews, I created four distinct personas, one to represent each category of customer at Perfect Tux: Groom, Bride, Groomsman, and Prom Attendee. For the majority of the project we focused on the Groomsman persona, Brian Jones.

Persona A: Brian

Mid-fidelity outfit selection example, desktop version

Design

Sketches & Wireframes

Our main challenge was to create an intuitive, appealing wedding portal interface for both mobile and desktop devices. We held a brainstorming session to come up with design ideas, discussed them with our client, and created wireframes to test our ideas.

Research Pt. 2

Usability Testing

Methodology

I conducted 4 usability tests using the prototype our team built in Figma. Participants were instructed in the general purpose of the website and then were given a set of tasks to complete. Tasks were:

Navigate to the wedding portal & create an account
Enter information for the user’s wedding (Date, Suits Needed, Party Participants)
Add a look & find size
Invite participants
Check out

Participants were instructed to give feedback as they went. Participants were observed as they interacted, and were given guidance as needed. Follow-up questions (frequently in the form of “why” or “how”) were added on-the-spot to give further insight into participants’ thought processes.

Participants

Participants were recruited from General Assembly’s UXDI cohort and from convenience sampling.

Findings – Positives

Home Page: 4/4 participants remarked positively on the homepage, praising the hero image, ‘clean’ look, and small amount of copy.

Account Creation & Wedding Info: One participant enjoyed the letter-style graphic, noting that it looks similar to a wedding invitation. All participants complimented the progress meter and the simplicity of the design.

Product Grid/Looks Page: Participants praised the colorful selection of suits/tuxedos, as well as the filters.

Checkout: Participants praised the style, simplicity, and overall design of the checkout process. One in particular liked the continuation of the ‘letter/envelope’ theme from prior screens.

Findings – Areas to Improve & Suggestions

Home Page: All participants noted the two different areas stating “style and grace,” however this can be fixed once the image is updated to not have the text. One participant expressed surprise that the store only sold - and didn’t rent - tuxedos.

Suggestion/Action: Fix photo to not have “style and grace” text. Add a note (in FAQ perhaps?) mentioning that the store doesn’t do rentals.

Wedding Portal: Participants were confused by the initial navigation - the top navigation bar had “wedding portal” which took us to a page which then had “enter wedding portal,” which they thought was redundant.

Suggestion/Action: Changed top navigation to “Weddings,” which then takes us to the wedding portal splash page with an option to “Enter wedding portal.”

Wedding Party: One participant was confused that their name appeared on the wedding party list.

Suggestion/Action: Made “what is your role in the wedding” screen more prominent in the initial login flow.

Shopping/Looks Page: One participant had difficulty reading the item text, filter text, and arrows on the bottom navigation due to their small size. Another noted that the blank ‘add look’ page had a dollar amount in total already. Lastly, one participant was surprised there wasn’t a ‘send invite’ button at the bottom of the page once looks had been added.

Suggestion/Action: Increased size of text and navigation. Fixed the erroneous dollar amount on the initial page. Moving forward, will add a send invite button to the bottom of the page.

Product Details Page: One participant requested a reminder of the role they were choosing a look for, as well as a preview of the different outfits.

Suggestion/Action: Add a “shopping for (role)” note in a prominent position.

Size Finder: Participants noted that the drop-down arrows weren’t in identical positions for each line in the size finder, and that the progress meter changed places between screens.

Suggestion/Action: Fixed location of drop-down arrows and progress meter.

Party Invite: One participant requested the ability to customize the invite message.

Suggestion/Action: Add the option to customize the invite message.

Final Prototypes

We adjusted our prototypes to better address the issues and concerns from our usability testing, and from there developed our final products. Click the image on the left to explore the prototype mobile app as the groom, Mark Davidson.

Click the image on the right to explore the mobile app as one of the groomsmen, Brian Jones.

Groom

Groomsman

Next Steps

Looking forward, I would like to add greater functionality to several of the features we implemented.
I would like to allow users to select roles from a drop-down list, instead of just having "bride" or "groom". It's important to have inclusive options, and one shouldn't assume a heteronormative wedding. There may be two brides/grooms, there may be bridesmen and groomswomen, etc.