Game Design | UI / UX Design
PintTicker_Thumbnail.png

Pint Ticker : UI / UX Designer

Pint Ticker

Pint Ticker is a mobile app that allows you to share, review and keep a personal journal of all of the beers you discover. Send recommendations to friends and bookmark beers to try out in the future!

I started this personal project in June 2019 and I created it to practice my UI / UX skills. At this time, it is a work in progress and the end goal is to have a polished concept.

Mockup of the Activity (Home) page.

A page detailing information on a post.

Keep a list of the beers that you drink.

A mock-up of a profile page.


Ideation

A quick look into my notebook. I tend to make thumbnails of screens before creating wireframes on the computer. It helps to get my ideas down on paper.

Inspiration for this project came from my own lack of knowledge of alcoholic beverages. When I usually go to bars with friends, I either pick a random drink from the menu or simply say “I’ll have what they’re having.“ I’m also currently using a journaling app called Daylio to track how I feel over time and wondered what a version would look like where you tracked your alcoholic beverages instead. I also know that Moleskine has their own passion journals for wine and beer, and I wanted to create my own digital version.

AUDIENCE EXPERIENCE GOALS

  • Easily record, review and send beer recommendations to friends.

  • Feel like a beer connoisseur by keeping a journal of the beers you consume over time.

DESIGN GOALS

  • Create an easily navigable UI.

  • Complete new entries in less than a minute.

  • Design a native iOS app and common iOS design standards.

  • Target people age 21 and older.


UX / UI Design

A screenshot of the survey I sent out to my Facebook friends.

First, let’s gather some data

The first step I took was to create a quick survey to find out what factors people paid attention to most when selecting a drink - wine, beer, or spirits- off of a menu. In theory this would help me decide on what information should be emphasized when designing the UI. I also wanted to get a sense of how many people kept track of their drinks and how they went about doing so.

16 people responded to the survey after I posted it on my Facebook page. Out of those 16 people, 68.8% consider themselves wine drinkers, 56.3% consider themselves beer drinkers, and 75% consider themselves spirits drinkers. The top three factors that surveyors look at when selecting wine to drink are price, grape variety, and logo / label design (tied with color at 11 responses each). The top three factors that surveyors look at when selecting beer are type, style, and recommendation. Finally, the top three factors for selecting a spirit (or cocktail) are type, price, and proof ( tied with cocktail options at 8 responses each).

Only 1 person kept track of the wine they drank via a written list and photos. No one kept track of the spirits they drink. However, 5 out of the 16 surveyors recorded the beers they drink. 2 out of those 5 used an app called Untappd to keep track while others used memory, google docs, and pictures. One surveyor also commented about a friend who uses Swarm check-ins to track their drinks and location.

Based on the responses from this survey, I started to take a more social media approach for this app. Something like Instagram but for keeping track of your drinks. I also decided to scope down to one of the three beverage categories I included in the survey. I chose beer because more people were interested in recording what beers they drank compared to wine and spirits. After looking into Untappd, I decided to go less the “check-in“ location based design and lean toward something more journal-esque with an option to connect with your friends.

Personas

I created a couple personas to help guide the project. This one is Matt, the newbie.

I created a couple personas to help guide the project. This one is Matt, the newbie.

Another persona I created for the project. Nicole, the hobbyist is much more knowledgeable on beers than Matt.

Another persona I created for the project. Nicole, the hobbyist is much more knowledgeable on beers than Matt.

Working in Figma on the wireframes. I naturally want to call this grey-boxing, but I know that’s a game dev term that doesn’t always apply.

Wireframes

I first started making rough hierarchy diagrams and thumbnails of screens in my notebook to get some ideas down on paper. I then moved onto creating wireframes in Figma. Starting out with wireframing helps me focus on the layout, interaction, and visual hierarchy of the app without getting distracted by color and other visuals. It also allowed me to set up a good chunk of my component library.

I decided to design for an iPhone X aspect ratio since that seems to be a standard nowadays. I have also never owned anything other than an Apple iPhone, so it seemed like the natural direction to go for me. The down side to this is that I do not own an iPhone X to test on.

The icons I have been using for this app all come from thenounproject.com, which is a super useful website. Ideally I would make my own, though I don’t subscribe to Adobe CC anymore and don’t have access to Illustrator. Also, borrowing icons is much faster.

Wireframe of the Activity/ Home page.

Wireframe of Entry Information.

Wireframe of the User’s Profile page.

A gif depicting some interaction between the Activity and Entry Information pages.

Creating the mock-ups

A peak at the New Entry forms I put together.

Normally usability tests and iteration are done at the wireframing stage, though I decided to jump right into adding color, photos, and mock-content while continuing to work on the layout. For the color scheme, I did some quick research on beer infographics and what colors they used. My final choices turned out to be very similar to the color scheme used in Untappd, but this was not intentional. Mock-pictures were either found on pixabay.com or taken by me and profile pictures were taken from my friend’s pages on Facebook (thanks all!). I decided not dive too deep into finding a stylish font family, and decided to stick to using Roboto.

Next Steps

Once I finish the mock-ups in Figma, I would like to create an interactive version in Unity so I can pass it out to some friends to get feedback on it. At this time, I’m going at my own pace with it.

Image Credits

Icons from thenounproject.com

Barley - Laymik
Production - Laymik
Beer mug - Laymik
Toasting Glasses - Laymik
Recommended - Andi Nur Abdillah
Note - Fauzi Ahmad
Location - Saifurrijal
Hashtag - endang firmansyah
Percent - amy morgan
Drop - Laymik
Hops - Laymik
Calendar - Saifurrijal
Send - Gregor Cresnar
Badge - Royyan Wijaya
Settings - akash khandavilli
List - Gregor Cresnar
Bell - Saifurrijal
Search - Braja Omar Justico
Home - Braja Omar Justico
Mute - Fauzan Adiima
Delete Contact - Mike Rowe
Bookmark - Bhuvan
Flag - ghufronagustian
Back Arrow - Bhima
Menu - Numero Uno
Plus - Aybige
User - Wilson Joseph
Exit - Aybige
Dots - Creative Stall
People - Alice Design
iPhone X - Joel Wisneski