Mobile App Design | UX Research | Branding

Tools
Figma; Adobe Illustrator & Photoshop; Microsoft Suite

Duration
September 2023 - June 2024

Team Members

  • Project Lead/UI Designer 

  • Content Lead/Graphic Designer

  • UX Designer/UX Researcher

  • UX Researcher/Graphic Designer

My Role

  • UI Design: Led branding, UI Kit creation, and marketing design

  • UX Design: Conducted surveys, created personas and task flows, supported usability testing, and collaborated on iterative design.

Another Vodka-Cran Please!

Yes… again…

During my final two years of college, I realized my drink orders at bars or restaurants were always the same, lacking a certain level of sophistication. My go-to Vodka Cranberry was convenient, but it became monotonous. Like many, I didn’t have the time or means to research new cocktails each time I went out, and there were no apps that directly recommended me new drinks. Trying a new cocktail often relied on word-of-mouth or randomly choosing one from a massive menu.

Sharing this frustration with four other Drexel students, we created Clink.

Clink is a user-centered mobile app designed to enhance the bar experience by providing an engaging, intuitive interface that simplifies drink choices. Through a systematic approach grounded in research, we validate assumptions about user needs, define a clear MVP, and shape the app’s design based on insights gathered. Clink allows new and inexperienced drinkers to explore and enjoy their drink options with confidence.

Challenge

Ordering at bars can be challenging due to unfamiliar ingredients and complex menus, which can create barriers to fully enjoying the experience. With no existing app to guide users in making confident, informed choices, there is a clear need for a solution that simplifies decision-making and enhances the overall bar experience.

How might we help new and inexperienced drinkers confidently navigate bar menus, make informed choices, and enjoy their bar experience without feeling overwhelmed?

Approach

01. Building on Research, Grounding the Vision

To lay a solid foundation for Clink, we undertook rigorous research for a duration of 6 weeks, anchoring our approach in real-world experiences. By combining social media insights, surveys, and interviews, we developed a comprehensive understanding of our users’ thoughts processes, directly informing Clink’s design and functionality.

RESEARCH GOALS

  1. Validate core assumptions about the problem

  2. Understand who our targets users are

  3. Discover our users’ paint points, needs, expectations, and motivations

SOCIAL MEDIA RESEARCH

Reddit was a key research tool to gather anonymous, unbiased opinions and authentic experiences from real users. This platform allowed us to validate our problem statement, confirming that the frustration of deciding what drink to order and the overwhelming experience at bars is more widespread than we initially anticipated.

SURVEYS

To further validate our problem statement and refine our target audience, the next step was to conduct surveys. By aiming for around 100 responses, we gathered quantitative data that strengthened our insights. With 102 respondents, the survey data not only reinforced our problem statement but also helped us clearly define our target audience: new drinkers aged 21-28.

USER INTERVIEWS

Now that we had the quantitative data, it was crucial for us to gather qualitative data through user interviews to gain deeper insights into users' thought processes and behaviors around ordering drinks at the bar.

Method: We recruited 10 participants through our personal networks, mapped out a strategic question flow, and crafted a detailed interview script. Sessions were 45–60 minutes via Zoom.

Flow of questions to ask participants during user interview sessions.

Participant comments from the interview sessions.

User Interview Key Insights:

PERSONAS & JOURNEY MAPPING

With the data we collected, we now had to gain a deeper understanding of our target audience and further explore the two key use cases identified from the interview data. For the personas that were created, Emily is more introverted and would typically use Clink to avoid conversing with the busy bartenders while Emilio is extroverted and would use Clink when seeing how busy the bartenders might be. This process allowed us to examine users' needs, expectations, and motivations when ordering drinks, ensuring that our design decisions were rooted in user behavior. For both personas and respective journey maps, the scenario they were in are the same: going out to a bar, reading a menu, ordering a drink, trying the drink, and reflection.

Journey Map Key Insights

Both personas revealed shared pain points and opportunities:

02. Laying the Foundation for Clink

The research provided us with robust data, enabling us to progress to the next phase of refining Clink’s MVP and establishing its brand identity. This was a pivotal step, as it laid the foundation for shaping the product’s core functionality and ensuring that the product aligned with both user needs and Clink’s vision.

FEATURE RESEARCH

To ensure a well-informed and user-centered approach to Clink’s MVP, we conducted extensive feature research using competitor analysis, an effort/impact matrix, NUF analysis, and user surveys. These methods allowed us to thoroughly evaluate potential features, balancing feasibility and value, ultimately narrowing down to 8 key features that aligned with user needs and business goals for the MVP.

SITE MAP & USER FLOW

Our team developed Clink’s initial site map and mapped out user task flows based on insights from our internal whiteboarding workshop. This step was essential in providing a clear framework for the user journey, which laid the foundation for the iterative design process. By establishing this structure early on, we ensured that the design would align with the intended user flows and create a seamless experience throughout the product.

BRANDING

I spearheaded Clink’s style and branding while collaborating closely on the site map and task flow development. To efficiently kickstart the UI kit creation, I focused on defining Clink’s visual identity. I conducted a survey with 25 participants, whose feedback helped solidify the brand direction. I asked participants what adjectives they associate with Clink, and their responses provided valuable insights into the emotional and cognitive associations they have with the concept, ensuring the branding aligns with their expectations. Based on their input, I proposed that Clink’s brand identity should embody a classy, upscale, and engaging aesthetic, with a dark mode design to enhance usability in dimly lit bar environments.

03. Designing the Clink Experience

With the foundational backbone of Clink in place, we were ready to dive into the iterative design process. We began with wireframes, moved on to building a comprehensive UI kit, crafting marketing assets, and developing interactive prototypes—each step essential in transforming Clink’s vision into a seamless and engaging user experience.

WIREFRAMES

Building upon the site map and user flows established in the previous phase, we conducted multiple whiteboarding sessions to map out screen designs and refine user journeys. Through a process of sketching, whiteboarding, and then digitizing, we iterated on wireframes, identifying any missing screens and incorporating A/B testing with participants to ensure our design decisions led to the most intuitive user experience.

UI KIT

I spearheaded the creation of Clink’s UI Kit, following the Atomic Design Method to establish a cohesive and efficient design framework. While we didn’t have a dedicated development team to build a full design system, I organized the UI Kit within a Figma design file, utilizing core Figma features such as variables and variants. This approach was essential in creating and streamlining components, ensuring consistency and efficiency throughout the app’s design process.

MARKETING

I led the creation of engaging marketing assets for Clink, including Instagram posts and stories, fundraiser materials, exhibition posters, and business cards. These assets were designed to generate excitement and support the promotional efforts leading up to the senior showcase.

PROTOTYPE

Prototyping was a crucial step in Clink’s design phase, driving the project toward completion. At each key milestone—low-fidelity, mid-fidelity, and high-fidelity—I contributed to multiple rounds of usability testing. Leveraging Figma's prototyping capabilities, we conducted sessions both via Zoom and in person. After each phase, our team collaboratively synthesized the testing data, refined user flows, and strategized design improvements, ensuring an iterative, user-centric approach that consistently enhanced the user experience.

Impact

  • Presented Clink at the senior showcase and exhibition, where we engaged directly with users and assessed its potential real-world impact.

  • Received enthusiastic feedback from the business community, sparking interest in bringing Clink to market.

  • Inspired by the positive reception, our team is committed to further developing Clink to align with user expectations and market demand.

Learning Outcomes

  • Thorough research before defining and designing was time-intensive but essential. The synthesized data validated our assumptions, preventing repeated steps making revisions to the initial problem statement and MVP.

  • Adapting to multiple roles throughout the project was challenging but necessary. Clear communication within the team was critical, optimizing development time and ensuring alignment.

  • Maintaining an open-minded and curious approach allowed me to explore Figma variables deeply, leading to continuous learning and skill enhancement with this feature.

Next Steps

  • Survey with High-Fidelity Prototype:
    I plan to conduct a survey using the high-fidelity prototype to gather detailed user feedback on the app’s functionality, usability, and visual design. This will help validate the design decisions and identify areas for refinement before moving into development.

  • Beta App Development:
    Engaging a development team to build a beta version of Clink will allow us to test the app in a real-world setting, collect data on user interactions, and address technical feasibility while ensuring alignment with the design vision.

  • Expanding the UI Kit into a Design System:
    I aim to expand Clink’s current UI kit into a comprehensive design system, incorporating reusable components, guidelines, and documentation to ensure consistency and scalability across future iterations of the app.

  • Incorporating Accessibility into Clink:
    I will explore and integrate accessibility features into Clink, focusing on making the app