Role: UX Designer & Researcher Tool: Figma

An’s Dry Cleaning Redesign

Scroll

 

My team and I worked on a website redesign for An’s Dry Cleaning, a well-known gelato shop in San Diego. We focused on making their website more accessible to their customers and highlight their gelato process. The owners of An’s Dry Cleaning also wanted to retain the vintage feel of their website, which we incorporated into our thought process. Additionally, we focused on making their mobile website more user-friendly.

 

Play with our interactive Figma redesigns below:

 

1. Client Survey

Screen Shot 2021-02-22 at 3.00.07 PM.png
Screen Shot 2021-02-22 at 3.01.49 PM.png

We conducted an interview with Kris Warren and Travis Bailey, two of the four owners of An’s Dry Cleaning. Through this interview, we wanted to get to know their brand as well as their customers. We also wanted to familiarize ourselves with ideas about their ideal website and features of their current website that they wanted to keep. Some of the questions we asked were:

  • What are some frustrations users run into on your website?

  • How has your advertisement or marketing been? What are your methods of promoting?

  • What makes An’s Dry Cleaning unique and stand out among other gelato places that customers choose to go to An’s Dry Cleaning instead of other places?

  • When customers walk into your store, what are some first impressions or experiences they have? What kind of atmosphere does An’s Dry Cleaning have?

After the interview, my team and I examined our notes and recording of the interview. We analyzed what Kris and Travis had told us and how their answers would affect how we redesigned their website. We also put together a priority list of the things that we felt were a priority to An’s Dry Cleaning. Throughout this redesign, we continuously refer back to this priority list to ensure that we are exceeding their goals and needs. Our notes and analysis of the interview and the priority list can be accessed below.


2. User Research

 

To do our user research, we conducted many user interviews based on the customer groups that An’s Dry Cleaning attracts. From our user interviews, we created three personas based on the groups that we observed. After we specified our personas, we created 6 user scenarios, describing various scenarios where each persona could be in, and 30 use cases, specifying individual scenes that could happen within each user scenario. Finally, we made a feature and functionality table that included potential features of the website that determines which of the personas would most benefit from. Our user research in detail is accessible below.

 

3. Competitive Analysis & Moodboard

 

For our competitive analysis, we selected several ice cream competitors that range from local businesses to big companies of different styles to get a feel of how ice cream businesses display their products and convey their appeal.

 
COMPETITORS.jpg
  • Afters: An ice cream chain with a trendy and sleek brand.  

  • Bobboi: A San Diego organic gelato business with a friendly brand.

  • Pappalecco: A classic Italian business in San Diego that serves gelato.

  • Ben & Jerry’s: A big ice cream business that does not sell by scoops and thrives on quirky flavors and playful branding. 

  • Salt & Straw: An ice cream business with unique flavors and a vintage yet modern brand.

Throughout our competitive analysis on ice cream/gelato shop websites, we were able to deduce that all of them have their unique senses of identity. They all have their distinct visual features or components that enable them to stand out among other similar websites, which we believe will be critical for An’s Dry Cleaning. Another important similarity we noticed was the fact that a lot of them included aesthetic photos of not just their products, but also their shops, customers, real-time work hours, etc. With these identified components that successfully enable the competitors to stand out, we believe An’s Dry Cleaning can adopt similar approaches to make them popular and noticeable.

Screen Shot 2021-02-22 at 3.50.00 PM.png
 
ADC_Mood_board.jpg

After our competitive analysis, we got a better sense of how we should redesign An’s Dry Cleaning’s website. We created the moodboard above, which incorporates the vintage aesthetic as well as the light and airy color scheme.

 

4. Creative Brief + Low Resolution Sketch

 

The creative brief that we created highlights the summary of content for the website, the estimate of total program size, the audience, the objectives, the personality and tone, key target audience insight, anticipated problems, and a low-resolution sketch of the mobile redesign. The full creative brief can be accessed below.

 
 

 

Summary of Content:

 
  • Homepage

    • COVID-19 Updates

    • Today’s Flavors

    • Buy Pints

    • Buy eGiftcards

    • Email Subscription List

    • Instagram Grid

  • About page

    • Our History

    • Our Process

    • Collaborations

  • Fabrics page

    • Crowd Favorite Poll

  • Press(ed)

  • Find Us

 
 

 

 

Client’s Objective:

The goal of An’s Dry Cleaning’s business is to sell high-grade gelato with engaging and excellent service. The owners focus more on the customer experience rather than revenue. Thus, the client’s objectives include creating a website that has straightforward access to product and store information, education on their history, gelato-making process and accomplishments, and a fun yet nostalgic experience.

Audience’s Objective:

As a visitor of the site, the primary goal is to figure out if they are interested in purchasing from this business. Due to current COVID-19 conditions, they need to know if the business is currently operating with store hours and purchasing options. With alternating flavors, both returning and new customers would need to know what flavors or products are currently available. With unique flavor names (i.e flavors named after fabrics), they will also want to know descriptions of the products. After they decide whether they are intrigued with the available products, they will either want to go to the location or order delivery of a pint. New customers that are unfamiliar with the brand may want to learn more about the local business such as the history, values, and process of gelato-making.

 

 

Low-Resolution Sketch of Redesign

 
 
 

5. Wireframe + Functional Specification

 

For the rough wireframe, we created both the mobile and the desktop wireframe prototypes on Figma. We took our previous ideas and applied them to our lo-fi prototypes. The full creative brief can be accessed below.

 
 

 

Site Architecture

 
 
 

 

Lo-Fi Wireframes for Mobile & Desktop Website

 

The main focus of our Lo-Fi Wireframes is to visualize the content of the redesign. Additionally, I wanted the mobile website and desktop website to reflect each other. Because the desktop design is bigger, I utilized the white space to my advantage so the minimalistic branding is still present.

 

Mobile Wireframe

Desktop Wireframe

 

 
 

Functional Specification:

 

We started our functional specification by going over the navigation bar and menu of both the mobile and the desktop websites. We then made our way through the Homepage, the About page and its specific subpages, the Fabrics (flavors) page, the Press (ed) page, and the Find Us page Finally, we finished at the 404 error page. Below, I have included the first few functional specifications. The full functional specifications are accessible from the button below.

Mobile: Navigation Bar & Menu

Mobile: Navigation Bar & Menu

Screen Shot 2021-02-22 at 5.58.41 PM.png
Mobile: Home Page

Mobile: Home Page

 
Desktop: Navigation Bar & Menu

Desktop: Navigation Bar & Menu

Desktop: Home Page

Desktop: Home Page

 

 
 

User Testing:

After conducting a single user test on both the mobile and desktop website, it seems that the navigation is straightforward enough so that the user did not have many stumbles while performing the given tasks.

The main issue that the user had was with looking through the flavors; when browsing, the lack of short ingredient description and having to click/tap on a flavor to read the details was tedious. Because it was one user test of both platforms done on a single person, a critical limitation we noticed was he already got used to or knew about the content after interacting with one. We’d have to do further testing to find out how the general public will experience and feel with our platform. We did not anticipate this so doing the user test early on gives us enough time to make changes and try different approaches.

 

6. Final Prototype

 

 

Final Prototype for Mobile Website

Final Prototype for Desktop Website