RED EYE
screening room
make it social.
RED EYE
Red Eye is a small cafe that serves hand crafted espresso and tea beverages. Currently, it is using a Facebook page to promote their business. With this project, we wanted to give them a branded online presence that would help them reach their customers.
My Role
Device
Year
Tools Used
- UI/UX Lead
- Product Photography
- Product Research
- Ideation
- Sketching
- Wireframing
- Prototyping
- Visual Design
- Interaction Design
- Website
- 2019
- Photoshop
- Illustrator
- Whimsical
- Sketch
- InVision
- Google Apps
- DSLR
The Problem
As a group of two UX designers and three developers we came together to create a website for a local coffee shop. We chose Red Eye because it is a small coffee shop without an online footprint, and I have a personal affinity towards it while I was attending OCAD.
The Solution
- Build a website that would fit with in the brand Red Eye already has, which would allow them to display their location, menu, and story with their customers.
Having an online presence is a growing need for smaller shops as larger corporate chains make their mark in large cities. We looked at how the market is trying to compete with the daunting task of staying in business as these chains loom overhead. So, we first looked at other small shops in the city that have a good following, as well as a few that have started to branch out and have multiple locations that compete with the non-local chains. Then we went to the customers to get better insights on their behaviours and what they want from their local coffee house.
Competitive Analysis
We looked at other coffee shop websites and what they had to offer their patrons. This gave us a good understanding of what was important to have on a website and what was extraneous. From here we highlighted the features we would include (in blue) and went on to doing user interviews.
User Interviews
We conducted a combined tactic in sending out the questions and doing 1-on-1 interviews with users. By doing this we were able to get a base understanding of our users, then we were able to have more informed conversations once we moved on to 1-on-1 interviews. This helped us have a defined direction in the course of our data finding and what users really needed.
Base User Questions
- Have you visited coffee shop websites in the past 6 months?
- Why do you visit websites for coffee shops?
- How do you access coffee shop websites?
- What are some of the coffee shop websites you have visited?
- What stands out to you when you visit a coffee shop website?
- What is your age range? (optional)
Mood board
I started with a site visit so I could get to know the owner and take photos of the cafe, so I could go and create a mood board of everything that inspired me. With the interior of Red Eye being key to their brand and aesthetically pleasing, I based the website color scheme off of their color palette. I also drew inspiration from the tiled counter and the textured paint that would be highlighted in my design. I was able to be fully creative with the project and had a lot of fun experimenting with what I was able to do.
Lo-Fi
Moving on to the lo-fi frames I went with a simple design that fell in line with Red Eye's brand and allowed for simple and clear navigation for users. Also, I looked at other coffee shop websites to gather some inspiration, but to also get a feel for what was and was not working for them. As a whole, most sites I visited had a simple layout, but they were easily overcrowded with add-ons or navigation text that was not clearly visible at all times.
Hi-Fi Frames
Keeping in mind of the style guide I and from the photos I had taken at Red Eye, I had a relatively easy task ahead of me to skin and populate the lo-fi frames. I chose to begin with experimenting with the photos I had taken in the cafe to help drive the colors and feeling of the website.
Iteration
The only iteration I had after user testing was a personal choice where I wanted to bring in more of the cafe into the website, so I took a closer look at the photos I had taken, and this gave me the inspiration of using the tiling on their counter as an element in the navigation. In doing so, this allowed for a cleaner look to the navigation, and allowed for more integration of color from the palette.
Impact
With an accessible website for new and old customers the future of Red Eye is to grow even more. Which it should. Red Eye started as a passion project and has been a main stay during my schooling at OCAD. I put a lot of thought into this project and believe it would positively help Alex out with reaching out to her customer base.
Where I See This Going
I see this website as a means for Alex to help promote the art and events going on at Red Eye. I have the menu option for 'Community', but for this first iteration my team and I felt hat we should simplify first and then move forward with building a backend form for Alex to use so she can easily update events. After this, should Alex choose to go for mobile ordering, we would want to help her along the way, but for now digital ordering is not in her current vision.
What I learned
I learned to lead a team on a project. This allowed me to set a plan and talk to everyone involved, making sure ideas were heard and taken into consideration. Working with a dev team was helpful in my learning to get a handle on how to deliver assets so they could easily understand my vision. Having some knowledge in HTML/CSS helped a lot and allowed for limitations and constraints on what I could and could not design into the website.
Screening Room
