Trophy City Re-branding & Design

• Trophy City Re-branding & Design
• What is Trophy City?
• Getting Started
• But first, research.
• Needs Evaluated
• Wireframes
• Mobile Landing Page Wireframes
• Desktop Landing Page Paper Wireframes
• Design Time!
• Mobile screens
• Is this design usable, intuitive, and enjoyable?
• Before/After Shots
• 🏁 Wrapping Up

What is Trophy City?

Awards by Trophy City, a locally-owned small business in Pueblo, CO, had a poorly-designed website. It lacked a full inventory, pricing, and up-to-date items. When clicking a product, the site redirected to the original product source, constantly directing users away from the page with no way back. The owner wanted to rebrand and redesign the site to feature detail, color, fun, and functionality.

Getting Started

After meeting with the business owner and learning her goals, I explored four other websites to understand the market and discovered a couple things:

• Trophy sites all use various loud colors, assumably to give a sporty feel.
• They look chaotic: riddled with popups and poorly organized information.

First, I wanted to work on the logo I was given. If I could reduce the clutter there, then I could translate that to the rest of the pages.

Though the owner had designed this, I proposed some changes while still following the same idea.

But first, research.

I cold called businesses and individuals I knew frequently purchased trophies from Trophy City to conduct research to gain insight for creating personas to bring the purpose of this site to life. After many calls, being ghosted, or hung up on, I was able to chat with four people, providing enough information to identify trends and create Ned, the persona:

Needs Evaluated

After establishing empathy, I needed to define the product by evaluating the needs of the business and user while balancing the technical considerations. This part can be difficult because it would be so great if the sky were the limit, but, realistically, it is not. Creating a needs diagram is when I usually give myself a reality check and try to start with the minimal viable product for success, while keeping additional ideas on the backburner for future iterations.

Wireframes

To formulate ideas for structure, I spent only about one minute on each screen, trying to create different flows and organization. Because the task is meant to be quick to keep ideas rolling, the penmenship is reflective of that speed and not a polished wireframe. After creating these, I

Mobile Landing Page Wireframes

Desktop Landing Page Paper Wireframes

Design Time!

• The homepage establishes the site's tone: orderly yet bold.
• The page retains all the key information and adds an extra section with products.

Creating this page, I was surprised with the ease of incorporating so many colors and shapes. Because of the different sections and minimal information needed for each section, as the landing page is meant to be a sneak peek, it was simpler creating a flow for this page compared to more complex pages such as the product page.

• Since this page has minimal content to organize, an abundant colorful design does not distract the user from the goal of the page: another page that was surprisingly simple to orchestrate.

Color without chaos

This was where the designing got surprising and challenging. I had to experiment a lot with ways of incorporating texture and spunk: it took several tries for me to land on this final design. Here are the highlights:

• The banner at the top allowed color to be added to the page in a concise manner.

• The filter/sort border is yellow and thick to bring int he accent color and make a statement, yet remain out of the way of the information on the page.

• Including color in the footer was a way to ensure this color be used in all the pages while maintaining simplicity

As you will see in the usability testing section below, this page was another page that took quite a bit of maneuvering to create the final product that met the standards we had created, which includes the following elements:

• A yellow border that adds a pop of color to the page and draws attention to the goal of the page (user buying product).

• Ribbons which are created to give the feeling of the ribbons used for sports metals.
• They are set in the background and weave in and out of the different aspects of the page to have users follow the flow downward and lead them to other products.

*Notice how the page feels colorful, yet, outside of these aspects, the rest of the page is relatively plain in order to avoid overwhelming visual stimulation.

The shopping cart page was one of the later ones created, so reusing previously developed elements made for a quick design, while bringing in only one new element.

• The yellow border is featured again on this page.

• The dotted line around cart items is meant to add personality, bringing in one of the main colors.

• Ribbons are added for consistency and to give light texture to the page- also drawing focus near the call-to-action.

Is this design usable, intuitive, and enjoyable?

As noted at the beginning of this study, the hardest part about this project was creating something loud, fun and sporty, while being modern and chaos-free. In the usability studies, I found that the navigation was smooth, but there was a lot of improvement I needed to get rid of chaos. The main results were as shown:

Before/After Shots

To give a proper feel of how changes were implemented, here are some of the first, second, and final versions of the product page and search results page. Because many of the same changes were applied to several pages, I chose to show a couple pages that highlighted large changes.

The idea:

I wanted to add texture and a background form of color to allow most of the page to be plain: I felt this could keep it from looking too chunky and outdated. I thought a ribbon-type texture could give a feel of a sports award, as metals on ribbons are often given as sports awards.

Looking back at this initial design is a bit painful: I think this is something designers can often (and should often) feel. It is inevitable when experiementing to create something that is very much NOT what you want, or, frankly, what anyone would want. That is how I feel about the initial design. However, that was all part of the process of getting to what we see on the right-side, which both the client and myself really liked.

The idea:

I wanted to incorporate color, and since I needed to have different sections anyway, I thought I would use each section as a different color. The version on the left is the original I created, but I moved onto the second version without testing the first, as I had enjoyed the ribbon feature I created on other pages.

🏁 Wrapping Up

Creating a loud, sporty, site while aiming to avoid being over-the-top posed its challenges, but was a very fun design.

This project showed me the challenges of working with a small-business. The owner had wants for the website, but had a full plate running the business. Combining this with my timeline for the project, I made more decisions with less input than originally planned.

To see the full design and experience the desktop prototype, click through the prototype below, or to access it in a new window, click here.

For the mobile prototype, click here, or navigate below.