Drank

“Our company has a split personality”

After meeting with Drank, it was clear that they wanted a professional website that showcased Dranks personality and increased app downloads. To understand Drank, I asked some basic branding questions so we could have a better picture of who they were as a company. 

Branding questions

1. What does your business do?
2. What are its defining features that allow you to stand out from the competition and keep those clients coming back repeatedly?
3. Who's your target user?
4. What's your company's personality?
5. What are your brand's values?

Shaping the style guide

Understanding who Drank is as a company, I started to come up with the first draft of the style guide so that not only does Drank have a cohesive look and feel but they have something for future reference. Nunito was one of the fonts that I picked because it felt professional but also had a playful side. They also only had one official color and that was the Drank gold. Using that as a base I came up with Drank black, Drank off black and the Drank off white.

Creating the design system

After the initial draft of the Style Guide, I realized I needed to actually create a Design System that Drank would be using and editing moving forward. I presented the first Style Guide and we came to the conclusion of some small edits like changing the font to Montserrat and building out a set of icons and other UI patterns, as well as design standards to follow. My partner also designed the new Drank logo, which needed to be included in the Design System.

Sketching out designs

With the new design guidelines, my partner and I sketched out possible designs. I focused on two highlights for the homepage, one was the CTA for app downloads, and the second was the highlights of the app itself. Drank wanted to make sure that the homepage showed what the app was capable of. When sketching, my focus was the CTA buttons to download the app when the user first arrives. When the user scroll down showcase the different features the app has. We presented our sketches to Drank and they ultimately decided on one my partner did.

Providing hi-res screens

I was in charge of bringing the sketch that Drank had picked to life while my partner worked on the illustrations that we were going to use for the website.

Edits to the first draft

After presenting the screens to Drank we decided on what exactly we wanted to highlight for the app features. We were going to incorporate a “Get in touch with us” form to end of the page if users wanted to contact them. However, we ultimately decided on keeping the chatbot they have and then including the email if users want to reach out. We made some minor edits like changing the background to a darker color and the carousel cards to lighter since humans perceive things that are closer to be lighter than those further away. I made sure the buttons were consistent with those on the style guide. Finally I changed the heading to be more impactful in telling the user what Drank is.

reflections and learnings

This redesign was all about understanding who Drank was and bringing that personality to the forefront. Creating basic design guidelines so Drank had more structure for future redesigns of the website or app was one of the problems that I felt we solved for them. However when it comes to the other problem of increasing app downloads we won't know fully until the redesign goes live and they can check their analytics. After this project, I was brought on to design the web and mobile app.

Change is good

After completing the first redesign, Drank went through some changes that needed to be added to the website. First was the new logo and second was a company shift from primarily focusing on breweries to expanding to coffee shops and other eateries.