UI/UX

For the past seven years, I have focused primarily on print design. But as a designer who is always eager to learn something new, I enrolled in an 11 week UI/UX digital product design course offered by the Nashville Software School in the Summer of 2017. Throughout the class, we worked on the redesign of a real-life start up and was able to work with the founder and CEO. Each student worked on our own project.

 
UIintoimage.jpg
 

Project Overview

Disclaimer: The views from this case study is strictly my own and are not reflective of Hi Karl.
 

Company Overview

Hi Karl is a music industry focused start-up who offers concert goers recommendations based on their musical preferences. The company utilizes an AI-powered virtual concierge chatbot which integrates with Amazon Alexa and Facebook Messenger. Hi Karl uses listen habits, geographic data, and concert availability to provide relevant concert recommendations to connect users with available shows taking place in the next 48 hours. 

 

My Role

Although I was in a class setting, I worked on this project by myself. I was responsible for the defining the problem, user research, data analyst, creative direction and design.

 

Challenge

The company, which currently operates in four cities, wants to grow its user base so it can expand to other urban markets in the United States and Europe. However current Hi Karl users are limited to using the AI-powered virtual concierge or the Hi Karl landing page making accessibility of the data a major concern. My job was to conceptualize a mobile application to make to content easier to find and access. 

 Current Hi Karl Landing Page

Current Hi Karl Landing Page

 Current Hi Karl Search 

Current Hi Karl Search 

 

User Research & Data

 

 

Research Plan

Researching users is valuable for testing hypotheses and finding patterns to design the right solution. It is important to understand who I am designing for. I knew I wanted to meet with several people who go to three or more shows a month to see how they plan for social activities, how they find/decide on which shows to attend, and how they purchase tickets for a show. 

It was important to see how attending a social activity was effected by whether they were already out (to dinner, for example) or if they were planning from home. I also have several focused questions on the relationship between technology & analog to find activities and make a decision.  

 

Users & Customers

The main consumers are 21-25 year olds who are comfortable with new technology, live in urban environments, and go to several shows a month.

User 1: Ezra

College student or young professional who is new to town. He is looking for things to do but isn't familiar with the area. The young professional is entry level and works in an office. He enjoys learning new technology and is constantly learning new things in order to stand out and get ahead in his job. He is motivated by seeing friends and having fun.

User 2: Lilly

Spontaneous traveler who is in town for a short time and wants to experience local culture. She was asked to go out of town with a group of friends and does not have her trip entirely planned out. She enjoys going with the flow. She is motivated by having fun and experiencing culture in a city that she's unfamiliar with.  


I interviewed several concert attenders and found that users who are wanting to see a show need a way to access information quicker and on the go. Last minute shows will typically feature an artist that users are unfamiliar with, so it is important that Hi Karl has a function to listen to the artist. It was also important that you didn't have to navigate through the app to do this. I also discovered that filtering by genre was not as important as being able to filter what was playing nearby.  

 

 

Design

 

Sketches & Wireframes

I began sketching preliminary UI ideas into wireframes from the feature sets I defined after my user interviews. After rounds of rapidly sketching and iterating on each screen, I condensed my best options into a series of low-fi digital wireframes. I used atomic to make the prototype interactive. 

 

Mockups

After making the interactive prototype, I made several mock ups that that show the desired design of the app. I used dark colors since most users will be using this app at night and kept the gradient consistent with Hi Karl's current design.

 

What I Learned

 

 

Lessons Learned

When I started this class, I wasn't totally sure what UI/UX design was and learned so much! User experience design is a lot more of the thought process and methodology than visual design aesthetics. We are responsible for changing customers behaviors through habit building and patterns. During the entire project, I had to be reminded that I am not the audience and will never be. And the more I worked on the product, the further away from the audience I became because I was so familiar - I think that will be the biggest struggle. I also learned the importance of constantly evolving and iterating.