Web Design

Wireframes
WrestleFattie.com

Iterations are a powerful thing. You cannot arrive at a great design until you have a bad design, then a good and finally a great. OmniGraffle helped me along the path.

Filed Under

UX Design, Iteration, Web Design, Wireframes

Tools Used

OmniGraffle

Creative Process

The end result should be increased conversions. The process is important to note in able to arrive at the same result repeatedly.

WrestleFattie.com was my baby during college. I started it to help me pay off college as well as to keep me connected to the sport that I grew up participating in. I did a complete redesign of the site my junior year of college by creating personas, sketches, wireframes and a layout.

Time Management

I’m always aware of time. OmniGraffle helped a ton in this project because it’s focused on rapid iterations.

User Testing

I printed off wireframes and presented them to a dozen people, trying to find ways to improve it.

Market Research

Nobody in the wrestling world had done a fit guarantee. I created a way for wrestlers to get the perfect fitting shoe without losing money.

UI and UX

User interface is not the same thing as user experience. But a good interface can lead to a good experience.

Site Features

Based in Magento, the new site would have over 80,000 products from shoes to mats. The site was billed as a one-stop-shop for an entire team to get all their gear. A good clean navigable UI was key.

b

Minimal Design

Responsive Design

Creative Idea

User Experience Research

I combed through past data points in Google Analytics and asked past customers for input.

Blog Integration

The shop was based in Magento; the blog was based in WordPress. I made the two as seamless as possible.

Web Design

 From sketches to personas to wireframes to PhotoShop. Iteration after iteration, all influenced by data.

Focusing on returning users and boosting and engaging social media followers, this redesign was a hit.

A story in Research

I took my time with this project. I started by creating personas of potential clients. Those were revised a few times as I reached to wrestlers, parents, past customers as well as other store owners.

After a few iterations of the personas, I started rough-sketching wireframes of the site. I didn’t get into the details but just used blocks and moved them around. After a few pages, I moved them into OmniGraffle where I could focus more on details, trying to focus on the atomic design principles.

Once I had the wireframes where I wanted them, I started in with PhotoShop layouts.

The numbers

We began this project with the goals to increase sales, engage in our social followers and boost the return users. We increased every one of those metrics because of the research done prior to and during the design process.

  • Conversion Rate – +300%
  • Return Users – +30%
  • Social Following – +20%

Let's Start Something new
Say Hello!

Have a project you would like us to work on? We'd love to help you with it. Fill out the form below and we'll get back to you in 24 hours or less.

2 + 12 =