top of page

Dionysus/Fountain

Designing a full mobile application for startup company

Sprint One
Sprint Two
Project Introduction

This project is the UX Experience Studio semester project for Spring 2019 which is sponsored by Dionysus Fountain.

Duration
14 weeks (January 2019 - Present)
My Roles:
1. Secondary Research
2. Primary Research
3.Ideation
4.Prototyping
5.Interaction Design
6.Testing
7.Testing Analysis
Project Overview

Fountain is an online alcohol marketplace and delivery service. It is currently in the beginning phases with hopes of becoming available on both mobile and web platform. The service allows users to purchase and have alcohol delivered to them along with suggested recommendations on different alcohols that are related to their own taste preferences. As it is just in the beginning phases, Fountain is still subject to considerable growth and change. For this project I am a team lead, this means that I am expected to take more charge and oversee the project as whole to ensure my team members and myself are moving forward in the best way possible.

Methodology

In order to provide continuous deliverables to our sponsor and receive continuous feedback from our sponsor, we decided to utilize an agile SCRUM methodology. For this method, we broke our time frame into three week intervals with the goal to have a form of deliverable - mockup, research, etc. - to present to our sponsor at the end of every three week period.  This methodology encourages the team to make testable deliverables and receive feedback to iterate on throughout the entire process. Through this method, we can continuously ensure we are working to provide our sponsor the best end deliverable that meets his vision. This methodology has been proven to yield the most high quality results as it encourages the team to make deliverables which can be tested and reviewed throughout the process. We are currently on our second sprint for this project.

Research

While going into secondary research, we wanted to understand more about alcohol consumers, the alcohol industry, and potential user groups. We wanted to look at the numbers surrounding the online alcohol industry to understand growth, biggest influencers, and other quantitative facts. With primary research, we conducted multiple rounds of interviews to narrow down our user group. In this first round of interviews, we had 3 overarching goals. First, we aimed to identify the user groups which would be most interested in Fountain. From there, we set out to identify the needs of these user groups to build them a better experience. Finally, we identified potential future user groups and how Fountain may be adjusted to include their needs.

Design

As a team, we wanted to ideate on the potential UI of the marketplace itself and potential features that could be implemented in order to provide a more personalized experience. After doing a small comparable analysis of other food delivery apps, we set into the ideation process through small brainstorming and sketching sprints. We did this alongside our secondary research and continued reiterating on our ideations until we felt we had enough concepts to evaluate. 

Using the potential features and known things we wanted to include, we developed a potential task flow and a list of screens to develop.

 

TASK FLOW

From our first sprint, we created a full task flow to help us develop the needed pages for a testable prototype. It’s broken down into three main rows: main pages, subpages, and features.

 

BRAINSTORMING/SKETCHING

 

Home/Marketplace

From our feedback, users were confused about the search feature and found it to be too busy. We made it more streamlined to and simple so users would not be overwhelmed with information.

 

Discover/Learn Page

From our feedback, we combined the discover and learn page to make it a more accessible area for information for users.

 

Profile

We implemented the calendar inside of the user profile since it was a very personalized feature that allowed users

to create and link events within the app.

 

Screen Shot 2019-09-26 at 7.52.59 AM.png
Screen Shot 2019-09-26 at 7.52.54 AM.png
Screen Shot 2019-09-26 at 7.52.46 AM.png

 

HI-FI MOCK-UPS

​

Home/Marketplace: The home page features both special events, a way to narrow based on type of alcohol (beer, wine, etc.), and the marketplace. This is a combination of multiple features offered in the app combined together in the home page, while also includes personalization features using the special events.

 

Events: Events page includes different types of events for users for reference if users don’t know what drinks to buy for their events. There are popular events such as date night, and seasonal events such Easter Brunch depending on the time of year. Clicking on an event will take the user to a store page with drinks recommended for that event.

 

Discover: The discover page combines both special events and learning features such as how-to’s and recipes. This is a colorful page for the user to explore and learn about alcohol and the different ways they can use/make drinks. Clicking “see all” will expand the video of these categories.

 

 

Wine Store Page: This is an example of one of the store pages. Top sellers show the favorite wine among the users. Recommended wines give advice based on the user’s flavor profile. Seasonal selections feature the special drinks just for this season in case users want to try something else.

Screen Shot 2019-09-26 at 7.40.27 AM.png
Screen Shot 2019-09-26 at 7.40.34 AM.png
Screen Shot 2019-09-26 at 7.40.41 AM.png
Screen Shot 2019-09-26 at 7.40.48 AM.png
Testing

With our developed hi-fi prototype, we want to gain user thoughts on the interactivity of the app. Going forward, we should test for the organization scheme of alcohol types, specifically beer, that meaning whether users naturally group alcohol in the same groups we have defined in-app. This could be achieved with either surveys or guerilla testing with participants thinking out-loud during testing. With the addition of new visual elements in the hi-fi prototype, testing should also be done on visual clutter/contrast and button/tool acquisition. There may be some buttons that are too small, so consider that in testing. Along with this, the checkout process needs to be tested, notably quantity selection. The key features differentiating Fountain from its competition—Profile/Friends’ Profiles and the Calendar/Events—need to be tested before release, being so key to setting Fountain apart from the competition. Testing should be done on the task flow for using the calendar and creating a custom event, as well as buying suggested alcohol/planning an order for an event, and buying a friend alcohol based on their taste profile.

Reflection

This was my first time ever leading an experience studio project and I felt like I learned a lot of new skills, both UX and leadership, along the way. It challenged me to step out of my comfort zone and really push myself to be a prime example of a leader for my team. Overall, startups with lots of creative freedom can often be a tricky challenge to take on as there are tons of different ways to take on that project. However, I felt that my team did a good job tackling this massive project in just one semester. We were able to end on a high-fidelity mockup of the app and analyze what went for us as a team and what could be improved.

This project is currently being updated. Feel free to view more here:

Dionysus/Fountain

Dionysus is an online alcohol marketplace and delivery startup based in West Lafayette that was in need of a design for its mobile app user interface. Through a course of five months, we designed and presented a user interface, a style guide, and recommended features to Dionysus Fountain founder and sponsor Richard Pasquier.

Context
Team
Time-Frame
Contributions

Purdue UX Experience Studio Project 2018/2019

Juliet Jimenez
Madi Lindeman
Joe Hoggatt
Ruiqi Li
Ian Carr
Leah Neustedter
Brooke Carney

Spring Semester 2019
January – May

User research
Secondary research
Visual design
Prototyping
User testing

User research
Secondary research
Visual design
Prototyping
User testing

Roles in collaborative efforts

documentation leader to ensure documentation was continuously up to date, style guide team member to create a comprehensive style for Fountain, research into novice/new alcohol consumer habits, artifact analysis of online alcohol communities and groups, guerrilla usability testing of paper prototypes, interviews, ideation contribution through sketches and research, note-taking during sponsor and team meetings.

personal takeaways

what did I learn? A lot.

Experience Studio provides us students with the opportunity to work with companies to work on meaningful projects and apply our UX knowledge in a real setting. This was my first time working with a team for a long-term (semester) project. The whole process allowed me to learn and grow from everyone along the way.

TEAMWORK

Teammates are supportive connections.

Experience Studio provides us students with the opportunity to work with companies to work on meaningful projects and apply our UX knowledge in a real setting. This was my first time working with a team for a long-term (semester) project. The whole process allowed me to learn and grow from everyone along the way.

UX SPECIALIZATION

An exploration into information architecture.

Going through the process of designing a high-fidelity prototype made me realize that a simple layout is more complex. I found myself wanting to research more into the ‘why’s’ of the layout, showing me the importance of information architecture.

PROFESSIONAL COMMUNICATION

Communication is more than just meeting.

PROJECT MANAGEMENT

The waterfall method is terrible – change it up.

Before UX, most project work was done using waterfall method. With this project, one of our Team Leads – Juliet – gave the suggestion to implement the Agile Scrum method. At first, I had trouble adapting and understanding the value until I found myself unconsciously implementing the method in my other projects. I was designing and researching at the same time, and cycling back to the deliverable.

We utilized the Slack work-space, Google doc comments, notes, and reflections to keep ourselves on track and to create a relationship with one another. I felt as though my reflective communication skills increased through the year by having all of these routes to communicate.

kickoff

behind the design

Fountain is a startup with the vision of creating an online alcohol marketplace and delivery service. Their goal is to gain funding from investors in order to become available to users on both mobile and web.

Project Expectations/Deliverables
  1. Identify the personalization features most desired by our target user group

  2. Identify how to integrate the above features into an online marketplace

  3. Create an interactive, high fidelity mockup for our sponsor to show potential investors

Note

Fountain was in its early stages when we took on this project. The deliverables we handed off to our sponsor may have gone through further iterations after the end of our time.

research

scoping down before starting up

We wanted to learn more about our presented user group, conduct interviews with alcohol consumers to gain insights, as well as understand the status quo surrounding alcohol delivery services and industry.

literary research

During this process we each conducted research on different topics involving the online alcohol space. I conducted an artifact analysis of Reddit and Facebook groupsto understand how alcohol consumers utilized online communities to find alcohol related information.

As a team, we sat down and discussed the overall findings and identified how they may influence our designs.

main takeaways

Connecting with others

  • Users connect with others by answering peoples questions, posting questions, and providing support when needed. Through posts, comments, upvotes, and downvotes, users express their personal humor and taste.

  • Influence in design | The app could include some sort of social feature to create a community.

Too much information

  • Alcohol consumers can get overwhelmed easily with all the information surrounding alcohols like types, histories, brands, and recommendations.

  • Influence in the design: There should be an area to help users learn more about alcohol.

Open forums for help

  • Users used open forums to ask and answer questions on specific liquor types, alcohol related expectations, and recommendations.

  • Influence in the design | Based on what people were asking online, we knew we had to have an area for recommendations.

Who is using online services now?

  • Purchasing alcohol online was becoming a common act typically done by higher-earning young people.

  • Influence in the design | Our user group should be narrowed to a younger generation.

Even though we had found some statistics that pointed towards younger, higher-earning user group we didn’t want to pick a user group quite yet. We wanted to understand what potential user groups would be most interested in using an alcohol delivery application and what needs the app could fulfill for them, so we conducted an initial round of interviews.

interviews

Our interview protocol involved a set of questions designed to understand how people viewed the extent of their alcohol knowledge, if they utilize food delivery apps/websites, and how they might use a personalized alcohol service.

 

I conducted two of the total 20 interviews, and from all of them we found:

  1. Participants were concerned about the cost of using an alcohol delivery app versus picking up alcohol from their local grocery store

  2. Participants who are parents are more likely to utilize an alcohol delivery app than those who are not parents.

  3. Participants who have a self-professed moderate level of alcohol knowledge are more likely to utilize an alcohol delivery app.

our new user group

Based on the statistics we found during our secondary research combined with the support of our interviews, we decided to focus our user group on people between the ages of 21 to 38 - Generation Z and Millenials. We identified that many demographics within this age group were interested in using this type of service.

comparable and competitive research

finding out what makes it personal

One of our main goals was to turn the Dionysus app into a true competitor in the online alcohol delivery market. To this, we wanted to provide our users a personalized alcohol experience. We looked at alcohol delivery apps that would be direct competitors such as… and other apps to understand personalized features.

competitors
saucey.jpg
castello.jpg
Drizly-Screenshot_2.png

Saucey - alcohol delivery app

Castello - alcohol based service

Drizzly - alcohol delivery app

While looking at what is currently on the market in terms of alcohol delivery apps, we found they mainly acted as the storefront and marketplace for alcohol without any unique features that felt personalized. Because of this, we felt validated in turning Fountain into a more personalized experience to give it a niche in the market and mainly used their UIs as a source of inspiration.

Influence on our design - calendar features

While looking at the services, however, we found that they were not convenient services if users knew they wanted something but didn’t have the time to look through selections and purchase at that moment. We decided to create a calendar page that would give users the ability to pre-plan out when they would want a product delivered to them ahead of time. This would help for planning and organizing events or even gifts.

personalized apps
netflix.jpg

Netflix

We found that Netflix did a good job categorizing personal recommendations such as “Because you watched” or “Watch again.” It made for an easy way to guess what would be be suited for the viewer.

open-graph-default.png

Spotify

We found that the tailored search page with discover features was the main highlight of the app. It provided suggestions for genres or categories and kept track of recent searches. It made personalized way to discover new things based on previous inputs.

gopuff.jpg

Go Puff

GoPuff does a great job with its overall brand image by advertising itself in a niche market (which is as a convenience store not for luxury). There were no personalized features, but the strong branding was very striking. It reminded us to think about how we want to portray the app’s branding for our user group.

Influence on our design

From these main findings, we realized we need to provide users recommendations and an easy way to find new alcohols. This encouraged us to make sure there was a form of discover page similar to Spotify’s and a clear categorization of alcohols for users to be able to find drinks easily. We moved onto ideating, and with these noted findings we wanted to make sure we emulated personalization and features commonly found in other alcohol delivery apps in our designs.

ideation and designs

creating the interface

As a team, we looked at the interfaces of other popular alcohol delivery apps like Minibar and Saucey and each created initial sketches based on what we believed the features should be included in the app.

Here is an initial idea of the interface I sketched up.

As a team, we laid out our sketches on a whiteboard and had an “upvote ideation session.” We would write on sticky notes items we liked/disliked next to each sketch.

teamideation.png

The team during the upvote ideation process. I am on the far left!

From the process, we developed a list of screens and features we wanted to focus on:

  • Home/Marketplace page: The main page will act as the main interface for users to search for and buy drinks.

  • Discover/Learn: Users can find recipes, new types of alcohols, or understand more about alcohol related subjects in general.

  • Calendar: Users can plan to have alcohol delivered for an upcoming event.

  • Profile: Users will be able to have a profile that can be shared with other users. They will also be able to track their previous orders.

putting it together

I created wireframes of the interface based on what we wanted to include from our upvote ideation session and meetings to be used during our first round of usability testing. Here are three of the screens:

dion1.PNG

Landing/Onboarding Tutorial

dion2.PNG

Home and Marketplace

dion3.PNG.jpeg

User Profile

guerrilla testing

first time validating our design

We wanted to gain quick feedback on our new design, so we conducted guerrilla testing at Purdue University using our paper sketches. We went to random students and gave them a simple task they could complete using the screens we had.

some of the most confusing areas

There were a lot of areas in which the functionality was not completely clear.

test1.jpg

Users did not know what the icons represented.

image-asset-2.png
test1.jpg

Users were unsure if the search only brought up suggestions or if the suggestions were the only option for the search.

Having where users ordered their alcohol directly under the search and suggestions area was confusing. Users didn’t know if the “Apothic Red” was a suggestion or a result of their search.

trying it again

We quickly realized that our app was not as clear as we thought it was. The mix of ambiguous words - such as ‘discover’ and ‘learn’ - as well as the layout of UI itself made a functionality-dense app that was hard to understand. We took each piece of feedback and went through the full UI and made changes. We then turned our paper screens into a medium-fidelity prototype using Figma.

image-asset-4.png

We conducted another round of guerrilla testing to validate our design changes before moving into the high-fidelity space.

guerrilla testing take 2

We made the second round different by giving each participant five tasks that would allow them to see almost all of the screens we created.

​

  1. Find and purchase a bottle of Victorian Ale

  2. You are having a date night tonight and want to find a recommended Merlot for the occasion. Please do so.

  3. In your profile, find your friend Ben White and send him a drink.

  4. Locate your calendar and add an event for the 28th.

  5. Locate your upcoming events and add a drink to Ashley’s Girls’ Night drink list.

 

We were able to test four people. Our design decisions felt validated so we moved into the high-fidelity space to work on our final deliverable.

final design

an alcohol delivery app

We combined our ideas into lo-fidelity screens and after gaining feedback moved into the high-fidelity space.

Screen Shot 2019-09-26 at 7.40.27 AM.png
Home/Marketplace

The home page features both special events, a way to narrow based on type of alcohol (beer, wine, etc.), and the marketplace. This is a combination of multiple features offered in the app combined together in the home page, which also includes personalization features using the special events.

Discover

The discover page combines both special events and learning features such as how-to’s and recipes. This is a colorful page for the user to explore and learn about alcohol and the different ways they can use/make drinks.

Screen Shot 2019-09-26 at 7.40.41 AM.png
Screen Shot 2019-09-26 at 7.40.34 AM.png
Events

Events page includes different types of events for users for reference if users don’t know what drinks to buy for their events. There are popular events such as date night, and seasonal events such as Easter Brunch depending on the time of year. Clicking on an event will take the user to a store page with drinks recommended for that event.

Wine Store Page

This is an example of one of the store pages. Top sellers show in the favorite wine among the users. Recommended wines give advice based on the user’s flavor profile.

Screen Shot 2019-09-26 at 7.40.48 AM.png
Screen Shot 2019-11-19 at 2.24.06 AM.png
Product Detail

The product detail page shows what the user would see if they clicked on an individual product. The user can purchase the amount and add the product to the car. They can see a description of the alcohol and the flavors displayed in the alcohol, or explore a featured how-to using that alcohol.

Calendar

The calendar shows users their upcoming events and details. There is an add event feature which allows users to add their own event and buy drinks in advance for it. Users can add drinks to their events or invite friends to buy for the event as well.

Screen Shot 2019-11-19 at 2.24.18 AM.png
Screen Shot 2019-11-19 at 2.24.24 AM.png
Profile

This is the profile page the user would see. They have a taste profile with the user’s top flavors underneath their basic information, which is just a placeholder until our Sponsor develops this part of the app. Underneath, they have their personalized recommendations and buy again selection.

bottom of page