ValueControls

Ecommerce App & Website
I led a comprehensive assessment and redesign of ValueControl's platforms, focusing on developing a cohesive brand identity and user-centric experience through new brand guidelines and high-fidelity prototypes for both a native application and a responsive website.

Introduction

Project Role

UX Researcher, UI Designer

Team Members

2 supervisors, 1 partner

Project Duration

1 month

Project Context

ValueControls, an eCommerce platform specializing in new and used HVAC components, needed a more coherent and user-centric brand presentation. My task was to evaluate their existing platforms and propose a revamped brand identity and user experience.

Challenge

I reviewed the existing product, identified pain points, and created a cohesive brand guideline. I then designed, tested, and refined high-fidelity prototypes for a native application. Following this, I developed a responsive website that aligned with the app’s structure and design, ensuring a consistent user experience across platforms.

Project Objective

The goal was to enhance the coherence and user experience of ValueControl's platforms by developing comprehensive brand guidelines and high-fidelity prototypes. The project, while experimental, resulted in a more cohesive and attractive brand, with elements of the redesign being adopted by ValueControls for their current website updates.

Research

Design Research

About ValueControls

ValueControls is an eCommerce service that provides users easy access to a plethora of new and pre-owned HVAC (Heating, Ventilation, and Air Conditioning) controls. ValueControls was established in 2017 and has grown to $47.2K in annual earnings in 2022 with 12,000 active monthly users. It’s primary internet presence is via a Shopify-constructed website that adequately serves a functional purpose, but falls short of the potential it has in user experience. With it’s main customer base in Texas, ValueControls hopes to expand nation-wide and significantly expand it’s customer base.

Key Messaging

  • “Best value at the lowest cost on HVAC controls"
  • “Products that meet your needs”
  • “Free shipping on all orders”

Original Branding

The original logo wasn’t in terrible condition, but there was room for improvement in it’s legibility and the implementation of the logo mark, not to mention the poor image quality of the logo files used on the website. The colors and typography were also reasonable, though they do feel a bit dated and could afford a fresh update.

User Stories

  • “As a residential homeowner, I want to find a specific model of thermostat at a reasonable price so that I can replace ours which has recently broken.”
  • “As a facilities manager for a school district, I want to have reliable access to hard to find and outdated HVAC controls so that I can maintain our existing system.”
  • “As a facilities manager for a church, I want a large variety of HVAC solutions to choose from so that I can update our existing system at a reasonable price.”

Concept Development

User Flow Diagram

The user flow was fairly straight forward as it follows the standard user flow of any eCommerce website. One advantage that a smaller business like ValueControls has over other large distributors like Amazon or or Alibaba is the ability to win loyalty through unique and personal connections. The ValueControls platform takes this into account through customer reviews, the compony introduction, and the blog. With a personal connection, the user returns out of familiarity and loyalty rather than out of obligation.

Design System

Style Guide

Original Branding

In order to set the stage for the design process as well as integrity to the brand in the future, I developed the beginnings of a brand guideline. This encompassed the Logo, Color, Typography, Image Style, and Writing Style. Setting a brand guideline like this is particularly valuable in a rebranding as it serves to define specific facets of the branding to future designers, employees, and team members.
The new branding that I set in place aimed to achieve a clean and clear design. The logo and colors were chosen and designed with inspiration from the company’s key messaging as well as observation of other industry examples and standards.
The choice of Nunito Sans for the font was based on it’s flexibility both large and small applications; as an eCommerce platform, there is a plethora of information and details that shouldn’t be cluttered by distracting or differing typefaces.

Usability Testing

High Fidelity Designs

Native Application & Prototype

Now was time to dive into the visual design process for the mobile application. This was special for ValueControls specifically as they currently only have a website; in all honesty, they can function perfectly without a native app at their size, but these prototypes could offer some direction on their responsive web design.
By the final design, the prototype utilized 19 screens and 4 overlays. The main navigation system was via a navigation dock at the bottom of the screen while the Cart and Profile Dashboard provided secondary navigation systems in the upper part of the screen.
Two of the overlays are pop-up notifications that proved as important elements in providing information, confirmation, and assistance in the user journey. Additionally, I gave special attention to content above the fold and concluding each screen to better regulate the user journey.

Responsive Website

With all of the screens designed for the mobil application, building out the desktop website was fairly simple. The user flow and screen content would be nearly identical, only formatted differently for the larger break point. Nonetheless, I wanted to maintain a clean and simple design avoiding unnecessary clutter and noise.
Some benefits that come with the extra pixels is the ability to easily display more information that was previously below the surface like filters, breadcrumbs, and secondary imagery.

Feedback

User Interview & User Testing

After many hours behind a computer, in order to realign myself with real world users, I conducted a number of user interviews and usability tests on the current product. With completed prototypes I gave users fundamental tasks like purchasing an item or adjusting notification settings on bookmarked products.
From the usability tests, I found some pain point that I had previously overlooked and was able to take that insight in to consideration as I improved the present product. These changes were primarily small adjustments in the user journey and accessibility challenges with things like iconography or page layout.
In addition to the usability tests, I had a selection of basic interview questions about the users’ past experience and preferences with eCommerce applications. It was helpful to learn what was important or aggravating with these other applications as it better informed me on the design decision on this product.

Conclusion

At the end of this project, I can say that I learned a great deal about the design process behind eCommerce websites and platforms. User experience is crucial in these products; a simple inconvenience can end a user’s journey or jepordize their product loyalty. The difference between a satisfying experience and a difficult on is more incredibly tangible in these products.
This was a good opportunity for me to exercise rebranding an existing company and enhancing their overall user experience. The challenges that I struggled with here were the minuscule but important steps in the user journey. Steps that would normally be overlooked in a quick design process, but when attended to, set the design far and above the others.
It was a constructive experience working with ValueControls through this process and though they are not at the stage where they are able to rebrand or expand their website, this project paved the way for conversation that helped both sides discover and define the foundations of user experience on their platform.