My journey as a UX designer started with 12 years as a teacher. Teachers know the art of balance, and so do I – whether it's in a website, app, curriculum, or a well-mixed drink. Beyond the pixels and code, my passion for UX design extends to the world of flavors. TeachersDrink.com is where my love for design meets the art of mixology, inviting fellow educators and home mixologists to craft their own liquid masterpieces.
I observed user frustration with recipe apps featuring lengthy stories, frequent pop-up ads, poor mobile-friendliness, and insufficient detail in directions, prompting users to close these apps.
TeachersDrink.com was meticulously designed by teachers, for teachers, and all home mixology enthusiasts, to provide a beautiful and user-friendly platform. It offers a mobile-friendly, enjoyable, and effortless experience, making it the go-to destination for discovering cocktail recipes and enhancing mixology confidence.
I am set to launch TeachersDrink.com in April 2024 and will share the impact, including the initial user numbers for the first month, on May 1st, 2024.
Before crafting the right user interview questions for a new product, I like to really understand the product myself... In this case, that meant learning about mixology and cocktails! I enjoy most forms of research, but researching, and more importantly testing mixology - undeniably fun!
5 User-interviews were conducted to help empathize with users, understand user pain points, why users search for cokctial recipes, and potential gain creators.
The Affinity diagram narrowed my focus to some of the key information below: Users try a variety of recipes, they often use Google, Pintrest or follow famous chefs to find recipes online, they search for new recipes to impress, learn, or for acuracy. Users want unique ingredients. Pain points included lack of confidence, tools or ingredients, as well as pop-ups, long storys, lack of detail, no pictures. All of my uses use their phones to find recipes.
From the Empathy map, I created Andy - a middle school teacher who loves making cocktails with his boyfriend each night after work. The journey map, then helped to bring his pain points to life in a typical evening while trying to find something new and unique to create.
.jpg)
Teachers Drink is developing a mobile based cocktail recipe website to help teachers and other users build confidence while creating unique and fun drink experiences.We’re better because we will put reading recipes and instructions first along with fun teacher puns. We will build our ad's into descriptions and pictures, rather than pop-ups; and we will cut out stories to let users focus on their goal of finding a new fun recipe on a beautiful website.We’re believable because we are teachers offering other teachers a fun, unique way to make cocktails.
Whimsical & Fun Teachers
The original brand took a playful approach, renaming cocktails with a whimsical teacher theme, such as transforming “Corpse River #2” into “The Copiers Jammed”. While this approach included hours of laughing while drinking and creating playful names with other teachers, when I put this feeling into a design language something was clearly off… The comedy led to an overly kitschy aesthetic that didn't align with the sophistication and elevation of the showcased cocktails. As I dived into the messy work of going back and forth between sketches and creating mood board after mood board it revealed a mismatch between the childish aesthetic and the content's quality. In the end, I had to turn away from the brand's original humor, to create something more refined and classic.
Sophisticated, Elevated, Educational, and Fun
As I refined the website style, I defined the ultimate feelings I wanted to convey as sophisticated, elevated, educational, and fun, with an art deco vibe. Navigating design choices, I honed in on key styles like Black Board, and I played with clean gold lines vs. messy chalk lines. I also went through numerous color palettes. In the end. The final output seamlessly blends elements from various boards, presenting a cohesive style that aligns with the desired website ambiance, I even managed to pull in just the right amount of teacher puns while still balancing an elevated appearance - like naming the difficulty levels: Elementary, Secondary, and Graduation. User research also highlighted evening mobile usage, prompting a focus on creating a low-light-friendly app.
I decided on Montserrat for headings, and text as it is easy to read, especially in low light, and echo's the sphistication of the Art Deco feelings
I decided on Kalam for an accent font the echos the feeling of white board markers and teaching with easy readability.
The background is a dark gray (not fully black) to make it easier to see in low light without needing light and dark modes. We chose bright colors that stand out against this background. The text is light gray to make it easy on the eyes.
Icons are hand drawn to evoke feelings of fun and chalk boards, while still elegant and simple.
.svg)
.svg)
.svg)
.svg)
I used full shadows arund cards, to help guide users to intuitively touch and interact with them.
User research showed that great images were key. As a UX designer, front-end developer, and content creator, I tried making high-quality hero images for each drink. But, while Ihad fun drinking, I realized I'm not great at cocktail photography. So, instead of improving my photography skills, I learned to use AI for image generation with Midjourney. The results were impressive. To reassure users, I also include "real" cocktail images alongside the AI-generated ones. This way, users get both realistic images to boost their personal confidence, and inspiring visuals to catch their attention and inspire them.
See if you can guess which is mine, and which is Midjourney's image below? (LOL)
.jpg)
I adopted a mobile-first approach in designing the webpage, recognizing that my users predominantly access Recipe websites through their phones. This strategic choice not only aligns with user behavior but also facilitates the development of a more effective responsive design.
While constructing the prototype in Figma, I initially incorporated an App-style bottom navigation. However, recognizing the rarity of such navigation on websites, I revisited my research. I rigorously tested Pinterest's web-version bottom navigation across various browsers, notably Chrome and Bing, to assess its real-world usability. Additionally, seeking insights from experienced UX designers regarding the use of bottom navigation for mobile websites, I refined my approach.
Ultimately, considering the variance in how certain browsers and phones handle the bottom navigation area, I opted for a top bar navigation. This decision ensures consistent functionality across all configurations, prioritizing a seamless user experience.
During the initial round of user testing in Figma, it became evident that users instinctively clicked on the images when they desired to craft a cocktail. However, a notable finding was that they were not aware that pressing the "Get Recipe" button would lead them to a more detailed recipe page. As a result, this observation prompted me to rename the "Get Recipe" button to "Get Details" for improved clarity and user understanding.
Still getting the hang of Front End development using Webflow, there were times when my designs outpaced my skills, nudging me to simplify things for a quicker MVP launch.
For instance, I had to ditch the horizontal scroll for my top quick filter navigation and spread it across multiple lines. On the details recipe page, I initially dreamt of dual-function filters—converting from OZ to ML to Parts and from 1x to 2x to Batch. After days of custom coding, I dialed it back to three choices: OZ at 1x, ML at 1x, and Batch with ML.
Also, my grand plans for cards growing longer or shorter had to be cut for now. My CSS and JS skills weren't quite there to make cards flip while also smoothly resizing.These tweaks aren't because I lack ambition but rather a reality check on my current skill set. I'm excited to keep learning though, and fix these details as I go.
In the world of front-end development, my primary aim, aside from making the real thing look like my Figma files, was to create a CMS input system. The dream? Any contributor, even those who'd blink at the term "front end," should be able to add and tweak recipes seamlessly. So, I built 7 CMS collections in Webflow. They act like magic folders that any contributor, design-savvy or not, can edit and manage - and new cards and pages pop up and update on the platform like clockwork. Easy for the contributor user; howver, this needs to be tested...
Collaborate with fellow contributors to swiftly populate the platform with content.
Kickstart platform usage and gather feedback from users.
Refine user experience based on real-time insights.
Inform content creation strategies.Enhance SEO performance.Optimize affiliate link engagement.
Align with current Figma designs.
Introduce paywalls for added monetization opportunities. Enhance user experience with value-added features. Expand the Learning section.
Overview: From intern to UX team manager, led the design of bizinc.io Beta 2.0 MVP.
My Role: UX/UI intern, UX/UI team manager, and social media content creator.
Overview: Led Bizinc.io's Explore product creation - an interactive map for users to find local business.
My Role: As UX/UI team manager, oversaw product development from research to high-fidelity prototypes and pass off to front end development team.
Impact: 95% success: Users easily found local businesses on our prototype, engaging in CTAs.
Overview: Created a prototype of the landing page for the top level domain .c
My Role: Freelance UX/UI researcher and deigner.
Take Away: When I was contracted to create a landing page for the top-level handshake domain .c I was excited and a bit nervous due to my lack of knowledge… “What is a handshake domain”? During this work, I learned a great dealabout domains and helped reshape the stakeholder's target audience in the process.
