Grill-N-Pub

Downtown Sports Bar & Grill

Grill-N-Pub is a fictitious national restaurant chain with locations in all major cities around the country.

As a UX designer and avid foodie, I’ve always been fascinated by the intersection of technology and culinary experiences. That’s why I was thrilled to embark on the Grill-N-Pub app project. The goal was simple yet ambitious: to revolutionize the way patrons interact with their favorite local grill and pub.

I envisioned an app that would seamlessly blend convenience with community, allowing users to effortlessly browse menus, place orders for dine-in or takeout, discover upcoming events, and connect with fellow patrons. But beyond mere functionality, I wanted to capture the unique atmosphere and character of the Grill-N-Pub, translating its warmth and charm into a digital experience.

Driven by this vision, I set out to create an app that would not only enhance the customer experience but also empower the Grill-N-Pub to thrive in the digital age. Through meticulous research, thoughtful design, and rigorous testing, I aimed to craft an app that would truly become an indispensable companion for both patrons and the establishment itself.

Persona card for a man.
Persona card for a woman

Empathize with users

Tech-Savvy: Seek seamless, intuitive mobile ordering that enhances their experience.

Casual: Want a user-friendly interface for easy browsing, customizing, and paying.

Groups: Need easy group ordering, fair bill splitting, and accommodating preferences.

Older Adults: Require clear instructions, large buttons, and accessible design.

  Pain Points:

  • Slow/unreliable app
  • Confusing navigation/menu
  • Payment issues
  • Lack of personalization
  • Limited accessibility


Define the Problem

This is a sports pub which can be loud and busy, making it

difficult to order food and drinks or get table service. To

alleviate wait times and lessen the burden on servers and

bartenders, we need to find the best way for customers to

make their orders through a phone app.

Problem Statement (Vince): As an in-demand broadcaster with a busy schedule, Vince struggles to find time for grocery shopping and meal preparation, relying heavily on to-go options.

Problem Statement (Suzanne): With 3 children and a busy husband, I want to dine out without the hassle of slow service. I would like to order food and drinks, tip, and pay the tab through a phone app. All the servers need to do is deliver it.

wireframe mockup of the order page
Affinity diagram
wireframe mockup of the Member page

Brainstorm ideas

The Grill-N-Pub concept emerged from a targeted approach to ideation, leveraging my extensive experience in the restaurant industry and incorporating feedback from potential users regarding their ideal dining app experience. The initial wireframes underwent several rounds of user testing and iteration, incorporating valuable critiques and suggestions into the final mockups and prototype. This user-centric design process ensured the Grill-N-Pub application aligns with user expectations and delivers a seamless and intuitive experience.

Create the look

The Grill-N-Pub application’s design embodies the warm and inviting atmosphere of a classic neighborhood pub. The interface features a rich, earthy color palette with warm browns, deep greens, and subtle amber accents, reminiscent of wood finishes and cozy lighting, enhancing the sense of authenticity.

Clear, bold typography is used for menu items and headings, ensuring easy readability even in a dimly lit pub setting. Menu categories are organized intuitively, with mouthwatering food and drink images accompanying each item.

The overall effect is a digital experience that mirrors the familiar comforts and enticing ambiance of a real-world grill and pub, inviting users to explore the menu and place their orders with ease.

Grill-N-Pub beer menu
Grill-N-Pub food menu
Grill-N-Pub mobile application home page with a hamburger and glass of beer.

Test the prototype

The final phase of the Grill-N-Pub app design process involved usability testing with five participants. Each participant was given scenarios to complete using a high-fidelity prototype. These scenarios focused on key tasks like browsing the menu, placing an order, and checking out.

Participants were observed and their interactions were recorded. After each session, a brief interview was conducted to gather feedback. Overall, the test results were positive. Participants were able to complete the tasks, but some minor issues were identified:

  • Two participants had difficulty finding the filter option for vegetarian items on the menu.
  • Three participants were initially confused about how to add items to their cart.
  • One participant suggested adding a “favorites” feature to save preferred menu items.

These findings highlight areas for improvement in the app’s design and functionality. The next steps would involve refining the interface based on this feedback, potentially including clearer signposting for the filter option, a more intuitive add-to-cart process, and the addition of a favorites feature. Further testing would then be conducted to validate these changes and ensure a seamless user experience.

Lil’ Threads

Buy and sell gently used children’s clothing.

Young families need an affordable solution to children wearing their clothes once, then out growing them.

Lil’ Threads is the premier online marketplace for parents to effortlessly buy and sell gently used children’s clothing. We empower families to save money, reduce waste, and extend the life of quality garments, all while fostering a sustainable and stylish community.

Empathize with users

To empathize with our target users, we conducted in-depth interviews with parents of young children. We dove into their daily routines, challenges, and aspirations surrounding children’s clothing. Several key pain points emerged:

  • Frustration with Waste: Parents felt guilty about the environmental impact of constantly discarding outgrown clothes.
  • Financial Strain: The rapid pace of children’s growth made buying new clothes unsustainable for many families.
  • Overwhelming Clutter: Outgrown clothes quickly filled closets and storage spaces, adding to parents’ stress.
  • Limited Time: Busy parents struggled to find convenient ways to buy and sell used clothing.

By deeply understanding these pain points, we were able to design Lil’ Threads as a solution that addresses these challenges head-on. Our platform provides a seamless, enjoyable experience for parents to declutter, save money, and find stylish outfits for their growing children, all while contributing to a more sustainable future.

Define the problem

The Problem: Young families face a frustrating and expensive cycle: children outgrow clothing at an alarming rate, leaving parents with closets full of barely-worn items and a constant need to buy more. This not only strains budgets but also contributes to textile waste, harming the environment. Donating or selling these clothes individually is time-consuming and often yields minimal returns. Existing online marketplaces can be overwhelming and lack the community aspect that parents crave.

The Consequence: Parents feel overwhelmed by clutter, burdened by the financial strain of constantly replacing clothes, and guilty about their environmental impact. This ongoing stress detracts from the joy of raising children.

The Need: A solution is needed that empowers parents to easily and affordably refresh their children’s wardrobes while reducing waste and fostering a supportive community. This solution should be convenient, intuitive, and prioritize the needs of busy families.

Brainstorm ideas

To ignite the creation of Lil’ Threads, I embarked on an energetic brainstorming session. Ideas flowed freely, ranging from a basic classifieds platform to a vibrant social marketplace where parents could connect and share their experiences.

I envisioned features that would streamline the buying and selling process, such as intuitive size guides, clear condition filters, and secure payment options. I also delved into the specific needs of both buyers and sellers, creating detailed user personas to guide my design decisions.

Wireframes quickly emerged, visualizing different user flows and helping me prioritize the most impactful functionalities. Through this iterative process, I refined my vision, shaping Lil’ Threads into a user-friendly platform that caters to the unique needs of young families.

Create the look

With the brainstorm ideas solidified, I moved into the exciting phase of prototyping. I started with low-fidelity wireframes, sketching out basic layouts and user flows to test the core functionality of Lil’ Threads. These initial prototypes allowed me to quickly iterate and gather feedback from potential users.

As I refined my design, I transitioned to mid-fidelity prototypes, incorporating more visual elements and interactive features. This helped me simulate the actual user experience and identify areas for improvement. I conducted usability tests with parents, gathering valuable insights into their preferences and pain points.

Through continuous testing and iteration, my prototypes evolved into a high-fidelity representation of Lil’ Threads. This final prototype included all the essential features, a polished visual design, and realistic interactions, providing a clear vision for the development team to bring the platform to life.

Test the prototype

With a high-fidelity prototype in hand, I eagerly moved into the testing phase. I recruited a group of parents from my target audience, ensuring a diverse range of backgrounds and experiences. I conducted moderated usability tests, observing how they navigated the prototype, noting any points of confusion or frustration.

I also gathered feedback through surveys and interviews, asking about their overall impressions, favorite features, and suggestions for improvement. This valuable input helped me identify areas where the design could be further refined.

I iterated on the prototype based on the testing results, making adjustments to improve the user experience. I repeated this process multiple times, continuously gathering feedback and refining the design until I was confident that Lil’ Threads was ready for development.

This rigorous testing process ensured that the final product would be intuitive, user-friendly, and ultimately successful in meeting the needs of young families.

Volunteerz

Good Deeds Made Easy

Volunteerz is a mobile app designed to revolutionize the way people connect with volunteer opportunities. By seamlessly matching individuals with organizations based on their interests, skills, and availability, Volunteerz aims to make volunteering more accessible and engaging. The app offers a user-friendly interface, personalized recommendations, and streamlined communication tools to create a rewarding experience for both volunteers and organizations.

Empathize with users

Volunteers:

  • Eager to contribute: Passionate about making a difference but frustrated by the difficulty of finding the right opportunities.
  • Time-constrained: Juggling busy schedules and seeking flexible, convenient ways to volunteer.
  • Value-driven: Wanting to ensure their efforts have a meaningful impact and align with their personal values.

Nonprofits:

  • Resource-limited: Struggling to attract and retain volunteers due to limited outreach and engagement tools.
  • Impact-focused: Driven to achieve their mission but facing challenges in efficiently managing and mobilizing volunteers.
  • Community-oriented: Seeking to build strong relationships with volunteers and foster a sense of shared purpose.


Define the problem

The Problem:

Volunteers struggle to find the right volunteer opportunities, and non-profit organizations have difficulty attracting and retaining volunteers.

The Plan:

Develop a user-friendly platform (app or website) that streamlines the process of connecting volunteers with organizations and opportunities that align with their interests, skills, and availability. This platform will provide features such as personalized recommendations, easy scheduling, and communication tools to enhance the volunteer experience and empower organizations to effectively manage their volunteer programs.

Brainstorm ideas

Armed with a clear understanding of our users’ pain points and needs, I dove into the ideation phase, fueled by the desire to create a solution that would truly resonate with volunteers and organizations alike. I explored a wide range of ideas, from simple search filters and personalized recommendations to gamification elements and community features.

I sketched out various interface concepts, experimenting with different layouts and information hierarchies to optimize the user experience. I envisioned features that would streamline the process of finding and applying for volunteer opportunities, such as one-click applications, skill-matching algorithms, and real-time availability tracking.

To encourage engagement and foster a sense of community, I brainstormed ideas for social features, like forums, groups, and volunteer recognition programs. I also considered ways to integrate gamification elements, such as badges, rewards, and leaderboards, to motivate volunteers and make the experience more enjoyable.

Through this creative exploration, I narrowed down the most promising ideas and features, forming the foundation for Volunteerz’ unique value proposition and design direction.

Create the look

With my ideation phase complete, I eagerly transitioned into prototyping. I started with low-fidelity wireframes, sketching out basic screen layouts and user flows to capture the essence of the app. This allowed me to quickly visualize the core features and user journey.

Next, I moved to mid-fidelity prototypes, incorporating more visual details and interactive elements. I used a prototyping tool to create clickable mockups that simulated the app’s functionality, allowing me to test the user experience and gather feedback.

Throughout the prototyping process, I conducted user testing with potential volunteers and organizations, observing their interactions and gathering valuable insights. I asked for feedback on the app’s ease of use, clarity, and overall appeal. Based on their input, I iterated on the prototype, refining the design and making adjustments to enhance the user experience.

With each round of testing and iteration, the prototype evolved, becoming increasingly refined and user-friendly. By the end of the process, I had a high-fidelity prototype that accurately represented the final product, ready for development.

Test the prototype

With a polished high-fidelity prototype in hand, I embarked on the final phase: testing. I recruited a diverse group of potential users, including seasoned volunteers and those new to the concept. I conducted usability tests, observing how they interacted with the prototype and noting any pain points or areas of confusion.

I collected feedback through surveys and interviews, asking about their overall impressions, favorite features, and suggestions for improvement. This valuable input helped me identify areas where the design could be further refined.

I also conducted A/B tests to compare different design variations and determine which options resonated most with users. Based on the results of these tests, I made iterative improvements to the prototype, ensuring that the final product would be intuitive, engaging, and effective in connecting volunteers with meaningful opportunities.