KRIZTILLE
UX DESIGNER
MB_011-transparent.png

TLONYC

 
MB_011-sq.jpg
 
 

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. 

 
 
 

The Process

 
 
designprocess-01.png
 
 

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.

 

RESEARCH

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.

 

DEFINING

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. 

DL_Capstone1_TLONYC_EmpathyMap.jpg

The insights gathered from our research and user interviews help form our persona. Lisa will represent TLONYC's ideal target user.

 

IDEATE

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?


STRATEGY

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. 

DL_Capstone1_TLONYC_sitemap.png

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.


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. 

DESKTOP

 
 

TABLET

TABLET.jpg

MOBILE

MOBILE.jpg
 
 
 

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. 

VIEW PROTOTYPE

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. 

Primary Tasks:

  1. From the homepage, explore the website to learn more about the company and browse the menu.

  2. 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.

 
 
 

ITERATE

Tools: High-Fidelity Wireframes, Updated Prototype, UI Kit

HIGH-FIDELITY WIREFRAMES

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.

DESKTOP

 
 
 

TABLET

 
 
 

MOBILE

 
 
 

UPDATED PROTOTYPE

A prototype out of the high-fidelity wireframes was created to provide more opportunities for usability testing.

VIEW PROTOTYPE

 
 
 

UI KIT

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.

VIEW UI KIT

ipadMockup-3.jpg
 
 
 

NEXT STEPS

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.