Project: Working with a real company with a real problem.
Role: UX/UI Designer
UX Design Tool: Adobe Xd, InVision
Timeline: 9 Day Sprint
For this final project at the Ironhack Bootcamp, I was given the opportunity to work with a real client. Issa’s Flame Baked Pita Chips is a family-owned and operated business in Buffalo, New York. The original pita bread bakery was founded by a Lebanese immigrant, Habib Issa in 1981. “Bringing hospitality has always been the most important ingredient in a Lebanese kitchen with pita bread following in a close second,” according to the Issa family.
When brothers, Andrew and James took over the family business in 2014, they decided to create their classic pita chips. Issa’s Flame Baked Pita Chips got their big break in 2016 when they began selling 34,000 bags a day in the Buffalo Public Schools.
Fast forward to October 2020, the Issa’s are now ready to update their website. The original site was functional but created before the brothers had developed the business’s identity and personality. They're ready for a new look.
That’s where I come in. As a student at Ironhack Miami, I was honored to be among those tasked with a site redesign for the company.
The main goals of the client are that consumers need to know about and where to buy their pita chips. As well as, why they should choose their chips over the competition. In addition to increasing brand awareness, Issa’s wants to incorporate social media to promote consumer engagement.
Discover
I met with two of the stakeholders via Zoom. I listened to Lisa Nuesle and Andrew Issa tell the history of Issa’s original store, Cedars Bakery and how the flame baked pita chip was born.
“Pita chips have basically taken over the bread business we just, we do probably 80% pita chips now”. -Andrew Issa
Stakeholder Interview Takeaways
- We want the website to reflect our personality.
- We want the company to retain the communal aspect of the Lebanese culture.
Research
I began with the Lean UX Canvas as a roadmap to keep track of the business problems, the business outcomes, and user benefits, as I discovered them throughout the design thinking process.
Industry Research
“Millennials are driving the better-for-you snacking category” according to Food Dive. They also reported that 64% of millennials preferred snacks with fewer ingredients. The article went on to say this group represents about 23.4% of the population and is the biggest demographic in U.S. history. This definitely gets the attention of marketers. Also, noted millennials “are emerging as the most health-conscious generation”.
Progressive Grocer reports millennials are “thinking about how their purchase may impact personal factors, societal concerns such as the local community or economy, worker and animal welfare, and global sustainability of the environment and the planet”. Another interesting statistic is 37% of this generation group “have tried a snack because of a social media post.”
Millennials have upped the snacking numbers to four or more times a day reports Mintel, and “94% of Americans are snacking at least once per day”.
Forbes suggests “brands will only find success if they first understand the cultural trends shaping millennial snack occasions today.”
With my client's desire to add social media marketing and their short list of ingredients in their pita chips, I decided millennials should be a major focus of the site re-design. Diving into their snacking habits could prove quite advantageous.
The Competition
Researching the competition, I compared five direct competitors and three indirect. I found the commonalities and what was missing in the market.
Market Positioning Chart
After evaluating the competition, I discovered the feature gaps and identified my blue ocean.
To set our brand apart from its competitors, I felt we could feature Issa’s authenticity and Lebanese heritage and offer recipes to pair with the chips.
User Research
What drives snack buying habits are familiarity, convenience, and how the snack tastes. My initial research indicated that millennials would favor companies that were socially and environmentally conscious. These proved to not be the case with consumers I interviewed. While that might enhance the purchase, it would not be a determining factor.
Instagram however, as research indicated does factor into millennials’ snack-buying habits.
Qualitative Data
“It’s sometimes it’s not even like their review of the product. Sometimes it’s just like, if the product just looks out of this world,”
“Ideally I wouldn’t want to have any preservatives and it’d be all natural”
“I used to think of snacks as detrimental to your health, now I think how can I add nutritional value to my day…how can I feel better about it”
“I like a versatile snack like Snyder’s”
“I’m a creature of habit. If I bought it before and it was good, I’ll buy it again.”
Define
Compiling data from my eight interviews, I organized it into an affinity map noting trends, pains, gains, and user habits when it comes to snacking. I was so moved by the origins of Issa’s Pita Chips, I assumed this would be important to consumers as well. I quickly found out that as interesting as a story might be, it is likely not a great motivator to purchase snacks.
User Persona
After processing all the data from my users, I was able to put a face to my user type. Health-Conscious Hillary captured the user’s mental model and help me focus my work on the user.
Journey Map
Focusing on my persona, I was able to sense what the user would experience when navigating the current website.
The user journey for Hillary takes her from seeing Issa’s Pita Chips on Instagram, going on the website, finding where they can buy them, going to the store, and giving up when they are unable to locate the chips.
The opportunities I found are:
- More engaging website
- Make sure customers can find the stores that sell Issa’s pita chips
- Making sure customers know where to find the chips
- Providing a delicious alternative to other chips in the store
Taking a good look at the user’s journey, I was ready to define the problems.
Three Problem Statements and How Might We’s
Develop
Ideation
Since I did this project solo, I invited five classmates to help with brainstorming. Some noteworthy ideas from the session were recipes, contests, reviews, and store locator.
MoSCoW Method
After filtering the ideas through the MoSCoW Method, I identified my Must-Haves. Store locator, recipes, social media contest, detailed product descriptions all made the cut.
Jobs To Be Done & MVP
When our health-conscious user is struggling to find the stores that sell Issa’s Flame Baked Pita Chips, is not feeling super-engaged with the website, and thinks pita chips are hard and bland, we can create…
A branded website that will provide customers the opportunity to learn about our story, our products, and where to find us. The website will increase brand visibility and consumer engagement via recipes and social media contests.
Deliver
Low-Fi Prototypes
Moving into prototyping, I started with InVision sketches that aligned with my minimum viable option (MVP).
Usability Testing
Quantitative:
- Five Testers
- Usability Score 82
- Misclick Rate 35%
- Average Duration 5.1s
- Bounce Rate 0%
Qualitative:
- Easy, straightforward
- It was a little blurry
- Confusion with two menus
Mid-Fi Prototype
With the insights gained for the usability tests, I was able to create a mid-fi prototype that was easier to understand.
Usability Testing
Quantitative:
- Five Testers
- Usability Score 49
- Misclick Rate 33%
- Average Duration 7.6s
- Bounce Rate 0%
Qualitative:
- Very easy
- Confused on the product page
- Nice design
Visual Competitive Analysis
Before creating high-fi prototypes, I reviewed the competition. I examined how their sites were structured, colors, fonts, and general appeal. I used CSS Peeper to pinpoint fonts and color palettes.
Brand Attributes
From stakeholder interviews, I came up with four brand attributes that would guide the final designs. These included Authentic, Family, Sharing, and Communal.
Moodboard, Style Tile, & Atomic Design Inventory
I created a moodboard that embodied the brand attributes. And, a style tile to further define the design direction. The atomic inventory contains the elements that were used throughout the design. This provides a more efficient way to design while keeping consistency throughout the site.
High-Fi Prototype
At last, it was time to create the high-fi prototype. After several iterations, I completed the final design.
Mobile Design
Success Metrics
- Increase In Pita Chips Sales
- Increase In Web Traffic
- Low Bounce Rate
Failure Metrics
- Web Traffic Remains The Same
- High Bounce Rate
- No Increase In Sales
Key Learning
- Time-Box yourself to work efficiently
- Don’t fall in love with your first design
- Conventional naming in prototype design makes for a smoother handoff to web developers
Next Steps
- Test High-Fi Prototype
- Follow-Up with Stakeholders
- Professional photos for the site
Thank You
Thank you for taking the time to read my case study. Feedback is always appreciated. Connect with me on LinkedIn- Lou Beaird
