Mingle mug
Mingle Mug is a new start-up cafe that will be run and managed by professionals who are working as Chefs. They will bring all their expertise into this business since they have a robust foundation and proficient knowledge in the hotel industry. To grow their business further, they want to launch a website that will play a significant role in getting customer orders. This is a solo project done within 12 weeks. It includes thorough research, which is crucial in analyzing customer habits, and knowing what I can incorporate within the website to make it noticeable to the public and stand firm in the competitive market.
Research
Define
Ideate
Design
Test
Role
UX/UI designer—As the UX designer for the Mingle Mug project, my role was pivotal in shaping the user experience and interface. Leveraging my expertise, I crafted a user-centric design that enhances navigation, engages visitors, and contributes to Mingle Mug's overall success in the online space.
Research plan
Duration
12 weeks
Tools
Figma, Photoshop, Google meet, Notion, Trello, Slack, Google slides.
I started by interviewing four candidates, two of whom worked in the food industry as food quality assurance supervisors. This helped me to gain valuable insights in the initial stage. I conducted surveys and polls followed by competitor analysis, which gave me an overall idea about people's behavior, pain points, likes, and the competitive market. Conducting detailed market research assisted me in detecting the problem and identifying an effective solution.
Interview round
Following in-depth interviews with four candidates, I meticulously identified and analyzed the distinct pain points they encountered in their previous experiences. This comprehensive exploration provided valuable insights into the challenges faced and served as a foundation for formulating strategic measures that I could implement to fortify the Mingle Mug brand, ensuring its resilience and prominence in the competitive landscape.
Mary Jacob: "A brand stands out by having clear messaging, a strong visual identity, and consistently delivering high-quality products or services that resonate with its target audience."
Marshal Stone: "Not being able to customize the ingredients and the absence of a payment confirmation page are two problems I faced while ordering."
Key Findings
Providing the history of Mingle Mug Cafe contributes to generating confidence and brand trust.
Premium quality visuals play a pivotal role in grabbing people's attention.
Providing customers with a video of order preparation will generate brand trust in their minds.
Empathy Map
User Persona
Clearly communicated messages will deliver a neat idea to the users, which can act as a purchase initiator.
The customize ingredients option can be beneficial, specifically for people with allergies.
Cristo Mathew: " The carousel plays a pivotal role in displaying the items. An intuitive carousel design can help boost effective user engagement."
Nicole Shabina: "Assisting users with post-order problems like returns or reporting an issue is crucial for maintaining a brand's trust and reputation."
Offering enticing incentives such as discounts and exclusive special offers can significantly raise user interest and encourage increased purchasing.
I extracted the information from the user interviews and affinity diagram, then compiled them to condense the most relevant information to help me better understand the users. This further helped me create a more user-centric experience in developing the Mingle Mug website.
Generating trust
Purchase drivers
Product Enhancements
The user interviews gave me valuable insights into user preferences, behaviors, and needs. After analyzing the users' answers, I spotlighted some key points that need to be addressed to make this site centered around user's needs.
Through detailed research, analysis, and strategic segmentation, I curated the backgrounds and characteristics of our users, encapsulating their diverse demographics. This comprehensive approach created detailed user personas, each comprising our target audience.
A pivotal challenge is to design a website that strategically accelerates the RSVP process, enhances call-to-action, reduces bounce rate, and drives customer visits. This underscores the need for a user-centric design approach that seamlessly prioritizes user-friendly functionalities to expedite reservations and encourage active customer participation in the Mingle Mug experience.
Problem statement
Solution
To elevate Mingle Mug Cafe's digital presence, a major initiative would be integrating customers' preferences and implementing them into the website to generate more customer visits. The call to action can be improved by strategically placing design elements that lead to purchase and decrease the interaction cost. Furthermore, offering discounts, rewards, and features that favor users will drive up customer interest, eventually leading to elevated sales.
Statements from the users
I like
I wish
What if
I could pre-book my seats and table before visiting the cafe. This will help me to face less hassle when I see the cafe.
I could see the interior of the cafe before visiting it. This helps me to preview the place that I am going to visit.
I like to see trending, featured and discounted products on the homepage.
I also like to keep track of my order through map and progress bar which helps to know the status of my order
The problem
User Journey + storyboard
Survey results
Competitor analysis
Below, I have illustrated how a user engaged with our website, documenting the emotions, pain points, and journey from start to finish.
User flow
I used Google Forms to conduct a user survey to determine the percentage of people who think according to a certain perspective.
The challenge
I analyzed our top competitors' websites and found they lacked key features demanded by our users. This gave me the chance to implement some of these features within our website, giving us one plus point.
We already have strong competitor like Starbucks, which has over 450 visitors in a single store every day in the United States. This makes them powerful sharks in the world of business. My challenge is to figure out how I can strategically design a user-centric experience to increase customer visits and boost sales.
I like to see high-quality images of the food items on the menu.
When tasked with creating the logo, the goal was to show togetherness and friendship, reflecting the essence of the cafe. The letter "G" in "Mingle" forms the centerpiece, depicting two hands placed on a round coffee table, symbolizing unity. Meanwhile, the letter "G" in "Mug" cleverly incorporates a coffee cup. Together, these elements seamlessly convey the message of true friendship and care, inviting patrons to share meaningful moments over a cup of coffee.
Logo Brief
Design process
Below is the glimpse of my design process from low to high fidelity. I applied the same process for each and every wireframe. This step by step initiative helped me to flexibly make accelerated design additions and iterations according to the user needs.
Mid fidelity
High fidelity
Final designs + prototype
Home page
According to the user behavior study, 70% of the interviewees were interested in rewards, so I linked the rewards with Mingle Mugs membership.
This button leads to the purchase gift card interface. The word free grabs customer attention. That's why I have framed this sentence to encourage the users to click here.
Discounts are very enticing! This discount banner has been placed on the homepage to spike the sales of the combo products.
Providing the total charge, including tax, relieved the users as they could see the total item amount upfront.
The users can see the complete ingredient list by clicking here.
The point bar helps to track the status of point as well items that can be redeemed.
During the interview process, I identified that images play a pivotal role in boosting people's purchase decisions. Keeping that in mind, I designed a slider carousel that gives more space to display the visuals.
This interface displays items that users can redeem using points earned from purchases made with the gift card.
The seat booking feature allows the users to comfortably pre-book tables before visiting the cafe.
If a customer has made a pre-book, they must show this digital ticket at the cafe reception. The receptionist will scan the QR code and give access to the pre-booked table.
After placing the order, the users can flexibly oversee and track their order and its preparation video.
This interface allows users to track the progress of their orders and contact the driver.
80% of the users did not enjoy reading lengthy paragraphs on the website. Keeping that in reference I have condensed the information so the users only read the most prominent information about the cafe.
Mentioning the mission, vision, and values helps to establish an emotional connection in the user's mind.
Menu
Rewards
Wallet
Book
Bookings
Orders
Track
About
Iterations
The designs you saw above were the final designs, but before finalizing those designs, I made a small iteration. I monitored the user's screens and found that 8 out of 10 users could complete this task. The remaining two people eventually completed all the tasks, but they mentioned taking extra time to notice the food item rating for each product. I researched the problem's root cause and concluded that this delay occurred because I placed the ratings and calories close to each other, so they looked grouped.
I ungrouped the ratings from the calories and placed them under each food item. This way, the users could see the ratings of all the items without selecting them individually.
Takeaways
Engaging in the Mingle Mug project proved to be a profound crystallization of knowledge for me, as it provided a unique opportunity to delve deep into user behavior through meticulous user interviews, allowing for iterative improvements tailored to user needs. By implementing strategic design solutions, I effectively streamlined interaction costs and accelerated task completion, epitomizing the essence of efficient design principles.
Low fidelity
The customize option allows to edit the ingredients according to the customer preference.
Back to projects
