Alco

→ drinks delivered right to your door 🚚

→ ui/ux/interaction design, prototyping, branding 👨🏽‍💻

→ june 2019 - feb 2020 🗓

→ figma file 🔗 ← please explore!

role

I was as the sole UX Designer at Alco and was tasked with designing the mobile app as well as the website, distributor app, and the company's brand. This case study will focus on the main mobile app. When I joined, the startup was in its early stages and had no digital product, so I was able to create and entire mobile app from the ground up.

about Alco 🍷

Alco is a drink delivery platform focused on getting user's their delivery in under an hour. The platform debuted its services in the New Jersey and Los Angeles areas. The app was published on the App Store but is no longer there as the founders have decided to move on to a new project.

problem

Alco began as a texting bot, but this wasn't an efficient nor an approachable way to handle user orders. There was also no opportunity for visual expression through an SMS platform which hurt the company’s brand identity.

These factors put Alco at a disadvantage to its competition. A mobile app was necessary to gain better traction with customers.

solution

• Streamline ordering process and avoid issues caused by texting bot.
• The app’s interface must be able to handle company/inventory growth.
• Contrast the complex UIs of competing apps.

sign up flow

A proper customer acquisition process experience is important because it's the user’s first impression of the product. The flow must be smooth and streamlined in order to keep the user’s interest.

Because the user is giving their personal information, it's necessary the interface feels secure. I achieved this through a minimal and professional layout and the use of blue which invokes the feeling of safety.

the alco map

The map interface was an opportunity to add a striking visual element to the mobile app. It maintains consistency with the Alco's brand identity and the app’s visual design. The map will not be used for way-finding so it doesn't need to be entirely functional.

On this page, the user can choose where to have their drinks delivered by searching or using their current location. This precedes the menu page because the drink options depend on the delivery location

menu

The menu interface needed to be visual because users tend to recognize brands through their visual elements. The menu is split by drink type and each drink option is given its own card. The user can scroll vertically through the drink types and horizontally within the categories. This grid system was an efficient way to maximize space while allowing for images of each drink option. Additionally, a grid system is more adaptable to the location-based menu system and inventory growth.It also contrasted the cluttered look of some of Alco’s competition.

The user can also reveal a search option to quickly get to whatever drink they desire. Because Alco’s current menu size is small, the search function didn't need to be visible always. As the size grows, it would easy to implement a more static search bar.

add to cart

The use of a modal allows the user to not feel pressured into ordering, allowing them to easily exit back to the menu. Additionally, the order can be fully customized within the modal itself. Because the user can peek at their options, they're more likely to tap on multiple cards which could translate to higher volume orders.

checkout

Hierarchy was used on this page to guide the user through their order summary. The delivery location is the most prominent aspect to ensure the order is delivered to the correct location. A map preview was added in case the user was more familiar with the spacial location than the actual address.

The order can be edited on this page, and the same add to cart modal pops up when doing so. This avoids time wasted by the user going back to the menu page.

what i learned

I learned being able to collaborate with non-designers is a vital part of my work as a designer because the digital product is the meeting point of all the company’s moving parts. I also learned it's necessary to think about the larger scope of the project from the beginning. While designing the Alco app, I kept company growth and the potential for a larger inventory in mind.

embedded Figma file

feel free zoom in 🔎 and check out my design :)