Club Lucky
A Second Chance For A Chicago Classic
Type:
Bootcamp Project
Tools:
Figma, Paper, Illustrator
Roles:
Graphic Designer, UX Designer, UX Researcher
Timeline:
4 Weeks
Project Overview
The following is a UX project, in which my group and I worked together to create a music discovery app that would help solve the problem of people having trouble finding new music. The process to do this took several weeks in total as we conducted user research and competitor research, developed various prototypes, and finalized different elements of the project into one final iteration that we would then present to our bootcamp class. This process was not without its hurdles as we ran into issues in several places when it came to the topic of onboarding as well as making sure all of the scrolling elements of the project were able to work. That said the project was completed on time and was able to demonstrate what its purpose was.
User Research
When my group was tasked with the project of creating a new product or redesigning an existing website, we were confused at first. This project was to be our last one during the bootcamp and as such this was meant to incorporate elements of user experience, user interface, and front end coding.
The group ended up deciding on redesigning a local Chicago restaurants website that we found while looking for ideas as to what we wanted to do. This restaurant was Club Lucky, an Italian cocktail lounge and supper club from Chicago’s Wicker Park neighborhood. It was very clear from the first time we looked at it that there was a lot that needed to be done with the restaurant's website with one member of the group describing the website as giving off the vibe of an ‘Italian bowling alley’ which was not what the restaurant is. The website itself was a very cluttered design that seemed very outdated and tacky. There was no clear tab on the navbar that indicated to you where the menu was. The page layout changed drastically between pages. Much of the branding on the website was not really unique or noticeable. It was from there that we realized that this website held a lot of promise in terms of what someone could do with it.
Our main goal with this redesign was to create a website with a focus on modernization and accessibility and this would be achieved by rebranding the website with a more unique and distinct look and feel, overhauling the layout of the website, and promoting consistency between pages.
Definition & Synthesis
Before we could redesign the website, we first had to understand what would people want out of this website and what did they think about the current website. The first part of our research was us conducting surveys using google surveys to understand not only what users want from restaurant websites but also how often they use them and how often they eat out. These questions are important as it gives us a baseline to understand where we should be taking the project. We also conducted interviews to get a bit more of an in depth understanding about what some people thought, here are some of there comments include:
“No prices or if the menu is so out of date that it is different when you get to the restaurant”
“Poor functionality, outdated menu, outdated hours, anything that makes it remotely difficult to find the menu, comic sans font”
“when the website is busy and I cannot easily focus on one item, image quality is not good, there are too many options in the website menu, when it is hard to find the information I am looking for”
We took these results from both the surveys and the interviews and made affinity diagrams from them. Which helped us narrow down what exactly we might want to focus on. The three big findings that came out from the survey and the interview was that users wanted to be able to find the menu right away, users wanted better UX from the website, and users often felt confused or overwhelmed by how much information was on the page. We also found out that most users ate out at least once a week.
It was from these findings that we created our user persona Jenny Barker, a 25 year old travel influencer who is looking for places to visit on an upcoming trip back home to Chicago. She wants to try new places to spread the word about them, but has a hard time going through websites with out-dated and confusing designs.
From our research we also created a feature prioritization matrix from our findings and found that the most important aspects of the website that we needed to stress in the redesign were clear website navigation, menu, online ordering, prices, hours, location, and more images.
Ideation
As we collected our user research and began looking at the different ways we could solve the problem of creating a new way to discover music, we all did sketches of various different ideas of where we should take the project. It was from these paper prototypes that we started to notice some common ideas that we all had such as the ability to tell the app about your personal taste in music as well as the ability to link the app to your spotify or apple music accounts. It was through this collobration that we were able to start to build a fuller picture of what would end up becoming the lo-fi and mid-fi prototypes of the project. Along the way we would settle on the name Forte as it helped tie into the music theme of the app, helped to show how we were trying to signal boost smaller artists, and lastly to show how the app could be personalized to the users tastes in music.
Once we finished looking over our findings, we all sketched up ideas for what we thought a redesign of the website might look like. We did vote on what elements we thought should stay for the lo-fi prototype.
After we finished the paper prototype, I created a composite version of the prototypes that would serve as a lo-gi prototype. We would use this prototype as a way to test potential color schemes with use of grays, whites, and reds.
From there we continued to refine the design and created a mid-fi prototype that started to be filled with actual content, not just the placeholder text from the lo-fi prototype. What was able to be added during this phase of development was more stylized components and more varied fonts as well as the choice to move the logo from the side of the navbar to the center.
We also had to be careful at this point in the project in particular because we knew we had to be able to make whatever we did in Figma in github. While this was not a complete 1:1 recreation in the end there were definitely elements that we still had to consider.
The biggest change that you would see when it comes to the various different prototypes in both the mobile and desktop versions of the website is how the navbar and information was presented on the homepage. As for the mobile version of the website the design was very different from the desktop with the decision being made to have the mobile version of the website have this ‘infinite’ scrolling aspect to it as you learn more about the organization.
In the end, there was a lot that we learned from this project, whether that be that people are not just looking at restaurant websites for their menus, the importance of having things line up with people’s expectations, and even the importance of less is more.
Lastly, If we were to continue this project there would be a couple of things that we would want to try and focus on. The first step would be to try and reach out to Club Lucky with this prototype to see what they think of it. The second step would be to continue to iterate on the website design and layout, such as working on a mobile version of the website. Lastly, we would program and code more of the website.
Conclusion + Future Opportunities
User Testing + Outcomes
Prototyping (Lo-Fi)
That said, we were able to create a hi-fi website that was able to deliver on our goals as well as being able to be translated into a coded website. We were able to create a website that felt more modern and unique as well as having the information people would be looking for upfront for them.
We also were able to add extra design flourishes like the dip in the top navbar where the logo was, add transitions between pages, and create a page that helped explain a little bit about the history of the restaurant to what you should expect from this restaurant.
Takeaways:
“Infinite” scrolling navigation on mobile was too much
Onboarding process on mobile was confusing
Information was very clear
Praised the layout