Date: October 2019
Client: Harbs, a NYC local cake restaurant
Role: UX/UI Designer
Deliverables: Website Prototype, Branding
The Challenge
Launch a new website
for locals in NYC
Harbs is a handcrafted boutique in Manhattan. The business focuses on pursuing freshness and hand-made quality above all, which has contributed to its growing popularity since opening on the Upper East Side. NYC 2014 and recently opened their massive boutique bakery in Soho. Harbs wants to update their current branding and launch a fresh website that reflects experiences at boutiques to the digital presence.
The Objectives
To redesign a responsive website for locals who live in Manhattan
To develop Harb’s branding that is cohesive with its current brand direction
Market Research
I first looked at any online information about Harbs and its business direction. The cafe not only values hand-crafted cakes, but it also prioritizes the overall dining experience. One of the major reason for Harbs’s popularity is that the business wants to give customers unique dessert experiences to capture and share with brand. Designing a new website presents the perfect opportunity to share these ideals to potential customers before their visit. The research also shows how Manhattan is highly saturated with restaurants, but people still are seeking for the best dining experiences, which means an online present is even more crucial for competing against other dining businesses.
Competitive Analysis
Since the competition is so high, it was important to evaluate how Harbs compares to its competitors. Therefore, I identified direct competitors and indirect competitors that target a similar audience to Harbs and analyzed them based on their online information. The comparison allowed me to better understand customers expectations and how Harbs can position itself against competing businesses. Overall, Harbs seemed to be doing all the rights in gaining popularity among locals and providing exciting dessert experiences for customers, but a stronger online presence with effective order process would boost overall revenue for the brand and could launch the business even further in terms of gaining more customers.
Interviews
To learn more about the customer experiences at Harbs, I conducted contextual inquiry interviews with 5 Harbs customers, 2 non-Harbs customers, 1 Harbs employee about their experiences at 3 different locations: Soho, Chelsea, Upper East Side. The interviews consisted of how they discover dessert places, their experiences at physical places and on websites, and the resources they’re using to get desserts. I also was able to interview a server at Soho location to gain insider’s insights and made observation about the people, food, and ambience. By the end, I was able to learn more about who Harbs customers are and how the business interacts with them.
Number of Participants: 8
Gender: 5 females / 3 males
Age: 22-39 yrs old
All Manhattan residents
Define User
After talking to Harbs and competitors’ customers, I constructed a post-it pattern by organizing the data points from each interview participant into group. I was able to identify the user needs based off of the most frequent patterns within the user data. Next, I created Eugene and Kim to represent the findings synthesized from the post-its empathy map. Eugene is Harb’s target customer for Soho and Chelsea locations; Kim is Harb’s target customer for UES location. By giving context and personality to the research data, we can better empathize with Harb’s target user throughout the design process. Then, I created two empathy maps for Eugene and Kim with truly empathizing them. This helps me to synchronize with their doing, seeing, hearing, thinking, feeling, pains and gains. Feel free to view a Kim’s persona, Eugene’s empathy map and Kim’s empathy map.
Project Goals
After defining target users, I identified a clear view of the business goals to discover the common goals. This helps me to make the best decision to determine the full tangible lists of product which a new Harbs website should have. I chose features based on feasibility, how many people the features would impact, and how much impact the feature had on each person. Feel free to view a product roadmap.
Sitemap
Next, I created a sitemap in order to visualize how the information can be structured such that the user can intuitively navigate throughout the website. After researching other restaurant websites, I decided that a basic layout consisting of several pages would be most intuitive for users to navigate and would satisfy the user needs we identified.
User Flow
To analyze the flow throughout the website, I mapped out a user flow that were based on common scenarios I found from the research phase. Examining the sequence of user actions for each scenario showed the relationships between screens, which gave me a better understanding about how to craft intuitive experiences through the UI. Feel free to view at large scale.
Sketch
For designing the UI, I started out with rough sketches of the pages. Then I began to build a sketch wireframe to understand a whole process at a quick speed. I was able to quickly captures the layouts of all pages and understand clearly which pages I need to build. During this process, I referred to examples of restaurant websites and studied existing design patterns that make for a more intuitive user experience.
Wireframe
I then created mid-fidelity wireframes in Sketch, including desktop, tablet, and mobile versions for each page. This helped me focus on main layout and visual hierarchy of the website across responsive screens.
Branding
Once I understood all pages clearly, I began to create a new brand to make sure the branding is cohesive and agrees with Harbs’s existing branding efforts. After gathering inspiration in a mood board, I recreated a brand logo and introduce new logo signified it’s first location in NYC, the Upper East Side. To value its current brand identity, I also wanted to focus on its brand identity modern, fresh, and craftsmanship. For logo development, I inspired by the first flagship store at Chelsea as a symbol and logo as emphasize the brand identity. Feel free to view the logo development.
High-Fidelity
Wireframe
Finally, I applied the branding and styling to the wireframes in Sketch and made an updated prototype. The prototype showcases the polished look and feel of the website, which helps convey the design to stakeholders, design team, engineers, and PM. Feel free to view the desktop prototype in InVision using the button below.
UI Kit
While prototyping, I gathered a UI kit to document UI elements, illustrations, and patterns for future reference.
Affinity Map
Based on the usability test, I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. This allowed me to better understand the usability of the current design. In the end, the synthesized data indicated no changes were needed for the current design.
Reflection
Overall, this project was relatively straightforward because the website was mostly information and targeted a broad audience. Some of the main takeaways were improving my skills in responsive web design and developing branding with well-defined audience expectations. Moving forward, I’d want to share my designs with developers and see how we could implement the website.
Next Step
- Work with developers to launch the website
- Iterate a prototype to gain usability feedback
- Continue organizing design deliverables for handoff