Diners Club International celebrates anniversaries with a global toast, providing members with exclusive commemorative cocktail recipes. Here’s how a small team at FCB Chicago transformed the printed recipe book into a digital experience.
INTRODUCTION
⬥ the project ⬥
Tell me about this project
Duration
Timeline
Role
Platform
Tools
2 months (ongoing)
September 2024 - present
UI Designer*
Web & Mobile
Figma, Adobe Photoshop, Adobe Illustrator, Miro
*The team was small and had a lot of turnover. For this reason, I wore many hats at different points in the project including UX Designer, Project Manager, and Data Engineer.
⬥ the brief ⬥
Who is the client?
Diners Club International is a credit card company established in 1950, known for issuing the world's first multipurpose charge card. It was founded by Frank McNamara and Ralph Schneider in New York after McNamara allegedly had an embarrassing experience of forgetting his wallet at a restaurant.
Why are we doing this?
Diners Club International seeks to celebrate its 75th Anniversary with a global toast. Traditionally, the company offered its members with an exclusive cocktail book with commemorative cocktail recipes that reflect the global nature of the company. They aim to revive this tradition for 2025 but with an added twist: offer a digital experience to complement the printed book.
1
Design and develop a microsite that translates the spirit and content of the printed book to a digital space.
2
Ensure the microsite meets all legal requirements (content with alcohol) and considers WCAG 2.0 guidance for creating accessible experiences.
3
Increase brand awareness and create a consistent brand experience across the microsite and the company's flagship website: dinersclub.com.
⬥ THE approach ⬥
How do we tackle this brief?
⬥ The Scope ⬥
What am I designing?
GETTING STARTED
⬥ Gather &organize ⬥
What are my first steps?
I was fortunate to have been involved in the wireframing stage, during which I was able to provide feedback and input into the architecture of the site. While this was happening, I worked proactively to set up a Figma file for high fidelity designs and started to compile assets, build out styles and variables, and create common components like Button, Link, Dropdown, and Cards so I could hit the ground running when it was time to kick-off UI Design.
⬥ get inspiration ⬥
How do I get the creative juices flowing?
Getting inspiration and jotting down ideas is a critical step for me. I never skip this for a couple reasons: (1) users have mental models established, meaning there are existing patterns on websites that people are used to already. I like to find these patterns so I can make better design decisions and then communicate them to team members and the client. (2) getting inspired is fun! I love seeing the different ways people have approached similar problems. It makes me excited by the possibilities and usually leads me down a path of creative exploration that creates happy accidents.
As for where and how I get inspiration, my go-to is Mobbin for UX/UI patterns. I also love looking at Behance, Dribbble, and Awwwards for visual design inspiration - examples that push the boundaries, though may not be super practical for my project. Here's a peak into my UI inspiration folder in my browser bookmarks:
HIGH FIDELITY DESIGNS
⬥ HOME PAGE ⬥
Home Page Designs
Landing pages pose a very different challenge from functional pages like the Quiz and Recipe Filters. The central questions I asked were:
What is the purpose of the site and how do we communicate this up-front?
What first impression do we want to make?
Who are our visitors?
What actions do these visitors want to take, immediately? Do they want to explore? Get right into recipes? Maybe they'll need help figuring out which recipes would be of interest?
The answers to these questions were not easy to get alignment from all stakeholders. But we came through as a team and determined this site needed to stand up on it's own as a place where Diners Club member could visit, feel the spirit of the 75th Anniversary celebrations, and find cocktail recipes of their liking.
The main purpose is to provide a digital experience to the cocktail book; the recipes and cocktail imagery should be front and center. Secondary to this should be the Diners Club global brand, one that emphasizes togetherness and a celebration of different cultures. General brand guidelines and a 75th Anniversary-specific brand playbook were provided to me as reference for the website's look, feel, and tone of voice.
⬥ Recipes ⬥
Recipe Details Designs
Each of the 75 commemorative cocktails will have their own recipe page that includes the cocktail type (defined by the business), cocktail name, country (if applicable), level of difficulty, level of strength, description, ingredients (metric and standard), and preparation.
I maintained almost all of the elements included in the low-fidelity wireframes but did notice a couple things missing and/or that could be improved:
Copy Recipe Link: this was a feature I advocated to include to make it easier for users to share recipes. Though I initially recommended a "Share" function, the client was not willing to increase the budget for this feature. The "Copy Recipe Link" was a low-effort, low-cost way to achieve a similar goal.
Related Recipes Carousel: the wireframes included back and forwards arrows to navigate between recipes alphabetically. My instincts told me, though, that there could be a better way; that a way to explore similar recipes would be more valuable than exploring recipes alphabetically. I recommended the UX team conduct a quick, internal test to see if my instincts held up. I was happy to see that the results validated my instincts.
⬥ Recipes ⬥
All Recipes Page Designs
The All Recipes Page is the page users will be driven to for any and all filtering of the 75 cocktail recipes. Buttons, Links, and Chips that encourage users to explore a specific type of cocktail will take them to this page.
Though the page may look simple, I emphasized this is the most complex page of the site. It required data preparation and engineering for the recipes data, and then careful consideration on the user experience of the filters and states of the interactive elements. This was the page that I most leveraged my UX Design skills since the wireframes did not include dropdown menu states or lists. Here are a few items I advocated for on this page:
Difficulty & Strength Field Type: Initially, the wireframes used an Input Stepper with a plus and minus button to enable increasing or decreasing the level of difficulty or strength. However, using a stepper could potentially require users to click the plus or minus button 5 times to reach their desired level of difficulty or strength. Additionally, it assumes users will understand what a "5" means over a "4". The single selection of the Input Stepper would only allow 1 value at a time for the filter. To resolve these concerns, I recommended a multi-select dropdown menu with additional copy for each value. This way, users have more flexibility in selecting their preferred difficulty and strength fields and know what to expect from the filter results.
Pagination: Since there is a static number of cocktails (75), I advocated to use a design that exposes each page number (1, 2, 3, 4, and 5) as opposed to a design that shows only the active page number with back and forwards arrows to navigate. Showing each page number and providing a label clearly indicates to the user how many recipes exist, how many recipes are displayed, and how many total pages to expect when exploring.
Filtering in Mobile: Using eCommerce and Booking sites as inspiration, I designed a full screen modal to facilitate filtering in mobile. I initially used a bottom sheet modal but shfited to a full page modal after the client added a requirement to overlay a persistent Cookie Consent button on all pages, including overlays.
⬥ QUIZ ⬥
Quiz Landing Page Designs
The Quiz Landing Page wasn't necessary from a user experience perspective but was included for SEO purposes and to facilitate social media campaigns related to the 75th Anniversary. For this page, I kept it simple and to the point: give users 1 action, which is to start the quiz, and give a teaser of the curated cocktails.
⬥ QUIZ ⬥
Quiz Questions Modal Designs
There were 4 total questions in the quiz, which were essentially a more engaging way to filter the 75 cocktails. I also advocated for a few changes from the wireframes:
Modal: Initially, the questions each resided on their own page; however, I suggested the use of a modal instead to enable a more cohesive experience, one where users could skip questions or exit and return to the previous page at any point in time.
Close X: The wireframes did not include a Close X button. I pushed to include one so users do not get stuck within the quiz and can exist at any point in time.
Skip: Similarly, I recommended that we include a Skip button to give users the ability to not answer a question if they choose not to.
Loading State: the UX architects excluded a loading state for the quiz in the wireframes because the load time would be very fast. However, I suggested including a 3 second loading state as a form of feedback to the user, communicating to them that the system is taking in their input and working on producing results. I collaborated with the copywriter to include relevant copy so the user knows what's happening.
⬥ QUIZ ⬥
Quiz Results Page Designs
The Quiz Results Page seemed super simple at first: simply show 3 cocktails that match the answers from the quiz! But after the wireframe stage and further reflection, I had several questions that needed answers:
How do we choose which 3 cocktails are shown if there are more than 3 cocktails that match the quiz criteria?
What happens if there are less than 3 matches?
↪ If we "fill in" open spots randomly, how do we ensure the matches are not completely against the user's quiz selections? For example, if someone selects non-alcoholic, can we ensure no alcoholic recipes are recommended?
What happens if there are no matches?
I collaborated with the developers, UX architects, and account managers to address these questions, which worked in our favor since the client had very similar thoughts. I was able to get ahead of the client and present different states of the results page based on the most common scenarios anticipated.
⬥ bar basics ⬥
Bar Basics Page Designs
The Bar Basics Page was a late-to-the-game concept. The client wanted to encourage members to participate in the 75th Anniversary celebrations by making cocktails but realized not everyone may have the tools, techniques, glassware, and basic bartending knowledge to make the cocktail recipes. The intention of the page is to help bartending newbies learn the basics.
That said, when translating the wireframes to high fidelity designs, I noticed the experience architected for the website did not mirror the experience laid out in the book. In the wireframes, the UX Architects ordered the content by what they thought would be of most interest to the user: the iconic cocktail recipes first, then techniques, followed by tools and glassware. The book, however, treated this section like user onboarding: first, set up your bar with the tools that you'll need, then learn the techniques, and then get the glassware prepared. After that, now you're ready to attempt your first basic cocktails.
Noticing this disparity, I gathered the team to point out the misalignment in content strategy and recommended that the website mirror the experience of the book. Everyone, including the client, agreed we should make the changes to the website.
RESULTS & LESSONS LEARNED
⬥ RESULTS ⬥
So how'd it go?
It's too soon to tell since we are still developing the website with plans to launch January 1, 2025. That said, I've received an incredible amount of positive feedback from fellow designers, managers, the client, and the internal project team. As the only UI Designer on the project, I made sure to seek out second and third opinions on the UX and UI design decisions I needed to make. Additionally, development is going smoothly, albeit with some lessons learned!
⬥ Lessons learned ⬥
What did I learn? What would I do next time?
Even though the project isn't finished yet, I've already learned a lot from this project. Here's what I would do next time based on what went well and what could have gone more smoothly.
1
UI Design requires a UX mindset
I've encountered many people within FCB who think UI Design is only visual design. They equate the work to what Art Directors do in the advertising world: manipulating images in Photoshop, applying colors, picking fonts, etc. While some of this is true - I do focus on layout, composition, color, typefaces, spacing, visual balance and weight - this project would not have been successful in the UI Design phase had I not also thought about how the designs respond to different viewports and devices, how the website would be used, who would use it, what they want to achieve, how they would achieve it, and the overall digital experience.
Next time, I would once again keep my UX hat on, look at the wireframes with a critical eye, and raise my hand when I see potential gaps. I would also make the time to better educate the internal team on UX/UI design to avoid some of the confusion and miscommunications that occurred due to bad assumptions on what UI Designers do.
2
Images on web should be ~200-300 KB max. JPGs are preferred.
This was a knowledge gap on my part. I hadn't previously learned or thought about image size for web and had assumed the highest quality image is best. Once we started development, though, a kind developer shared with me that images on web are typically 200-300 KB max and a JPG.
Next time, I'll make sure to set the image export settings in Figma to JPG and test exporting the image to check for file size. If the file size is too big, I'll either use Photoshop's Save for Web (Legacy) setting or set the export setting to 0.5x or 0.75x to reduce the file size.
3
Research doesn't have to be formal. Even a small, internal group of participants can help elucidate the right direction.
I remember one meeting where 10 internal team members argued over the order of the Home Page's sections. Personalities were clashing. Power struggles were emerging. And there was no resolution in sight.
Hearing comments like "Well, if it were ME, I would want…" or "I don't know about you all, but I…" made me think we needed to do user research. I pointed this out to the group - that we're spinning in circles with no foundation for making this decision - and suggested we do quick and dirty user testing. We didn't have time to source the perfect participants but were able to find impartial FCB employees. After just 5 interviews, it was clear spirits were top of mind for users and we were able to use this insight to align internally and present the architecture of the Home Page to the client with confidence.