Super Dyeing

A Responsive Website

Overview

Super Dyeing, a prominent dye house, is facing challenges with its existing website. The current website fails to showcase the high-quality work and comprehensive services the company offers, resulting in missed opportunities for lead generation and business growth. Additionally, some crucial pages on the website, such as the Services and Tracking Order, are non-functional, causing frustration among potential clients and hindering conversion rates.

Objectives

Design a responsive website

Role

UX Researcher
UX Designer
UI Designer

Tools

Figma

Timeline

9 weeks
(Nov 2022 - Feb 2023)

Problem

The lack of an informative and user-friendly website leads to a credibility gap, as potential clients find it challenging to evaluate the company's capabilities and expertise in the textile industry.

Solution

To remain competitive in an evolving market, Super Dyeing recognizes the need for a website redesign that emphasizes their strengths, establishes credibility, and optimizes lead generation efforts.

View Figma Prototype
PROJECT SCOPE

Capitalizing on services to attract new clients

Talking with the Business Executive of Super Dyeing helped solidify the goals of this website redesign. The existing website did not display what the company is capable of and what sets them apart from other local dye houses. Emphasizing on the unique selling points on the website can help attract new clients. The website needed a redesign to showcase the high-quality work Super Dyeing produces. There were other problems (order tracking and placing orders) that we could potentially tackle as well, but the CEO did not want to work out those problems at the moment. So the research goal was to gain a deep understanding of what potential clients look for when choosing a dye house to work with.

USER INTERVIEWS

Frustration with broken links and lack of information

User interviews validated our assumptions on what to update on the website. I got to talk to manufacturers and textile converters, and 100% mentioned that the broken links on the website was disappointing and discouraged them from exploring the website. However, they have heard good things about Super Dyeing from other clients, so those great reviews is what got them to put in orders with Super Dyeing. Some of the things manufacturers or converters look for in a dye house is if they can produce good quality products as well as deliver in a timely manner. Good quality can mean matching the shade, having good shrinkage and torque.

Broken Links

Many of the links on the existing webpage did not work. The only ones that did work was the Contact Us page, Dyelink page, and Map. That's only 3 out of the 6 different tabs you can click on the navigation bar, and two of pages do not even display proper information.
‍
‍

Missing Information

The only information displayed on the existing website is the contact form along with contact information. There is no other information about what services they offer.
‍
‍
‍


Word-of-Mouth Referrals

A lot of clients discovered Super Dyeing through referrals from other clients. The number of dye houses in the LA area is shrinking because many people are dyeing fabric overseas, so dye houses have been placing their websites on the back burner. This is an opportunity to showcase what Super Dyeing has to offer through their website.

COMPETITIVE ANALYSIS

Unique selling points and strong visual identity

When looking at other local dye house websites, it was not a surprise to find that there was a lack of information on the websites, since we learned that a lot of the local dye houses have not put much effort in maintaining their websites because the industry is shrinking and a lot of their clients come from referrals. However, this is an opportunity to take advantage of to gain new clients and continue the business.

I looked at four competitors and realized most competitors had a bit to work on. A lot of the websites did not have anything too fancy, but briefly went over the services provided. The information was quite limited though. Also, many of the dye houses took pride in how long they have been in the industry.

How might we redesign the website to effectively showcase Super Dyeing's quality work to drive lead generation?

PERSONAS

Manufacturers and Textile Converters

Since we are currently not focusing on solving any problems for existing clients, our target users are potential manufacturers and converters.

Click photo to enlarge

INFORMATION ARCHITECTURE

Simplifying the existing sitemap

It was best to simplify the current sitemap so we can get rid of the pages we do not currently need for this project.

We got rid of the Dye Link since we are not having users track orders on the website. Also, Map was placed under Contact Us.

LOW-FIDELITY SKETCHES

Sketching out each page

I sketched out a few different pages for the landing page, and I sketched the other pages as well.

MID-FIDELITY WIREFRAMES

Designing wireframes using our research

After going over the information architecture and research with Super Dyeing, I turned my low-fidelity sketches to mid-fidelity wireframes. I went over this with the Business Executive and made some changes when it came to the hi-fidelity prototype.

Landing Page

Services

About Us

Contact Us

UI LIBRARY

Using existing logo and selecting approachable colors and typography

The CEO wanted to use the existing logo as he is proud of what he created years ago. Then, I chose colors that were approachable and professional with typography that was easy to read. We wanted the imagery to have a friendly and professional feel.

USABILITY TESTING

Iterations on hi-fidelity based on user testing

1) Hero photo created a false bottom.

The hero photo took up the entire screen, and some users did not realize you could scroll down to see the rest of the landing page. To make users want to scroll down, the hero photo was shortened with some text peeping down below.

Before
2) Too much text made it look busy and harder to scan through the website.

There was too much writing and not enough photos or icons. I worked on breaking down a lot of the different sections and added imagery for easier scanning.

3) Missing a friendly element

A current client of Super Dyeing mentioned how there isn't really any friendly aspect on the website when he knows for a fact that Super Dyeing employees are helpful and friendly. So to add a more personal touch, I swapped out a photo of the facility to a photo with people in it. The current CEO did not want his face on the website, but possibly adding staff photos in the future can bring an even more personal touch.

Final Design

View Figma Prototype

Landing Page

Services

About Us

Contact Us

Next Steps

Since this is not an independent project, the CEO has the final say on what the next steps are. I would tell him that we need to do these next things for the website.

  1. Photography Session
    The website would be elevated with consistent imagery. Hire a professional photographer to take pictures of the facility and staff. Photos with people are needed to bring in the friendly element on the website.
  2. Shortening Text
    I think there is still too much text, so the text should be cut down to as simple as it can be.
  3. Credibility Enhancement
    Updating the website with more testimonials and displaying clients will bolster Super Dyeing's credibility and reputation in the industry.
  4. Online Order Placement System
    Add a feature to put in orders online to have an organized way of receiving orders.
  5. Order Tracking System
    Design Order Tracking, so it allows existing clients to get updates without having to call in.

My Learnings

  1. Design can be constrained by what the business wants and can afford, but it's still important to give your input as a designer who wants the best for both the users and for the business.
  2. There is a lot of research about design that has already been done, so I can use those as references to back up my design decisions.
  3. Writing the content from scratch was tough to do on my own. I want to work with a UX/content/marketing writer in the future to gain more experience.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
‍
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
‍
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
Webflow
Dictator
Aug 2017 — forever

Check out my other projects

Plants Without Borders
Adding features to improve the online flower buying experience
Travelparty
End-to-end app for solo travelers
Mindful Moment
A mobile-first design