FRANTICALLY SPEAKING BACKGROUND

Frantically Speaking is a website designed to help people improve their communication skills. The target users are entrepreneurs, working professionals, and students. The main features are the public speaking blog, which receives 35,000+ visitors a month, and coaching offerings.

This project was done for a design hackathon. Part of the brief was to improve the website for first-time users.

USER RESEARCH

We did usability tests with user interviews and a competitive analysis to identify key problems with the current website.

Usability Test and User Interview

We conducted 6 usability tests with students and working professionals. We also asked few semi-structured interview questions to further understand how people perceive the website. We focused on understanding how users accessed the blog, how they booked a consulting appointment, and what they expect out of a website aiming to help with public speaking.

Here are the key insights:

Competitive Analysis

We did a competitive analysis by evaluating Frantically Speaking against their top competitor websites. We picked the attributes to compare them based on the usability test and interview results.

Based on this, we decided to focus on efficiency of use and content organization to improve the customer experience.

DESIGN QUESTION AND REQUIREMENTS

Based on the design hackathon brief and the user research, we decided on a design question and design requirements.

Design Question

How might we help first-time users of Frantically Speaking, a public speaking blog and coaching website, better consume the content on the website?

Design Requirements

DESIGN PROCESS

We did some ideation of design ideas and I made an information architecture before creating wireframes for the second round of usability testing.

Ideation

Based on the usability test results, we made an affinity diagram to organize design ideas to meet the goal of improving content consumption for first-time users. The items in pink are the aspects we decided to focus on in our designs.

Information Architecture

Since navigation was a key issue with the current website, I made an information architecture to organize the website more effectively.

Wireframes

We made wireframes for the key screens on the websites.

Requirement 1: Improve the information flow throughout the website

We made changes to the navigation and footer on all pages. We focused on the home page and consultations page to improve clarity and conciseness.

Requirement 2: Improve the navigation on the blog page

I included two images showing the issues with the original site and the redesigned wireframe that addresses those issues.

Requirement 3: Improve the user experience of booking a consultation

The original website had a poor experience for booking a consultation and there was no ability to select a time and date to meet without submitting name and email. In the wireframes, we designed a booking flow within the website without needing outside applications so that users can select a date and time before submitting the consultation form.

Issues with the Original Booking Flow

Wireframe for Booking Flow

Usability Testing

I tested the wireframes with 3 participants: one student and two working professionals. I asked the same questions and observed the same tasks as we did in the original usability tests so that we can compare the user experience of the wireframes to the original design.

Here are the key insights:

FINAL PROTOTYPE

Based on the usability testing with the wireframes, I made the final designs.

Initial Home Page Design

In order to test the aesthetics of the design, I decided to make an initial high fidelity prototype of just the landing page to get feedback. While we tried to keep our visual design style similar to the branding of the Frantically Speaking website, we made changes to improve clarity, readability, and professionalism to promote ease of navigation and trust in the website through the consistent font type and button styles.

Final Designs

I have included a few final screens below and I made an interactive prototype with all of the screens. In addition to addressing the feedback from the initial landing page, I also made slight changes to the colors to improve contrast for accessibility and fixed some spacing issues.

Changes I made based on the usability test:

• Blog Page: I added a search bar within the page for more intuitive searching of blogs.

• Meet Coaches Page: I eliminated the coach profile pages and instead included a brief summary in the meet coaches pages. I also included email and LinkedIn links for each coach. I formatted this page similarly to the blog page since the blog page got positive feedback in the usability testing.

• Consultations Page: I removed the “Why should you join?” section since that information was repetitive. I also made the “How It Works” section clearer by explaining each step and renaming the button to the free consultations form. I added a button to the free consultations form at the top of the page as well.

• Calendar Flow: I added a field to include the selected coach on the form. I also reformatted the calendar to include the time slots within the calendar instead of showing them below.