The Little One NYC
Scope: Responsive Web Design 2018
Client: The Little One NYC
Role: UX Designer (Research, Visual Design, Interaction Design)
The Challenge: Design a responsive website for a local dessert cafe while maintaining coherent brand elements across all platforms.
The Result: Within a 2 week timeline (80 hours), The Little One NYC has an all-new responsive website with a focus on helping customers learn about the products they serve, get to know the owners, and find their location.
Throughout this project, I used a user-centered design approach to guide me to the best solution that satisfies both the client and the user needs.
Tools: Market Analysis, Competitive Analysis, Provisional Persona, 1:1 Interviews
I began my research with secondary research: market analysis and competitive analysis.
Using market analysis, I determined the size of the industry, the customer segment and buying patterns. A competitive analysis was then made to provide insight on where the client currently is placed in the industry, and to determine other competitors that may have similar offerings. This allowed me to create provisional personas which dictated our initial assumptions about what the target demographic may look like.
I followed up the secondary research with my primary research: contextual inquiry. Through 1:1 Interview, questions were conducted based on our findings from the secondary research.
I aimed to understand how the target users search for information about the cafe, and what desserts they were interested in — more importantly understand their key drives, motivations and preferences.
Tools: Empathy Map, Persona
An empathy map was created to gain a deeper understanding with our users. I looked for common themes and patterns that can be used to gain insights and identify our user's needs.
The insights gathered from our research and user interviews help form our persona. Lisa will represent TLONYC's ideal target user.
Tools: Point-of-View Statements, HMW Questions, Business, User and Shared Goal Diagram, Product Roadmap, Sitemap, User Flow, Task Flow, Low-Fidelity Wireframes, Mid-Fidelity Wireframes
To get a much more granular understanding of our problem, I used insights gained from our empathy map, and our persona's needs to guide my Point-of-View Statements and "How Might We" Questions.
The HMW Questions will jumpstart the brainstorming process with a focus on coming up with as many ideas for potential solutions.
For example: How might we help Lisa make a decision to visit the dessert shop?
By defining the project goals, I was able to map out the shared goals for both client and the customer. I also took some technical considerations into account when designing their website. This was to keep the overall goals of the website in mind moving forward.
A product roadmap was then created to identify and prioritize features based on their importance to the client and the customer.
CREATING THE FRAMEWORK
Before starting any design, I spent time making sense of how the information will be structured on the site. This involved site-mapping which showed a hierarchy of content, and how it will be grouped on the website.
A user flow and a task flow was used to show how our persona will interact with the site given a scenario. While a user flow shows a top level overview of the steps, a task flow is more detailed and granular.
Lisa arrives on The Little One homepage from any of the 3 areas of entry (Social Media, Google Search, or through ads). She wants to know more about the dessert shop and what they offer.
Using the User Flow, I created a UI Requirement document that detailed the specific elements that will be on the page. This gave the client and other stakeholders to weigh in before the requirements are implemented. The UI Requirement acted as a guide or checklist when building out the wireframes.
Using the user flow, I sketched a variety of low-fidelity wireframes for the desktop, showcasing the kind of content that will be used on each key screen. This allowed me to rapidly cycle through ideas and concepts before refining one solution.
A mid-fidelity wireframe was then created from the initial desktop sketches as well as the responsive screens for tablet and mobile. This showed a more refined iteration of the site's structure. These will be used later on the usability testing phase as a prototype.
Tools: Prototyping with Invision, Affinity Map, Moodboard, Style Tile
In preparation for the Usability Test, I created a working, limited prototype from the key frames in the user flow. The prototype, once tested will allow me to validate my design solutions.
I created a plan that defined the test objectives, goals, and procedures to be used during the usability test. The test was completed with 7 participants who were asked to go through the website prototype as a potential customer.
From the homepage, explore the website to learn more about the company and browse the menu.
From the homepage, locate information about how to visit the cafe
The usability test was conducted to observe and evaluate user interaction with the prototype, to identify current and potential pain points, and to determine the area of success or failure in navigation, layout, and design.
INSIGHTS + RECOMMENDATION
To interpret my notes and observations from the usability test, I arranged them into patterns and trends using an Affinity Map.
The Affinity Map revealed that there was equal recommendations related to visual design and layout. There was a focus to prioritize the menu first. The press link was the least priority, many participants said that it was not a page they would normally access. Recommendations specific to the menu page, a description about each dessert would be considered helpful to those who may not know what they are. Supplementary placement of social media icons were needed on other pages like the contact page to allow the user to have multiple places of access.
For the visual direction, I expanded The Little One's existing brand. I created a moodboard to reflect keywords that describe the brand and accompanying visual elements that go along with it.
A style tile was then created to show the application of the new brand direction for typography, color, iconography and imagery.
Tools: High-Fidelity Wireframes, Updated Prototype, UI Kit
With the design recommendations and new branding direction in mind, I developed the high-fidelity responsive wireframes. These showed how branding will be applied across all devices.
A prototype out of the high-fidelity wireframes was created to provide more opportunities for usability testing.
To ensure there's a consisted application of visual design across web platforms, I created a UI KIT that showed how elements on the website would be used given their context.
Given more time on the project, I would like to polish the visual design on the website like having a consistent art direction for the photographs used. I would also work along side the owners to develop the "Our Story" section, and the contact page to anticipate any future opportunities like catering and events.
Future rounds of usability testing and iteration will also be needed to ensure the layout, hierarchy, and flow are consistent.