Overview

The Project

My class assignment was to create mobile wireframes for a sports travel website to encourage user awareness and lead generation for a sports travel company.

My Role

As the UX Designer, I clarified the goals, organized the information architecture, sketched rough drafts, and created annotated wireframes. as the UX Designer.

The Challenge

The company knew they needed some online presence, but didn’t what steps to take.

The new company had travel tours, but didn’t know how to best convert users into customers.

I needed to know what the company’s mission and goals where, and what tasks they wanted the users to accomplish on the website.

The Solution

Initially, it was imperative to establish clearly defined goals with the stakeholders —  and help clarify what the user tasks needed to happen.

I organized the content into logical groupings, hand sketched web pages, and created a page flow as a foundation for the wireframes.

I created annotated wireframes in Balsamiq for a major league baseball travel desktop and mobile web site.

Research

Identifying the Sweet Spots

I identified and focused on what the mission of the business and goals of the customers, and how they align. This guided my efforts to determine what content and features should be on the new mobile site.

  1. Defining the business and customer goals
  2. Measure the goal with a pertinent metric.
  3. Match the goal with the correct mechanism.

Brainstorming ideas

Using the goals and tasks as a guide, I started to brainstorm ideas for content, functionality and information architecture.  How could I get the user to clearly understand the various travel tours, and get them to contact the company to reserve a spot?

List of features:

  • Description of various tours, complete with maps, lodging and transportation. Costs.
  • Information on teams.
  • Description of teams and their stadiums and cities.
  • A blog publishing information on the latest offerings and past trips.
  • Contact us to book a tour or request more information.

Site Map

With the list of features in hand, I started to organize into logical categories. A desktop and mobile site were organized. The mobile site was smaller and streamlined to make the experiencing faster ad

Sketches

With the site map and IA done, I started to sketch individual elements on each screen with pen and paper.  I did mobile and desktop sketches to visualize user tasks on different devices. After a few iterations, I was ready to create the wireframes.

Wireframes

I described the goal for each screen and annotated elements. A description accompanied each piece of content and user interactions.