DAPPERTUTTO

FOCUS:

UX/UI Design, Branding
Team:
Solo project
Tools used:
Figma, Photoshop

Dappertutto is an online dog clothing store. Not just any clothing store, it’s for people who refuse to go anywhere without their dogs: work, a bike ride, beach, camping, airplane, etc, etc. If the dog can’t come, we are not going. It has urban / high fashion vibe, and focuses on style for both dogs and their parents.

GOAL:

  • Create an appealing site that attracts new customers, and has a friendly, yet sophisticated vibe
  • Communicate that this business does not only sell clothing and accessories, but is heavily involved with communities, in charity work, supports animal shelters.

PROBLEM STATEMENT:

  • Identifying the target audience, and what problems they would face as potential users. How can I identify a user for a business that doesn't exist?
  • There is a number of other pet clothing stores. How is this one different? What does it offer that others don’t?
RESEARCH
IDEATION
TESTING
SOLUTION

1

RESEARCH

My first step was to find existing services that provide similar products. I spent some time researching various pet clothing store brands, from large chain stores to small boutiqies, figuring out what already exists on the market, and what is missing; who the target audience should be for this business.

COMPETITIVE ANALYSIS, 1:1 INTERVIEWS

USER RESEARCH

I found 5 different dog owners from various backgrounds and locations, and conducted 30 minute 1:1 interviews to gain some insight on why people shop for dog clothing, what they are happy with, and what is missing: a 45 y.o. publishing CEO from Brooklyn, a poet from Califoronia, a nurse from Brooklyn, a photographer from UK, and a sociology professor from PA.

Key Insights:

Based on my conversations, I uncovered the below:

One person said:

“If the dog can’t come, we are not going.”

I decided this would be the main angle for this business, and people who feel that way will be the target audience.

2

IDEATION

PERSONA DEVELOPMENT, USER JOURNEY, SITE MAP, WIREFRAMING, AND PURCHASE FLOW

Two personas were created based on uswer research. This would help me put a face to who I was designing for and their core needs and frustrations.

USER JOURNEY

User journey was created to begin thinking about how my users would interact with the product.

SITE MAP

WIREFRAMES

PURCHASE FLOW

BRANDING

I created a logo and that reflects high end quality and a fun, quorky nature of the brand, and followed with UI guidelines.

LOGO

This logo is a universal signature we use across all our communications. We want it to be instantly recognizable, so consistency is important—please don’t edit, change, distort, recolor, or reconfigure it.

Replace black with white if used on a dark background.
Use this circle version of the logo if the space doesn’t allow for a ractangular shape.

TYPOGRAPHY

ROBOTO SLAB

WEIGHTS:

Black
Bold
Medium
Regular
Light
Thin
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading

Montserrat

WEIGHTS:

Black
Extrabold
Bold
Semibold
Medium
Regular
Light
Extralight
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."


COLOR PALETTE

HEX FF0099
HEX 9DA6AB
HEX FF8D8D
HEX BEDBE5

PHOTOGRAPHY

Product Photos
Blog Photos

GUI ELEMENTS

primary buttons
secondary buttons
forms

3

PROTOTYPE AND USABILITY TEST

After building the high fidelity mock-ups using the UI kit and style guide, a prototype was developed in Figma for conducting a usability test for the given user flows. Usability tests were facilitated with five participants using Figma Prototype.

GOALS

1) Test if the user can use check-out flow easily and intuitively

2) See if the way categories are organized works well for finding and buying a product

3) Test how the user feels about overall look and feel of the site

4) Identify any other potential issues

Desktop

    Mobile

      TESTING TAKEAWAYS

      REITERATIONS

      Using the information I gathered from the usability test, I realized that the category system is confusing to the user, and making it more intuitive is the main priority. I added an additional purchase flow with a main menu as starting point, added Shop All page, and added description to each product.

      Revised home page with new flow for finding a product
      New Shop All page with added product descriptions

      LEARNINGS AND TAKEAWAYS

      NEXT OBJECTIVES

      The next step is rolling out a framework for designing screens and flows for the Blog section, Our Story, and Searching.

      For the upcoming project I will need to: