Alpha Hanger

Freelance Web Design · 2021

Overview

Alpha Hanger is among the top three dry-cleaning equipment manufacturers in the world. Companies in this traditional industry relied solely on agencies to increase their customer base. I designed their first official website as a major step in their transformation to digital marketing.

Live at www.hangeralpha.com

My Contributions

  • Designed Alpha Hanger's first company website.
  • Increased brand awareness by building website style guides and mood boards.
  • Created and presented user flows, wireframes, and high-fidelity prototypes to clients to ensure alignment with business goals.

Duration

6 Months

My Role

UI/UX Designer

Team

1 UI/UX Designer
1 Developer

Tools

Adobe XD
Adobe Photoshop

Outcome

10%

up arrow

Increase in revenue one year after launch

42%

up arrow

Increase in customer base one year after launch

understand my clients

Context

Most dry-cleaning equipment manufacturers rely on agencies to acquire new customers. Alpha Hanger is transforming into digital marketing as a leading company in this industry.


Business Goal

Alpha Hanger needs to build their first official website to increase its customer base.


Pain Points

  • Competitors are mimicking the company's brand.
  • Communicating with customers by email is time-consuming.

understand the users

Primary User

End customers with an age range of 30 to 80, mainly located in the United States


User Needs

  • Learn about the company's reputation, services, and technology
  • Learn what products are available and be able to make an inquiry easily
  • Communicate with the company to negotiate the price and customize products if needed

Design Insights Based On The User Group

  • The visual design needs to be unqiue to increase brand awareness.
  • The navigation and structure need to be easily understood by the elderly population.
agent in the U.S. age 30-80

Brand characteristics and general style guide

Together with my client, we identified five brand characteristics: trustworthy, friendly, vigorous, high-quality, and large-scale. I extracted the primary and secondary colors from the company's logo and slightly altered the hue to make it more visually pleasing. I chose Montserrat since it delivers the message of being reliable and professional.

style guide

Image style guide

The photo collage serves as a guide for image selection on the website. It demonstrates the moods delivered by images, image content, and image quality.

style guide

The execution wasn't smooth initially, as my client could not provide me with high-quality images due to budget limits. To overcome this issue, I guided the factory workers remotely to shoot high-quality photos with phones. The result turned out to be satisfactory.

Wireframes

I presented my client with a wireframe to collect feedback on website structure, information hierarchy, and navigation.

wireframe

Homepage Design

The homepage is crucial in delivering the right messages to users at first glimpse. I proposed three homepage designs to my client and asked them to elaborate on what they liked or disliked about each version. Then I designed an optimized version that was eventually adopted.

homepage homepage

Product and order request

We didn't have enough budget and capacity to replace email with a new messaging system. I improved communication by giving users details about all products and guiding them to send their order requests with specific requirements. The design enabled customer service to focus on essential conversations.

product and order page

final deliverable

I created a high-fidelity prototype and handed over it to the developer. I assisted him during the developement process, providing everything he needed and ensuring the website matched my design.