Tennis Server is a website concept I developed for the Information Architecture course during my master’s program. Tennis Server aims to make the process of finding a place to play tennis in London easier.
The main goal of this project is to gain a deeper understanding of the information architecture design process in digital products, including the research process, sitemap development, wireframing, and user evaluations.
The main goal of this project is to gain a deeper understanding of the information architecture design process in digital products, including the research process, sitemap development, wireframing, and user evaluations.
Role
Information Architect
Timeline
July 2024 - October 2024
Skills and Tools
Desk research in the field
Semi-structured interviews
Optimal Workshop for card sorting and tree testing
Figma to design wireframes
Descript to transcribe interviews
Semi-structured interviews
Optimal Workshop for card sorting and tree testing
Figma to design wireframes
Descript to transcribe interviews
Team
Janie Hendrickson
Domain Research
To gather research about my domain, I used a combination of indirect and direct research methods. First, I went into the field to ensure I was securing real “experts” to be interviewed. Then, I signed up for a tennis lesson, experimenting with how the LTA.org booking system works and seeking inspiration for what questions to ask the experts. From this lesson, I interviewed three domain experts, two instructors, and one player in a semi-structured interview, ensuring I asked suitable follow-up questions without probing.
Key Insights:
-One tennis instructor highlighted that joining a private tennis club is the best way to find a place to play tennis.
-The experts considered cost, amenities, and racquet rentals when searching for a place to play tennis.
-The experts considered cost, amenities, and racquet rentals when searching for a place to play tennis.
Domain Model
Once I gathered my interview notes, I created a domain model to visualize the main concepts and their relation. I used circles for entities, plural nouns, and verbs for the links to craft sentences easily, and I avoided multinode sentences. To make the hierarchy of entities clearer, I chose purple and green for my main entities, as those are Wimbledon colors and yellow for the examples to emulate tennis balls. This served as a foundation for my sitemap.
SITE MAP
I then created a sitemap for the website to understand how it should be structured and how users would navigate it. I first conducted a card sort using key domain concepts that would be included in the site with five participants from my target audience. Using the insights from that test, I built out the sitemap, then ran a tree test with an additional five participants to ensure that the structure was logical and key information was findable.
Key Insights:
-I uncovered that both the main heading and the goals subcategory were too broad and not easily understood by users.
-I uncovered that both the main heading and the goals subcategory were too broad and not easily understood by users.
-I changed my sitemap to a flat hierarchy instead of a deep hierarchy with seven categories and fewer subcategories.
-I broke up “I am Looking For” into “Lessons,” “Just Hit,” and “Play Matches,” as those were the most important user goals that my domain experts mentioned.
After this reorganization, I conducted another tree test with the same tasks as before, and all participants were able to successfully complete the task.
After this reorganization, I conducted another tree test with the same tasks as before, and all participants were able to successfully complete the task.
-All participants mentioned that they liked the robust filtering and ability to navigate through search, as well as adding in their post code.
USER JOURNEY
Referencing the sitemap, I created a user journey to show the various paths a user could take to find a place to play tennis in London. The task gives the user enough context to know what they’re looking for without explicitly mentioning any labels in my sitemap. This demonstrates the flexibility of my site's information structure, empathizes with the user, and checks for any opportunities to simplify the information-finding process.
WIREFRAMES AND EVALUATIONS
I created four wireframes in Figma on a page different from my user journey to provide more of an exploration of the website. I started by thinking of my primary audience and the one activity that allows them to solve their goal effortlessly and elegantly.
I placed the seven global categories in my site map on the navigation bar instead of having a hamburger menu for easier access. All pages include the Tennis Server logo, global navigation, and global search to help users navigate the website easily and consistently. Each page also includes breadcrumbs to show the user's journey on the current page and to support the ability to move back quickly.
I evaluated each page with three users, assessing how well everything is labeled or how easy it is to navigate.
I placed the seven global categories in my site map on the navigation bar instead of having a hamburger menu for easier access. All pages include the Tennis Server logo, global navigation, and global search to help users navigate the website easily and consistently. Each page also includes breadcrumbs to show the user's journey on the current page and to support the ability to move back quickly.
I evaluated each page with three users, assessing how well everything is labeled or how easy it is to navigate.
Wireframe 1: Book a Tennis Court Page
The Book a Tennis Court main page includes an interactive map that moves according to your postcode. Initially, this page was going to allow users to search by postcode, but one user evaluator asked how they would find a court if they already knew its name. While they could search for the court in the global navigation, I also added a search by the “Court Name” option on this page.
The Book a Tennis Court main page includes an interactive map that moves according to your postcode. Initially, this page was going to allow users to search by postcode, but one user evaluator asked how they would find a court if they already knew its name. While they could search for the court in the global navigation, I also added a search by the “Court Name” option on this page.
Wireframe 2: Book a Tennis Court Results Page
On the “Book a Tennis Court” results page, you can add filters and sort the tennis courts by distance away, with the nearest court first. The map view will show you where the tennis courts are located in relation to the postcode you entered. You can see the average rating of the tennis courts, how many reviews there are, and the price, as these are most important to the users. You also can “favorite” a tennis court to your profile so that it will be saved for the next time you return to the website. I added a “View All” or “View 6 per page” drop-down menu option to support users' different browsing preferences.
On the “Book a Tennis Court” results page, you can add filters and sort the tennis courts by distance away, with the nearest court first. The map view will show you where the tennis courts are located in relation to the postcode you entered. You can see the average rating of the tennis courts, how many reviews there are, and the price, as these are most important to the users. You also can “favorite” a tennis court to your profile so that it will be saved for the next time you return to the website. I added a “View All” or “View 6 per page” drop-down menu option to support users' different browsing preferences.
Wireframe 3: Book a Tennis Court Details Page
Once you click “view more details” on a tennis court, you are brought to the details page of the tennis court. A user can enter their intended date and time, which will auto-populate the available court. They can then directly book the court through this page. Users will also be able to see other people’s reviews of the tennis courts. The evaluators shared that when they go to book a tennis court, they often look for other available amenities. This is when I added an “Amenities” section so a user can easily see the amenities without having to read the entire Court description. I also added a “Directions” section with all the nearest public transportation stops.
Once you click “view more details” on a tennis court, you are brought to the details page of the tennis court. A user can enter their intended date and time, which will auto-populate the available court. They can then directly book the court through this page. Users will also be able to see other people’s reviews of the tennis courts. The evaluators shared that when they go to book a tennis court, they often look for other available amenities. This is when I added an “Amenities” section so a user can easily see the amenities without having to read the entire Court description. I also added a “Directions” section with all the nearest public transportation stops.
Wireframe 4: Quick Match Play Page
Users can enter their postcode or add filters on the Quick Match Play page to see all upcoming matches that suit their needs. This page will operate like a community hub where local tennis groups can post their matches. If you choose to have an account with Tennis Server, you can post your matches on this page, too. I chose to add a suggested bar with other options the user might like based on their filtering selections to support users in finding new tennis events. After discussions with my evaluators, I also realized I needed to change the “expense” filtering options here because hourly rates are inappropriate for match play.
Users can enter their postcode or add filters on the Quick Match Play page to see all upcoming matches that suit their needs. This page will operate like a community hub where local tennis groups can post their matches. If you choose to have an account with Tennis Server, you can post your matches on this page, too. I chose to add a suggested bar with other options the user might like based on their filtering selections to support users in finding new tennis events. After discussions with my evaluators, I also realized I needed to change the “expense” filtering options here because hourly rates are inappropriate for match play.
