Working with a team of 4 designers, we were tasked to upgrade Perfect Tux's current e-commerce website to a custom solution tailored to their customers needs. We were also asked to develop a new feature—a Wedding Party Portal—which will offer an easy and convenient way for wedding couples to register and manage the groomsmen wedding attire.
We completed this project in a three week sprint, checking in and presenting our progress with the founder of Perfect Tux every week.
Our team used Slack and Zoom to communicate, Miro for assembling user flows and interview data, and Figma for mockups and prototyping.
Our team's first step was getting the lay of the land so to speak. We needed to know what Perfect Tux's competitors were offering and how their sites were designed before we could begin designing anything ourselves. We took a look at several online tuxedo retailers and highlighted some of the features we wanted to include in Perfect Tux's redesign.
After our first round of competitive analysis we developed three main goals we wanted to pursue:
To achieve the first goal of our redesign, we would need to conduct additional research. To give our team a better understanding on how actual users sorted products, I designed and conducted an open card sort survey, using Perfect Tux's own mailing list to gather participants. We received a total of 13 responses, which was more than enough to begin work on Perfect Tux's information architecture. We created a mockup of Perfect Tux's current navigation system, as well as our proposed redesign. Our goal was to reduce the total categories a customer would need to sort through, and make it easier to narrow down their selection using filters.
In order to ensure our navigational redesign was sound, we sent out a card sort survey to Perfect Tux's customers. We asked them to organize the product categories that Perfect Tux offered in order to see how customer's naturally grouped products, such as tuxedos and dress shoes. We learned a lot from this research, and can be confident that our design decisions are backed up by real data.
To give our team a more realized picture of customer behaviors, frustrations, and desires, we conducted a series of user interviews with people who had recently been involved in planning a wedding, or coordinating outfits for groomsmen. We asked questions about their habits, the logistics of wedding planning, and their overall experiences. Our team then engaged in an affinity mapping exercise where we distilled our interview findings into four distinct personas, each representing a potential subsection of Perfect Tux's clientele. The first Persona, Mark Davidson, became our primary persona for the duration of this project as he best represented the customers we were developing the wedding portal for.
.jpg)
With our target users well defined, it was time to begin designing. As one of the lead designers on the team, it was my responsibility to sketch out an outline of how the wedding portal feature would work. Using Miro, I outlined a user flow of the overall process we had in mind for a customer planning a wedding. Using this as a baseline, I roughly sketched all of the screens we would need. This sketching process was crucial because it allowed our team to very quickly outline how the prototype will function. We could easily make changes to our outline along the way, even before we start building screens using Figma.
.jpg)
After the low fidelity sketches were complete, and the user flow was solidified, we began to build our greyscale prototype in Figma. We started with a simple onboarding flow, one that would make it easy for a new user to enter the wedding portal and begin inputting all of the most important information for planning their wedding. Our initial research proved to be very helpful for this process.
We learned from our interviews with Perfect Tux's customers that planning a wedding is hard work, and our meetings with our stakeholders showed us that it's difficult for the business as well. There are a lot of moving parts to keep track of: multiple guests, all with different sizes and needs, tight deadlines, and a demand for perfection, all requiring input from all of the involved parties.
Our team conducted 4 user tests to ensure our prototype was working correctly, and to identify any improvements that could be made. We wrote up a script for our tests to follow and quickly reached out to potential users. The participants were instructed in the general purpose of the website and then were given a set of tasks to complete.
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.
Wedding Portal: Participants were confused by the initial navigation - the top nav 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.
Party Invite: One participant requested the ability to customize the invite message.
With testing complete, and knowing several improvements which could be made, our team began work on the high fidelity prototype of the website and wedding portal. Starting with the homepage, we took what we learned from our research and user testing and applied it to our design.
In the image below we can see Perfect Tux's original homepage on the left, and our final design on the right. The new homepage features a much simplified nav bar, reduced visual clutter, and the new color scheme.
As is typical of any good UX project, there are countless iterations of every screen, down to the smallest detail.
The navigation bar in particular was something we spent a lot of time designing. Here are just a few of the designs our team came up with before we settled on the final design.
The next major section of the site's redesign was the Wedding Portal splash page. Our team felt that the original page needed to be reworked in order to get users more excited about the new feature Perfect Tux was offering. To make the new page more enticing, we simply reworked the content that was already there, making the gorgeous photography pop by extending it across the entire screen. We added a bold new call to action button to draw them in, and restructured certain page elements so the user did not have to scroll quite so far to learn more about the Wedding Portal.
We learned in our research phase that users often were confused by the organization of Perfect Tux's products. The original site has numerous product categories, and several redundant filters. In addition, each product page has superfluous information at the top of the page, forcing the user to scroll down relatively far in order to reach the specific suit they are looking for. To address these issues we simplified the product grid page, removing all of the extra filters and bringing the suits front and center.
In addition to building the wedding portal, we were tasked with redesigning the structure and visual identity of the site itself. While we continued our work refining our greyscale prototype, our team began to consider a new look for the site. We experimented with a variety of color palettes inspired by Perfect Tux's current colors. In addition, we tried to take inspiration from the brightly colored suits that Perfect Tux offers on their site.
Unfortunately, none of the color palettes we tested worked well. Our team wanted the site to be vibrant and bright to match Perfect Tux's merchandise and company values, but the colors we tried made the site more difficult to read, and ultimately distracted from the products themselves. In the end, we chose a simple black and white color palette, with a warm gold that added a pop of color to our buttons and navigation. By doing this we kept the site clean and legible, while allowing the bright colors of the suits to be the main focus.
While working with color, our team also experimented with many different fonts to use on the new website.
Perfect Tux's current site has too many different fonts floating around its many pages, and that can be a problem for consistency and legibility. Our goal was not only to breathe new life into the website's look, but also to make it easier to read and navigate.
We decided that the Montserrat family struck a good balance between refinement and clarity and chose it for our navigation and copy. Playfair Display was perfect for the site's attention seeking calls to action. Finally, VTC Bayard was chosen to refresh the site's logo.
It was important for Perfect Tux to have a website that was mobile responsive. Our team wanted to create a platform that was accessible for everyone, and simple enough that the wedding portal could be used on a smartphone. We began development on the desktop platform first, and then scaled down our designs to better suit smaller devices.
Here is a demonstration of a user going through the onboarding process of the wedding portal for the first time.
As there is a great deal of information being entered by the user in this process(including the contact information of the user, their partner, and the entire wedding party), we did our best to make the process work smoothly.
To keep the user motivated to continue, we added a progress bar at the bottom of the screen. We felt that it was very important that the user felt like they were constantly making progress.
The next step for the user is planning the outfits for the wedding party. Our team came up with a system that allows multiple outfits to be customized for each member of the wedding party.
The user can easily add items to each "look", one piece at a time, until all of the outfits have been customized to their satisfaction.
We designed multiple potential solutions for this system, before arriving at the simple grid based design you can see here. This allows the user to visually manage each item, and makes it easier to coordinate different colors and experiment with different outfit combinations.
The next part of the prototype takes place from the perspective of a member of the wedding party. In this scenario our secondary persona, Brian Jones, has just received an email letting him know that his outfit has been chosen for the Davidson wedding.
Our team wanted to make the process for the guests as painless as possible. Upon opening the email, all the user has to do is choose their name from the provided list and find their size using Perfect Tux's simple algorithm. Once this has been completed, everything they need for the wedding is in their cart and ready to be purchased!
Our team accomplished a great deal over the three weeks we worked on this project, but one thing I've learned about UX is that there's always more that can be done! If I were to continue working on this project, I would be interested in further testing and refinement of the wedding portal feature. I would like to see how the improvements we made to the site's navigation are implemented by the development team, and if they improve customer interest and overall sales.
Lastly, I would like to pursue Perfect Tux's other potential customers, particularly the prom demographic. With only a limited amount of time, and with a busy wedding season fast approaching, the scope of our project was limited to focus on customers that were getting married. I believe there is a great deal of possibility for innovation in the prom market, and I would be very excited to continue developing new features for Perfect Tux.
Many thanks to Steven Burton of Perfect Tux for the opportunity to work with such a great company. Big shout out to my teammates, Awa Nyamuhindu, Harry Rappaport , and Madeline Tachibana; I couldn't have done it without you!