VIOLA & AGNES CAFE'
A responsive website and rebrand
“I love Chef Aaron's creations. He makes seasonal dishes that are unforgettably delightful. The long lines are worth the wait!"
PROJECT PLAN
CHALLENGE
Viola and Agnes is seeking to rebrand its online presence with a responsive website.
BACKGROUND
Viola and Agnes has a loyal and growing customer base and is looking to grow their online presence by aligning their brand online and with their social media platforms.
SOLUTIONS
Create a new visual identity with new branding and logo.
Develop a responsive e-commerce website that increases brand awareness and sales.
Design a pleasant and efficient experience.
See Project Brief See Research Plan
TIME
4 Weeks
ROLE
UX Designer(Researcher, Visual Designer,Interaction Designer,User Testing)
TOOLS
Sketch, InVision, Pen+Paper, Illustrator
TEAM
Alan Hurt: Providing guidance as a mentor
Process
01.EMPATHIZE
Research Plan
Market Research
Competitive Analysis
Provisional Personas
User Interviews
Empathy Map
User Personas
02.DEFINE
POV/HMW
Project Goals
Feature Roadmap
Sitemap
04.PROTOTYPE
Low Fidelity Wireframes
Mid Fidelity Wireframes
HiFi Prototype
03.IDEATE
Task Flow
User Flow
UI Requirements
Wireframes
Branding
Responsive UI Design
UI Kit
05.ITERATE
Usability Testing
Affinity Map
Priority Revisions
01 EMPATHY
SECONDARY RESEARCH
Market Research
I performed market research to better understand the restaurant sector and specifically in Houston and greater Houston area. My goals were to identify Viola and Agnes’s target market and define Viola and Agnes’s users.
With the current situation “, Researchers estimate that Texas' restaurants will lose $4.2 billion in sales by the end of April, and roughly 61 percent of the state's restaurant workers have been laid off or furloughed.” Eateries are looking at different ways to compensate for their loss in business, such as: produce boxes, gift cards for future services, online orders, takeout and/or grocery store meal deals, and online groceries. By “engaging in a little influencer marketing” by posting on social media, and adding reviews to highlight your experiences, these eateries will stay in people’s minds. Some businesses can’t afford marketing, and word-of-mouth marketing definitely helps to bring more awareness to the eatery.
Some eateries are now heavily dependent on third-party apps. While third-party apps are helpful, garnering new and old customers, and provide convenience for the users, they consume a certain percentage of the amount paid, draining profits for the eatery. By ordering from the restaurant directly, all profits go toward the business. Ordering directly from the eatery’s website can create more convenience for the business owner.
Given the current situation, there are businesses that are struggling. According to the Greater Houston Partnership, half of surveyed small businesses in Houston have applied for federal assistance during the pandemic. Despite that economic hit, other restaurants have also delayed reopening. An eatery can stay current, and perhaps stay afloat with innovating and expanding their online presence and engaging customers outside of the physical space and in the digital space.
Target Market
According to Zion and Zion, 63% of people 18 to 29 years old have used a multi-restaurant delivery website or app service in the past 90 days, followed by 51% for those 30 to 44 years old, 29% for those 45 to 60, and just 14% for those 60 and over.
A survey by the National Restaurant Association shows that more than 60% of Millennials want restaurants to use technology to make ordering takeout and delivery more convenient, a demographic that could include students, young families, full-time employees, or work-at-home professionals.
Competitive Analysis
After conducting market research, I performed a competitive analysis to find the strengths and weaknesses of the direct and indirect competitors of Viola and Agnes.
Provisional Personas
I created provisional personas based on the market research.
PRIMARY RESEARCH
User Interviews
I conducted a series of user interviews to gain insight of the pain points, goals, needs and motivations in respect to any experience at Viola and Agnes. I enlisted 6 users that are customers of Viola and Agnes’s Cafe. I asked open ended questions regarding their experience at Viola and Agnes, which allowed me to gain a deeper understanding of the users’ needs and insights. I organized my research findings into an empathy map to synthesize the results of the user interviews.
Research Synthesis
I recorded all the observations from the user interviews onto sticky notes, assigning each interviewee a color.
Empathy Map
Next, I categorized these sticky notes into groups: say, do, think, feel, do, pains, and gains. I looked for patterns and grouped similar observations together and created clusters. From these clusterings, I came to the three most prominent insights and corresponding needs.
INSIGHTS
01 User finds that the food descriptions on the menu do not always correspond to the pictures of the food
02 User appreciates communication about delays in food orders from the service staff although there is a long wait time.
03 User is intrigued by blackboard menu of daily specials.
NEEDS
01 To have pictures of the food to validate the descriptions of the food
02 To keep customers occupied during their wait time
03 To organize the blackboard, so customers can understand the menu with ease
02 DEFINE
POV + HMW
Using the needs and insights from the empathy map, I framed the Point of View statements. After verifying the POV statements, I created the How Might We Questions.
User Persona
Based on from my research findings, and insights from the empathy map, I created a user persona that reflected the Viola and Agnes’s customer profile. This user persona guided my design process.
Product Roadmap
Based from my findings on my research, persona, and market standards, I prioritized key elements in a roadmap from “must haves, nice to haves, surprising and delightful to have, and can come later.”
Sitemap
I created a sitemap based off my brainstorming, strategy session, and research findings.
03 IDEATE
Taskflow
In order to understand how the user completed a task, I created three individual taskflows. This helped me understand the flow of the feature and the pages that I needed to sketch and ultimately design.
Userflow
I created user flows to identify the action and corresponding pages that are needed to complete the three main tasks.
After creating the task and userflows, I outlined the high-level and page requirements in the UI Requirements document to prepare for the mid-fidelity wireframes.
04 PROTOTYPE/TEST
Low Fidelity Sketches
I sketched out options for the homepage, menu, our story, and location in a tablet and browser viewport. The sketches depicted the elements and features from the sitemap and started the process of creating the UI.
Responsive Wireframes
Focusing on the desktop experience, I created additional wireframes for the tablet and mobile viewports.
Usability Testing
I conducted usability testing with the mid-fidelity wireframes. I recruited 5 users, and followed the Usability Testing Plan . Using Zoom, and a shared screen with the talk aloud method, the users carried out the three tasks.
Affinity Map
Gathering all the information for the user test findings, I synthesized the information into an affinity map. This allowed me to uncover the patterns from their behaviors, actions, speech, and emotions, which highlighted areas for improvement.
BRANDING
Logo Sketches
I created logo sketches based inspired by two of the brand attributes energetic and inviting.
Style Tile
I used the brand attributes energetic, inviting, vibrant to for the color palette and typography to create the style tile for Viola and Agnes.
05 ITERATE
High-Fidelity Wireframes
Using the Mid-Fidelity wireframes and the Style tile, I created the High-Fidelity Wireframes.
My Takeaways
01 Begin research with a blank slate and follow your research. I began the project assuming the cafe’ would need an online ordering system, take-out menu, and a prepared foods menu. These needs were based on market research, but after the user interviews these assumptions were invalidated. The user interviews revealed that the customers loved the food despite the hour long wait times, and were returning customers because of the daily specials and the regular menu. Their needs navigated the direction of the design.
02 Follow user patterns, but adjust the content according to the user’s needs and motivations. For the design of the homepage, I emphasized the location of the cafe’ and the daily special images to help the user find the location of the cafe’ without having to select the Contact Us page. I addressed the daily specials needs by integrating Instagram into the homepage, so the users can access the daily specials in the site without having to exit and access the Instagram app.
Next Steps
I would integrate a prompt to subscribe for the newsletter. The user would receive a daily email newsletter about the daily specials since the menu is changing everyday. This would alleviate the need for the user to remember to check on the specials via social media or the website.
I would also create a virtual counter to show what ticket number would be called next. Customers have to wait in person to wait for their number to be called. If there was a virtual counter to show the upcoming ticket numbers that would be called, the customer could wait outside or near the cafe’.