Turkish cafe website
Transform a small local businesses website for desktop and mobile web for a seamless viewing experience.
Transform a small local businesses website for desktop and mobile web for a seamless viewing experience.
Self-directed with feedback from mentors and peers
Borek G's current website doesn't translate the customer experience they value.
User's struggle to find a clear indication of what the business provides.
Improving the informational architecture and hierarchy benefits the overall understanding and values of Borek G.
Client Interview
Competitive Analysis
User Interviews
Persona
Brainstorm
Card Sort
Sitemap
Low Fidelity Wireframes
Moodboard
UI Components
High Fidelity Wireframes
Findings
Iterations
"You're not really a customer in my store, you're more like a guest at my house. You'll see relatives walking around, like a cousin, mother, or brother." — Client
"The hardest part for me is to inform people but not over inform people that it's a whole cluster on the website. My main goal is efficiency." — Client
"I don't get a lot of online orders, I have a lot of phone orders. They'll use the website and they call the phone, but they can always go here [website] and view my order online menu." — Client
Restructure the information architecture to minimize the user error and strengthen the user path that correlates with the business wants and needs.
There are three businesses that are direct competitors to Borek G, one of which is a large corporation (DoorDash) and two of which are competing local businesses in the area (Rare Bird Coffee and Thompson Italian). Each has their own strengths, weaknesses, and opportunities for improvements that we can take into consideration for Borek G’s redesigning of their website.
Improving the hierarchy that keeps the user on the website by showcasing what the business provides and what makes it unique.
I interviewed 5 participants between the ages of 22-26 who enjoy trying new cafe's and restaurants. The interview focused on their experiences as well as their first impressions of Borek G's current website. With that, I was able to gauge what they're looking for and what areas stood out to them for Borek G.
Most users agreed that visuals was the first component that influenced if they would visit. When viewing Borek G’s website, they were left unclear on what they provide.
Users unanimously referenced using other platforms such as Yelp, Google Reviews, and Tiktok to gauge whether they provide what they're interested in.
Most users first impressions of the current website left them feeling like there was a lot of information that conflicted with what the business primarily provides.
Based on the user interviews, I'm able to create a distinct persona that capture their needs and pain points that will help guide me to appropriate potential solutions.
Due to the limited scope of my user interviews that were conducted within the available time frame, the persona represents only a portion of the demographic and does not represent the whole target demographic of Borek G. That being the case, the solutions and findings are catered to a specific demographic, but can be iterated on in the future to a larger demographic for further development where needed.
Diving into what my users prioritized and struggle with when looking into trying a new cafe and interacting with Borek G's current website, I'm able to come up with solutions that integrate their expectations as well as align with my clients needs and wants.
Although I came up with solutions to make users feel encouraged visit Borek G, I must also prioritize my clients needs of condensing the information presented on the website. Therefore, I will conduct further research into the sitemap.
I conducted an unmoderated hybrid card sort with 6 participants which will provide the best approach to creating a comprehensive sitemap based on how users categorize key words. I chose to use 7 predetermined categories to sort into with the ability to create their own as well. The categories were chosen based on common categories from the competitive analysis as well as the preexisting categories on Borek G's current website.
We're able to see which areas we should target in terms of challenges and agreements. With challenges, we can make sure to iterate on what was least agreed upon which was 'cafe.' With the agreements, we can see the highest choices per category that indicate what user most expect in each section. That being said, we can move on to building our sitemap with these in mind.
Per the card sort findings, I prioritized what users most agreed to per category to navigate where the other cards will be placed as well as renaming the 'cafe' category to 'dine in' to clarify what information will be found in that section of the navigation. With that, I'm able to create a comprehensive sitemap that caters to what users expect to find in each category.
I'm not feeling confident about the name of the categories I've chosen, although they're rooted in the research I've conducted, it still doesn't feel right to me. I'll need to verify if my choices were accurate to what users expect during the testing process.
After conducting the card sort, users were asked to rank the listed categories from 1 (most important) to 7 (least important). The results help gauge which sections are the highest priority to design.
100% of users indicated that 'Home' was the most important category, therefore, I prioritized designing the Homepage first while implementing the solutions from the brainstorming process.
50% of users indicated that the 'Cafe' is the next level of importance after 'Home,' however, since renaming the 'Cafe' to 'Dine In' I'll be designing both the both the 'Dine In' and 'Order Take Out' screens similarly as a way to test what users expect and feel about the renaming.
50% of users indicated that the 'Visit Us' was also the next level of importance after 'Home.' Users also unanimously indicated that they only expect the 'Location & Hours' in that section making this the most straightforward screen to design.
One of the most unique aspects of Borek G is their continuous commitment to their Farmer's Market, that got them their start on their business. Therefore, I found it important to also design this section as a way to maintain user interest as well as showcase a equally significant part of what Borek G special.
Considering the constraints of the hosting platform that Borek G uses, some features such as filtering and hovering may not be feasible. I will keep this in mind for the future when implementing the final product.
In order to align the design with the brand values, I explored key phrases that are significant to the brand and images that evoke the similar sentiment in order to implement what color style would work best on the website.
Since Borek G is a Turkish business, I wanted to make sure that the warm tones were honored, specifically the red color as a representation of the country's flag. However, red is a difficult color to work with especially with the stark contrast on a white background that is being used on the current website. To use the color in harmony, I used a warmer background as well as implementing accents of orange.
The redesign of Borek G’s website consisted of prioritizing the informational architecture and visual hierarchy so that user’s will be able to find the information they’re looking for with minimal error while also sharing the brands core values. In order to assess if those areas are functioning with its intended purpose and if there are areas that need further iterations, I gathered quantitative and qualitative data from 7 users who are unfamiliar with Borek G’s current website.
5/7 users were unable to find the drinks & dessert menu based on my assumption, instead most users believed that the menu would be under 'order take out.' Although the 'order take out' section has the ability to view the drinks & dessert menu, it's clear that having both leads to confusion.
“Is there a difference between a takeout menu and a dining menu? Like how come that's been separated?” — Interview Participant
In order for users to distinguish the menu items from the take out menu, “Order Take Out” is now a CTA button on the navigation and “Dine In” is renamed to “Menu.”
In order to better tell the story of the brands core values during the user journey, the order of the navigation has shifted as well.
4/7 users indicated that they were confused on various parts of the Farmer's Market section. User's were unfamiliar with what the purpose of having a Farmer's Market section on their website would be for before and after clicking on the section.
“I feel like besides the address I wouldn't know what to expect in there” — Interview Participant
“Would [learn more button] be learning more about the farmers market?” — Interview Participant
“So the Farmers Market is from Saturday 9am to 12pm then orders are going from Saturday 2pm until Friday 10pm. I think that’s not super clear to me.” — Interview Participant
In order to minimize user error finding the information they're looking for, the drop down menu options is only available on two navigation items that were the most unclear.
For users to get a better understanding on what the Farmer’s Market section is for, the “Order Ahead Menu” is removed and the page is remade into the “About” category where users can find the ordering process and what to expect for the farmer's market.
In order for users to stay interested on the website and what Borek G has to offer, the 'Learn More' button will be replaced to the 'Order Ahead' so that once users understand the process they can go into ordering.
3/7 users weren't clear on why the filter button was the same as the CTA button.
“If they look the same, I'm expecting them to have the same functionality. These look like they might take us somewhere rather than filtering out different lunch items.” — Interview Participant
In order for users to understand the functionality of the buttons, the style is changed based on their main function and the hierarchy.
I knew early on that developing the informational architecture was going to be my biggest challenge with this project. Even with a small participant pool, I felt that the findings were not concrete enough to reassure my decisions. I was constantly asking peers and my mentor for their feedback which ultimately garnered more uncertainty. It wasn't until I conducted my second round of testing that I felt secure moving forward. So I learned that the only way to improve and feel confident in my choices is to be constantly conducting research because it will be enough to speak for itself.
Since this project was designed with freedom and flexibility, I will be presenting the final results with my client and receive their feedback. Afterwards I will:
Iterate based on my clients feedback and conduct another usability test to confirm if my iterations are successful and understand what areas need further development.
Do users understand what Borek G provides?
Can users find the information they're looking for?
Implement design.
Are there constraints on the hosting platform that don't allow the design choices?
How will we quantify the success and error metrics?