TrueUp Hanging Solutions

UI/UX Website Design
Project Overview
The creative team and website team at GTMA were assigned to work on a branding, marketing, team for the release of a new invention called TrueUp. TrueUp is a picture hanging solution that does not damage walls or paint. 
My Contributions
As the UI/UX designer on the team, my job was to create a user experience that allowed the user to get a full idea and purchase the products; I also needed to create an interactive space where the brand can live and highlight the product. By working with the Head of Web Development, we were able to make these goals happen.

Would like to see the process?

See the TrueUp Process Deck

See the live website!

What Is TrueUp?
TrueUp is a tool that makes an adhesive attachment for picture frames to hang on the wall without damage. Essentially it is a series of adhesives and metal mounts that allow any picture frame to be hung, moved or stay for long periods of time.
Goals
Create buzz about TrueUp Products.

Bring awareness of this new product.

Bring traffic to the website so that prospective buyers can learn more.

Create a unique space for hanging solutions.
Project Scope
Create a ecommerce website that includes:
Homepage

Blog Posts

Basic purchasing flow

Contact form
Personas
Created by Freepik
Families
Takes a lot of photos

Photos on the walls change and are current with family members' lives.

Looking to save on
Created by Freepik
Renters
Needs deposits when moving.

Do not stay in one place for too long.

Usually young adults.
Created by Freepik
College students 
Cannot nail anything into the dorm wall.

Saving money so keeping rent deposits in mind. 

Will most likely move out of the dorms.
How to we make TrueUp Stand out?
TrueUp is meant to hold more weight than most 3M adhesives that are used for hanging solutions.

It is meant to be very comfortable and easy to use for anyone.

Highlighting that TrueUp solves these basic problems with new solutions.
What challenges were faced?
This is a new product, so angling it in a unique and exciting way will be important. 

I did not start off with any assets and the TrueUp product was still in the prototyping stage. Lots of questions in the beginning. 

The adhesive product 3M has a hold on the market, and we need to think about shifting that market.
Patterns
Color Choices
Advertisements
Accessible colors
To ensure we had a system that was going to work for most users I wanted to see what colors were accessible in the brand.

Black and the dark blue in the color pallet were the only accessible colors for the website, in the use of highlighting text. In this case I decided to use the blue for interactive indications.
Style Tile/ Guide
* Typeface: Bilo (Adobe Typekit)
12 Collum Grid - Width 16px

See the live website!

TrueUp Hanging Solutions
Fun. Exciting. Different.
The design for TrueUp is to hold the brand message across the website. By using patterns, symbols, and colors the user sees that this is more than a utility product.
Curating a unique experience
Most competitors do not brand themselves in such a bright and vibrant way. Using the branding assets in a strong way, both the brand and product have life to it. Although TrueUp is a product for utility, the design needed to include the human connection of what connects us with photos.
Let's Make it Easy
The website is simple and so is the navigation. Whether the user gets to the site by google or from the QR code in the instructions sheet, they are able to find all things TrueUp and photo hanging related.

Would like to see the process?

What did I learn from this project
Harmonious photography is vital for a brand identity. Especially living on a website together.

Remind the branding team to keep in mind accessibility so the website can be more cohesive with the brand.

There is a fine balance of too much information on a page and not enough. Desitle information to what is most important and what the user mostly cares about.

Although this is a small website, it could grow more at some time. It might be good to think of future or more alternative button states so the brand voice can continue.

Want to work together?

If you like what you see and want to work together, get in touch!