FROM COCKTAIL FESTIVAL TO DIGITAL PLATFORM FOR COCKTAIL LOVERS

BACKGROUND

A few years back, Liquid Market, a small startup from Vienna, started organizing cocktail festivals across Austria and Germany. This was very well received, and they wanted a digital presence to complement their festivals.

What’s the Liquid Market Festival?
Liquid Market Cocktail Festival hosts the best Austrian and International bars and Mixologists for three days serving the coolest creations and summertime drinks.- www.visitingvienna.com

We started the project by conducting stakeholder interviews and talking to past attendees to understand the main pain points and user behavior.

We identified three areas to focus on, broken down by the user journey phase: before, during, and after the festival.

We collected artifacts such as tickets, receipts, and booklets to understand the steps users needed to take, which allowed us to provide better support for a more efficient workflow. The insights from our research can be boiled down into four groups.

Insights from the research

• It’s noisy and crowded at the festival — booths are often packed with people waiting in line. You need to know what you want when it’s your turn.
• Decisions are hard to make when you are overwhelmed with choices.
• Keep the records — people were saving booklets and trying to recreate drinks at home.
• Repeating the experience: Can a regular Saturday night become something more?

****

01. NOISY ATMOSPHERE AND OVERWHELMING CHOICES 🍹🍸

Choosing between hundreds of different mixed drinks was hard for many attendees. People would go from booth to booth, trying to decide what to sip.

The printed version of the booklet was a great way to inform people of what they could get during the festival. However, it had its limitations.

It was hard for people to decide between 100 cocktails.

People would often use a pen to highlight the one that they favored so that they can try it or purchase spirits at the end. Then they would often forget.

In order to support the festival experience, we created a list of tasks that the app should achieve:

Wireframes

After exploring a few different layouts, and collecting user feedback we settled on a basic list layout with the search bar on the prominent top location.

• We used tabs to provide a way for people to move between cocktails, spirits, and bars.
• We added a variation of the tab bar at the bottom to create easy access to the map, cart, and saved items.

***

02. Keeping the records 🍹🍸🏠

The other interesting finding was that people were saving a booklet long after the festival. They would sometimes try and recreate the cocktails at home. Unfortunately, spirits that were used sometimes would not be available for purchase in regular stores. And it was hard to know what were the different cocktails that could have been made with that specific spirit were.

The list of tasks in this phase was slightly different than the list when the user is at the festival:

Wireframes

The layout remains similar.

03. Repeating the experience… 🍹🍸🏠

This includes finding the right bar, events, and places to go out.

Wireframes

After exploring a few different layouts, and collecting user feedback we settled on the list layout with the search bar on the prominent top location.

• List of top cities available on the home screen — because it’s very common for Europeans to hop between cities that are not that far.
• Search experience with a prominent search bar, and entry point to different suggestions to make decisions easy.
• Map view that highlights bar locations in the searched area.
• Contextual filtering options for both bars and events.
• List view with all bars and events.

Diagram Flow

The diagram flow below illustrates the elements of the app and their relationship.

Style Guide

We developed a style guide based on the preexisting company’s branding.

FINAL PRODUCT

The whole app was meant to provide a seamless experience, so it was decided to go with a minimalist approach. The main goals are highlighted below.

***

GOAL 1: Maximize clarity & effectiveness

Apart from supporting users during the festival, another major function of the application is to help people to discover places to go.

• To imply the sequential relationship between the elements, we used a combination of images, location, events & related signature drinks.
• To reinforce the relationship between the information, we used fonts and colors.
• To facilitate the dialog between the partners from the festival and bar-find functionality, we used a twin layout.

GOAL 2: Cultivating selective attention

During the festival, people experience numerous sights, sounds, and sensations around them while they are still focusing on the task. We used vibrant colors and high contrast to help facilitate selective attention.

While at the festival people are able to see all the available cocktails that are searchable by filters and ingredients. All related spirits are listed on the cocktail details page, and there is also the option to save and share.

When the user is next to the booth, they can easily scan a QR code, and get all details about the bar and the cocktails. This minimizes the time the user needs to go through the booklet in order to find this information.

GOAL 3: Develop Aesthetics To Intensify a Unique Identity

We were looking for ways to selectively conceal the complexity of the app in order to maximize the clarity & effectiveness and to better reinforce the relationship of the information. Our solution was to use stronger colors — colors with a higher hue.

Another main principle was to use aesthetic consistency of style and appearance in order to establish a unique identity easily recognizable by anyone after the first use. This will help to enhance recognition and set emotional expectations.

Follow us for more updates, as we continue to work on other problems.

Check out final product on 👉 Google Play Store 👈 or 🍏 Apple Store 🍏.

Read Next:

👉 A UX/UI Case Study: Mobile App Design Process 👈

Thanks for reading this! If you like this article, give it a 👏 so others can find it.

👋 Say hi! 😉 💬

Mobile App for Vienna Cocktail Festival — UI/UX Case Study was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

👉Part 1: Creating a mobile meditation app from the ground up — Deeplyapp.com 👈

Background

Deeply App was released in March 2019, but engagement and retention were low after the first few days. Some people would uninstall the app without even trying out the unique features or meditations it offers. A considerable % of the users who had the app installed on their phone had low activity.

Goal: Improve the User Experience and retention by uncovering user pain points within the app, keeping in mind the cost of developing completely new features.

An experience-driven strategy required us to focus on UX Research Methods first (surveys, emails & user interviews) to uncover the user pain points. We used a operational efficiency strategy to get us closer to our vision in a very resource-constrained environment.

Deciding What to Build

After synthesizing the data, there were several themes that stood out. We prioritized based on the impact and feasibility of each theme. These are the themes that end up being part of the improvements for this version:

Diagram Flow

To help us visualize and identify the different elements of the process, and the interrelationships among the various steps, we used the diagram flow (previously created for MVP) as a graphical representation of the ecosystem.

PROBLEM 1

Discoverability: Help people to understand the immediate value of the app

We wanted to better understand the experience of first time users with the app. So, we sent out an email to new users that had signed up, asking what they’d hoped to do after downloading and launching the app — the number one question they had was about how to get started meditating. This insight led us to surface appropriate content to support this.

We also ran usability studies which helped us to discover that there was a high interest in features that were not easily discoverable. This led us to highlight features, such as: layering sounds, integration with other services, and the large number of free meditations & music that Deeply has by creating an on-boarding experience.

Why this design?

We kept in mind that developing any new feature has a high cost and takes time, so we decided to use an on-boarding experience because it gives the user a guided introduction to the product, sets up some initial preferences, and points out critical elements in the User Interface. We can also reuse this feature in the future to introduce any new elements/features.

PROBLEM 2

Playing content: Better control over meditation sessions

People wanted the ability to manipulate the background music and sounds used because preferences depended on the user’s mood or exercise itself. We created a set of UI controls to provide people the ability to do that.

We explored adding different types of controls to the meditation sessions, such as: giving the ability to modify background color & duration, adding background music & sounds, unguided meditations, and breathing exercises.
After we collected user feedback, we prioritized the findings which led us to create easily accessible controls to download meditations, save them as favorites, and move other secondary controls under the “more” menu.
We removed the ability for the user to change background colors and animations due to the low interest in these features and/or the high cost of development. We also split unguided, guided meditations, and breathing exercises in order to simplify the interactions.

PROBLEM 3

Using the App: Enhancing visual ergonomics

During one of the usability studies, several users mentioned that when they were using the app early in the morning (right after they wake up) or during late hours (right before going to bed) and the colors were too bright. To improve readability in low light environments, we created the support for a UI dark mode. The solution consisted of dark background colors and making colors less saturated.

PART 2: VISUAL DESIGN

Balancing the chaos

In parallel, as we were improving the User Experience, we worked on refining the visual design of the app. We developed a rule-based system to support branding, typography, icons, and colors in order to achieve visual consistency with the styling of the app. The system served as a base for the entire user interface used on iOS, iPad, Android devices, the website, and all following marketing materials.

The screenshots on the top row (image above) are from the first version of the app that we released in March 2019. The screenshots on the bottom row are taken from the updated version that we released after integrating the feedback from the Usability Study session in September 2019.

Development for Designers

This project gave us the opportunity to learn the basics of the xCode and Android Studio IDEs. As designers, we were able to make a lot of adjustments including changing visual styles, animations, modifying data, creating new screens, and even some bug fixes directly in the code. This allowed us to improve the quality of the app as needed.

Deeply Website & Marketing

We developed a website to support the mobile application. It is coded in CSS/HTML/JavaScript. www.deeplyapp.com

RESULTS

The new version was released and it is being tracked with analytics. We found out that people are engaging more with the features that previously had lower usage. But that wasn’t all: daily engagement increased by 20%, at the same time user retention also increased. This confirmed our hypothesis that people had trouble with understanding the main value prop, and available features. We created a way for people to honor their preferences (background music/sounds during the meditation), and improve the experience when using the app first thing in the morning (and at night).

Since the release, we have seen a large number of downloads. Deeply app has been featured on a few websites (including ProductHunt.com) right after the initial release.

Final Thoughts

It’s fascinating to see these patterns of behavior: Friday and Saturday are usually quite calm days for our users. As the weekend phases out into another working week, the activity rises (as shown by our analytics dashboard).

People are most stressed at the beginning of the week.

What excites me the most is knowing that our product is helping people to be more mindful, and to prepare better for another working week.

Mobile App Design Process: UX/UI Case Study {Part 2} was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Creating a mobile meditation app from the ground up — Deeplyapp.com

Understanding the problem space

As meditation becomes mainstream, more and more people are turning towards some type of meditation to improve their general wellness. 9.3 million U.S. adults have used meditation in the past year.

Meditation has a lot of benefits, such as: helping to increase focus and attention, fight stress, be more creative, and so on. However, those who start meditating don’t do it regularly. We wanted to understand what are the challenges around the practice of meditation that people have, and create an experience to solve those challenges.

A path to reach new conclusions

To better understand the needs that people have and their pain points, we defined a series of questions and began researching the problem.

• Who are the users that are using self-care apps? What do they use to meditate? Do they know what meditation is, and what its the benefits are? What are the current market trends? Market insights helped us here.
• What are the available apps out there? What apps do people like or dislike? We did a competitive analysis, to understand the problem space.
• Why people do certain things around meditation? And, what are their current pain points? We conducted User interviews to help us to validate our hypothesis based on market research.
• We analyzed Customer comments in several apps to get a better understanding of what are other pain points in current apps.
• How does a solution feel? Rapid Prototyping helped us understand if we were going in the right direction.

1. Market Data & Survey

The Market research we performed provided us the following insights:

• The Majority of people that meditate are females, at least college-educated.
• Minority populations, as well as seniors, were less likely to use meditation.
• The majority of users practice more than one type of meditation, and they use more than one app for their needs.
• These findings also indicated that mental health problems were the most important reason to use meditation.

2. Competitors: Evaluation of Mindfulness-Based Apps

The slightly outdated research from 2015 from ncbi.nlm.nih.gov has some interesting results. While there were 700 apps available for meditation at that time (this number is now 1000), some apps were duplicated, some didn’t work at all, and a large number didn’t meet the basic criteria set by the study. Only 23 apps met the criteria of engagement, functionality, visual aesthetics, and information quality. While the research is old, it provides us with a good sense of the quantity vs quality gap.

3. User interviews

We performed user interviews to help us to understand the user’s behavior. We conducted the interviews with 6 participants over the phone over a period of several days. We interview people that have used meditation in the past and have at least one meditation app installed on their phone. The insights we gathered from the interviews are:

• People don’t mind paying for an app, but they have only one paid app, and the rest of the apps they have they use only from time to time.
• Using the same app every time gets boring, people need different content, so they substitute paid apps with free resources.
• YouTube and Spotify are the go-to places for free meditation content.
• The regularity of usage fluctuates (people often lose motivation): “I don’t have time for that,” “I know that it’s good for me, but I kind of get lazy and end up not doing it.”

4. User comments

Reading user comments gave us a few valuable insights:

• People like quick access to a timer.
• They want the ability to go backward and forwards during the meditation.
• They want to be able to navigate between a number of content categories easily.
• People want to see some resources related to teaching the basics of meditation.

Targeted audience

Based on the research, the user that is more likely to use meditation is a female, between 35 and 50 years old. They are more open to new experiences. They have a high desire for growth and self-improvement. They are highly educated and more likely to have some type of stress in their life. They want to meditate because the effects of stress can be manifested on emotional, behavioral and physical levels (low energy, thinking ability, depression, etc.).

Creating a statement

Once we were done with the user research, market research, and competitive analysis we were ready to create a statement:

* * * * *

HMW help busy people with high intent for conscious personal self-management to have one place to do their meditation practice, and even stimulate and inspire a regular meditation practice?

* * * * *

Then we translated this statement into the goals that the app should accomplish.

GOAL 1/4:

The role of the product — Platform for Stress Management, Mental Health & Well-being

The key value of Deeply is the alignment of a personalized experience, modern engaging design, and a large number of resources exceeding by far most of the available apps in the meditation space.

Goal 2/4:

Quality: Aesthetic in the form of Usability

The basics of quality are usability and functionality. Beyond that, two important principles increase the likelihood and engagement of a product; those are attractiveness and familiarity.

• Attractiveness is vital because people perceive products that are visually pleasing as higher quality and more usable.
• Familiarity is essential because we like things that are familiar: familiarity helps support an established mindset about certain things.

The content of the app is something that people are used to; it contains guided meditations, timer, breathing exercises, as well as relaxing music & sounds.

GOAL 3/4:

All resources in one place

Deeply is a mental wellness app that integrates with services such as Spotify and YouTube to provide free content.

It’s highly curated, with the ability for the user to add their own content.

It also provides hundreds of Deeply meditations, music, and sounds to help with anxiety relief, stress, and more.

GOAL 4/4:

What would increase motivation?

We used a psychological perspective to look for answers on what motivates people to do meditation, beyond just pure external triggers, such as preset reminders. The motivators we found are:

• Situational — The need will be different based on the situation. Stressful events such as preparing for a big event can be a trigger. It led us to create categories specific to different situations, such as big events, “waking up.”
• Emotional state — Regardless of what is happening in our life, we have days when things just don’t feel right. It led us to create categories such as: “Happiness”.
• Humans have the need to complete tasks — We feel bad if we don’t finish what we started. We created a set of packages, such as “7 days to find your focus” instead of having just a single meditation track.

How can we engage people even more?

People are looking to find a sense of meaning, creativity, and individualism. They are looking for the ability to express themselves and to create something unique that will separate them from others. Even if what we create is not as appealing, our perspective and connection with it will be different.

For this reason, we explored these concepts:

• The ability for the user to create a mix of different sounds and save them, and replay them any time.

This feature describes the deep need that humans have to be creative and to own their ideas. If we put some effort into something, we will like it more. We want to leave our footprints in what we do.

👉 Part 2: Leveling up: The UX & Visual Improvements 👈

Follow us for more updates, as we continue to work on other problems. Check out the final product 👉 here 👈.

Thanks for reading this! If you like this article, give it a 👏 so others can find it.

Read next: Change user behavior with these easy steps

Dribbble: https://dribbble.com/Deeplyapp

A UX/UI Case Study: Mobile App Design Process was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

As a Product Designer you have to have a basic understanding on how the human mind works. You need to know how people think, their motivations, how memory works, how to grab the user attention (cognitive psychology) in order to influence, and sometimes even change their behavior (behavioral psychology).

How to turn a bad situation into a good one

Recently, I missed a payment on my credit card. It’s not that I couldn’t pay it off, it’s just… I am a procrastinator, so missing payments is nothing strange to me.

Normally, in these kinds of situations, we get an email reminder to pay off the credit card, or we just get charged with a late payment fee. My bank didn’t do any of those.

When I opened my email box, I found an email from my bank with the title: “Get a $30 statement credit in minutes”. The sense of urgency wasn’t missing: “Hurry, time is running out”. They provoke my curiosity — why the bank suddenly wants to give me $30?

The next click I did took me to a page that explains how easy would be for me to make 30 bucks — all I had to do to get the credit statement was to spend a few minutes taking a money management course, and to make a payment on my credit card (Oops! here is where I realized that I missed the payment). Because this was the most exciting thing that I encountered that day, and I had a few minutes to spare (plus I had to pay off that bloody card anyway), I made the decision — I’ll do it! I would complete the course.

For any behavior to happen (The Fogg Behavior Model — FBM) we need three things: motivation, ability, and triggers.

In this case the motivation was $30 credit, the ability was the time that I had and the low effort that this course required, and the trigger was the email that I received.

Stop! We need your attention

At the beginning of the course there was a hint that there was a test at the end of the course. Knowing that I will have to know the answers at the end, I didn’t want to waste my time and repeat the course.
Ok coach, you have my attention…

The first step in learning is attention. With focus it’s more likely that the new information will be stored and remembered.

The course consisted of several easy steps. It started with a video on how to manage your money, how to set up a goal, what are the strategies to achieve that goal, what’s the difference between an unrealistic and a realistic goal, and so on. Nothing too exciting there.

But wait, there’s more…

“Don’t make me think”

The tutorial was presented in video format for easy user consumption (the ‘relax and watch, don’t make any effort’ type of thing). The first section was about long term, mid-term, and short-term goals. After that, I got the first set of questions. The questions involved a visualization tool where I was asked to drag the right photo to the right section. Easy, ha?

It was. As I was dragging a sofa to a short term goal, a car to a mid-term goal, and retirement funds to a long-term goal, I realized that this activity was forcing me to keep the images in my head.

Visualization technique is our way to mentally rehearse an action and it’s giving us higher chances of converting something from what “could be” into “it is”.

Commitment, please

The next section included a talk about how to create a plan. In order for you to be able to achieve any goal, you need to have an idea about what the goal is so you can focus.

Putting any goal in writing is a strong motivator. It increases your chances to achieve the goal.

The exercise in this section asked me to create a plan. I needed to choose what I wanted to achieve, and then I had to create a timeframe together with the amount that I wanted to save. The UI consisted of a few form fields, but if you really write down a realistic goal that you want to achieve, it is more likely that you will actually do it.

Make your point

The test ended with a series of questions that were presented as problems. All examples were related to something that any of us can relate to, such as: let’s say that you are buying a house in 5 years, you are earning X and you want to save Y amount, or you want to pay off your student loan, or let’s say you want to save for a vacation…

The specific situations and problems are helping users to relate to logic, character, and emotion. They are illustrating the point more effectively.

Create UX design principles

We can pull design principles from this experience and use those principles to solve other problems, and to modify the user’s behavior.

Design Principles:

• Turn negative into positive
  (missing payment didn’t result in punishment)
• Grab the user’s attention if you want to shape learning
  (inform the user that the information needs to be remembered)
• Be mindful to user’s time and investment
  (be upfront about how much time it takes)
• Content consumption should be easy
  (listening, watching, or doing vs reading)
• Ask for commitment
  (by writing goals down)
• Construct a visualization exercise for mental rehearsal
  (create a mental image of a future event)
• Have something that the user can relate to
  (use real world examples)

Final Thoughts

This is an example of a good user experience. My bank identified a pain point in the user journey. Instead of sending a threatening email “You must pay your credit card now!”, they did something nice to ease the pain. They offered a credit (instead of charging an extra fee) and a course to teach users how to manage money better in order to change user behavior.

And this course might actually even help me manage my money better.
We’ll see…

Read Next:

A UX/UI Case Study: Mobile App Design Process

Change user behavior with these easy steps was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.