Shirini Bakery
Creating a responsive website for a local Atlanta bakery
Overview
Shirini Bakery is a sister - owned and run dessert shop, operating from a community culinary kitchen located in Northeast Atlanta. Nela and Zara craft gourmet macarons from an Iranian family recipe. They already have an online presence on Google and Yelp as well as their own site but would like to elevate their responsive site that can attract a new set of loyal customers. They are looking for a responsive website to help increase their online presence and stay competitive with other stores located in the southeast and hope to build more revenue nationwide.
How might we increase Shirini's reach to its customers with a better online presence?
Solutions
• Creating a responsive website with necessary features
• Finding what customers value so we can continue to be able to build loyalty but still excite
What Did I do…
UX / UI Designing. Research.
Scope
Responsive Website. Visual Design. Branding
How long did this take…
4 Weeks (20 hours per week)
Tools
Figma. Pen & Paper. Adobe Illustrator
Consider the human needs
(Empathize)
I want to perform a cohesive research plan in figuring out how to gather information by outlining the research goals and methods to stay on track during this phase. I wanted to understand how people discover local dessert shops. I started with market research, so that I would gain a solid understanding of the industry at large. This research also identified Shirini’s competitors and narrowed down the demographic that I should be interviewing.
Here are a few trends I saw through my research
• Dessert consumption is on the rise: two-fifths of consumers (40 percent), up from 36 percent in 2010, report that they're eating desserts after a meal at least twice a week
• Oats have certainly taken on a decadent makeover this year. Veganuary vibes, oats are gluten-free, sustainable and a locally-grown cereal.
• The global gluten-free dessert and ice-cream market is growing at a Compound Annual Growth Rate of 6.2% during the forecast period (2019-2024)
• Gen Xers and millennials are more adventurous when it comes to trying new desserts.
• The pandemic seems to have increased people’s awareness for the need of nourishing foods.
Empathy Map (Insight and Needs)
The data I have collected from my participants interviews to then create one personas. I referred back to my notes and interviewees answers from the empathy research and then grouped the commonalities I saw from the interviews, which gave me my insight and needs. View extended Empathy Map.
Insight
Most people start with a Google search before going to Yelp or looking at other reviews
Needs
To be able to experiment a little
Competitive Analysis for Shirini
To determine the strengths and weaknesses of the competitors within research market. I looked at stores that interviewees have enjoyed purchasing from. View extended Competitive Analysis
Most of Shirini’s competitors struggle with information architecture—the enough content isn’t provided.
Create User Personas
To create a reliable and realistic representations of my key audience for reference by addressing the major needs, goals, frustration and motivation. I used a little bit of the answers from my participant research to create "Levy" and a bit from research debrief. View extended User Personas
Define the problem
(Define)
Following the methodologies of market research to get feedback on current consumers of Shirini and observe how people discover non-traditional desserts along with competitor analysis, to evaluate current competitors strength and weakness and how Shirini can plan to stay within the radar. After this I planned to do Virtual Contextual Inquiry through Skype and or Google Hangouts with participants by asking questions to hopefully fill in gaps of my observation.
To define the problem, I crafted point-of-view Statements and “how might we” questions to have clear, actionable problem statements.
Once the POVs were established, I was able to pose hypothetical scenarios for how I might solve each one.
Business and User goals
To align user goals and understand, how they can work with business goals to keep it in mind moving forward. In a real-world setting, to always take technical considerations into account. I still wasn't able to get a hold of the business even after making multiple calls and sending e-mails so I went through their Instagram, and anything I could find that a general local bakery is trying to do and promote.
Product Roadmap
To develop key elements that should be included in my product’s design and to know as a UX designer on the team, that I can help with suggestions and ideas from my user research. I referenced the example given then sorted out what are the features that I need or wanted to have based on my competitive analysis, and project brief listed them as shown. View Product Roadmap
Leading to an excellent solution
(Ideate)
I have to now decide how to arrange the parts of my research that I have found into something that will be understandable for Levy.
Sitemap
To show the relationship, visualize the hierarchy and content layout of the website. I created the sitemap with pen and paper first then factored in my personas need based on the product roadmap
Task Flow
To understand the flow of the website based on the personas goals. I referred back to my phase 1 task flow and applied my persona's goal and UI Requirement and made them into 2 tasks that could be map out. I tried to include most of the pages & actions that users would have possibly done to complete their tasks. View the complete Task Flow
User flow based on Task Flow
To understand the steps by step and possible reactions the user may have moving through a product to accomplish their goals. Outlining most possibilities, errors and outcomes. I referenced my user flow from Phase 1 and applied my task flow and processed the steps a user might go through, I double checked competitor websites to make sure similar tasks are met. View User Flow
Low Fidelity Wireframe Sketches
To visualize and plan the layout of key pages and elements before digital phase. I followed my User Flow and sketched key pages while referencing my competitor sites. View more sketches.
Creating innovative solutions
(Prototype)
My favorite that I look forward to every project. Prototyping. I sketched a lot of ideas this project because I like a little of everything from the sites that I was referencing. (I know realistically that won’t happen) At this point, I began laying down the literal blocks of Shirini’s site, before I start testing prior to going into high fidelity or launching. Just so that real users will go through the flow and edit out any kinks that I have.
Mid-Fidelity Wireframes
To create a version of components, and features are clearly differentiated from each other on different 'viewports' - mobile, and device and a responsive design is one that gracefully displays on many viewports. I changed my site reference continued to reference my mentors suggested column and gutter for desktop, tablet, and mobile, then resizing and reorganizing the elements to the different viewpoints. View Mid - fidelty Wireframes
TASK 1
Scroll through Shirini, explore their product and check out what they do for dairy - free substitue desserts.
TASK 2
Finding the next outdoor event Shirini booth will be at
TASK 3
Find your nearest Target that has Shirini products
By moving forward, I’ve taken into consideration the results from my usability testing and revised the following as far as feedback from my stakeholder goes
• Change the structure of my homepage to be cleaner, less chaotic.
Affinity Map
To reflect document test findings and uncover insights, prioritize, and rank the user testing feedback to make improvements for design recommendations. I went through my Usability Test Findings and grouped them based on common themes to discover patterns. View Map
Brand Logo and Style Tile
To have a general idea of the aesthetics of the brand. I referred back to my mood board on Pinterest. For the logo, I sketched out some ideas based on my pulls and determined the one would be best as for the brand, the typography, I picked out the font based on my mood board and googled the best pairing for it. View Pinterest board
Tested, then refined, then tested again
(Test)
After testing I went back to refining the high- fidelity, so that the product is functional without my assistance to the user. Testing different aspects of user experience will help to determine the best way for a website and its elements to interact with its audience.
High-fidelity Wireframes
I did my high fidelity wireframes to apply the brand onto the wireframes and see what the product would look like on different screen sizes. I did this by applying the elements from the UI Kit onto the mid-fidelity wireframes.
What I Learned from this Project
This project was a learning process of starting to get the ball rolling with re-designing a responsive site for an amazing local, woman run business. It has made me want to look at other local business and see where they stand to get more recognition not only for their service but to keep up with the competition.
Trust taking the steps rather than running to the finish line
I am learning to take steps to solving the problem rather than coming up a quick solution. I believe getting behind the lens of my persona will help with this. After continuously exposing myself to the changes of really well designed site I will reiterate on my icons, hierarchy and colors on this project.
Feedback, the best thing I can ever do for my designs
This is still a work in progress of updating the icons to more modern line icons. Continue testing and making sure my prototype is functional.