South Florida Tennis Club

WEBSITE & MOBILE APPLICATION DESIGN

Our group chose the SFTC for our group project. Who is the SFTC? The South Florida Tennis Club, also known as SFTC, is a nonprofit organization founded in 1987 to develop and coordinate tennis activities for the LGBT community and friends in the South Florida area. The SFTC is dedicated to supporting competitive and social tennis activities for everyone.

Roles & Responsibilities:

User Testing• Stakeholder interviews • Survey Research • Competitor Analysis • UI navigation • Site Mapping• Prototyping

Original Website

We chose the SFTC because of its diversity and inclusiveness with the sport and organization, but one of our main reasons is that it is outdated and needs updating and clear structure.

Interview Plan & Results

We interviewed five members of the South Florida Tennis Club as well as sent out surveys. In the surveys, we asked about the functionality of the website and the current design. From our survey questions here are two questions, we found most informative and the feedback.

Original Survey

We asked open ended questions to receive qualitative information. When we asked “How the website could be improved?”, here are some the the answers we received.

Brainstorming

We then took our data and began our define/explore process. We used the “I like, I want, I wish” chart to narrow our scope and to understand what our user’s needs are. We came up with these three main themes.

Restructure

We were able to reduce the number of categories. Many of them could go into subcategories and weren’t important to the user. We simplified the structure into fewer categories.

Wireframing and Low Fidelity Prototyping

From the sitemap, we started to write out our ideas. We started with the menu navigation bar on the homepage and kept the key tabs needed while maintaining a clear hierarchy and cleaner look. Here is showing how we transformed these sketches into our low fidelity prototype in Figma.

Our main goal with redesigning the site was to simplify the information that was presented to the members. We also wanted to make it evident on the homepage that you were logged into your member account and a straightforward interface to submit the match score. There is no mobile version of the website, so we wanted to focus on the responsive web design and make an intuitive site for the users to navigate.

Our site map gave a blueprint to lay out our navigation bar. We condensed many buttons to only the four included on the header and in the hamburger of the mobile. Then we proceeded to incorporate this in the mobile design.

First Design

This was our initial design. This is a really fun group that does a lot of themed tournaments and socials so we wanted to represent that feel in our design.

Revisions

We tested this among users and make changes according to the feedback. Here are some of the feedback notes. We implemented these changes in the final design.

Final Design

In summary, we went through a lot of research, testing, and iterations on the website. We reduced the navigation to the four tabs at the top for the desktop version and created a hamburger menu for the mobile. Below we have a Landing page, website main user page with a matching mobile layout.

In Conclusion.

Overall the website design is cleaner than before and the ladder system is more organized. We look forward to working on other pages of the website and mobile. We have created a cleaner look, better structure. In the end, this creates a more professional website for desktop and mobile.