The Client

 Client

SpeakEazy

My Role

My Role

UI Designer

Project Date/Time

Timeline

2.5 Weeks

Tools Used

 Tools

Photoshop

Illustrator

InVision

Final Deliverables

Deliverables

Style Tiles

High-Fidelity Mockups

Prototype

Style Guide

SpeakEazy Background

 

SpeakEazy is a Chicago startup founded by two college students Brandon Frisch and Cristian Sandu. They’ve developed the first online platform that helps people become better at and overcome their fear of public speaking. The value proposition was: users can practice their speeches with their webcam while being recorded in front of a pre-recorded virtual audience, the recorded videos can then be shared with peers for constructive feedback. The idea is to desensitize the users to see presenting as an opportunity rather than obstacles by providing a community for continuing learning that contributes to growing users into powerful unscripted speakers and shed light on their strengths and weaknesses as a speaker. The web app is ideal for corporate customers, teams, short and long-term user, new and intermediate speakers.

The Challenges

 

The client came to us looking for a visual redesign of their current web app. My team and I were tasked with styling the content in SpeakEazy primary flow of the dashboard and video recording. By studying the wireframes my team and I found that there was no way for users to reply to the comments. This was a big challenge for us taking into account the time frame and the work scope we had. The goal was:

  • Make sure the record button can be accessed from any screen.
  • The design should present a clean and well-organized dashboard layout that allows easy access to all platform functionalities.
  • The application needed to be as real as possible and make users feel safe.
  • The interface should be simple to navigate.
  • The recording flow should have overwhelming feelings to simulate that public speaking experience.

The Initial Wireframes

 

As a part of the creative brief, my team and I were given mid-fidelity wireframes that were already developed for the website from a separate UX team that worked with SpeakEazy founders to do research and provide a strategic vision for the website. We started by studying the research findings of the UX work, which helped us determine SpeakEazy functionalities and interactions. Their wireframes gave us some insight on what the research findings had shown: which was, the existing web app was very confusing for the user to understand, there was inconsistent navigation, dearth visuals, the pages lacked structure and hierarchy, and indicated that users wanted desensitization through practice and feedback. The wireframes were also a foundation of where I had to focus on fleshing it out with a visual direction and it helped me understand the amount of content I had to design with. My team and I also discovered some important features was left out with the video reply comment, other than that the client was very satisfied with the wireframes.

My Design Process

 

I was on a team of four UI designers, we had two weeks and a half to complete this project, which was split into three design sprints. My team and I started by reviewing the handed over assets to better understand the domain. One of the things I learned from my previous client meeting, was to always ask a lot of questions and the only way to do so is to conduct domain research and review the UX work before talking with the client.

The first sprint was focused on working as a team with a joint competitive analysis in and out of the domain, my team and I branched off and we explored our own design style. The second sprint was mainly focused on establishing the individual design direction and create high-fidelity mockups. The final sprint was about the refinement of design direction based on the client feedback, and finalizing and expanding high-fidelity mock-ups for delivery to the client. In my visual process, I always began with:

  1.  Reviewing the UX Assets
  2. Conducting domain research
  3. Studying trends both in- and out-of-category
  4. Conducting competitive analysis
  5. Exploring visual inspiration
  6. Creating style tiles to present various design directions to the client
  7. High-fidelity mockups (fail fast)
  8. Iterate based on client feedback

Research & Developing the style

 

Research and Client Brief

After reviewing the wireframes, my team and I had an in-depth conversation with the clients to gain a better understanding of their overall vision for their product. My team and I learned that is no similar product in the present market, but there are competitors that aim to do this through the use of VR that don’t have the ability to record your speeches and have it review by peers. Furthermore, the CEO also told us that they had been using green as their primary brand color, but were open to moving forward in a new direction. We also learned that he loves Google’s material design because it’s really intuitive, and would be interested in incorporating elements of it into their interface. Additionally, we asked for three different set of adjectives that the interface should include, he emphasized: fun, engaging and professional. A cartoonish feel with a touch of fear and overwhelming feeling to emphasized the video recording. Simplicity, trustworthy, friendly and resourceful. With these adjectives in mind and our research result, we had a start to present several potential paths for their site.

Visual Competitive Analysis

After the client’s brief, our goal was to better understand the competitor’s overall space, look and feel. We divided up our competitive analysis amongst the team, covering similar competitors: Toastmasters, Alchemy Learning, LearnCore; sites that the client liked and used any kind of data visualization:  Soundcloud, Wipster, and Ustream. My team and I then collaborated in Slack and Google Drive to condense the list of sites that we felt best matched and shared our thoughts on the overall design choices that were made to achieve the aesthetic. Furthermore, to put my thoughts together for implementation and get my creative juice flowing, I created a Pinterest mood board pulling inspirations randomly with anything that I felt inspired me, meet the client goals, give the users an enjoyable and easy experience.

Design Principles

With the competitive analysis and provided UX insights, we combined to come up with a guiding reference to apply to our overall designs. We decided on three design principles to guide the rest of our process:

  • Easy Digestible – The design should present a clean and well organize layout that allows easy access without any overwhelming learning curve.
  • Consistent –The Navigation should be accessible from any screen and user should have quick access to all groups and projects.
  • Engaging and Flexible – The interface should work well for short and long-term users and teams, new and intermediate speakers so that they can return with ease and continue using the platform to get better at speaking.

Style Exploration

From the analysis and visual inspiration, we compiled, we presented three possible trajectories for our style tiles exploration where each member of the team developed their own tiles to present to the client. Most importantly, one of my style tiles was based solely on the client expectation, wants, and needs. My goal for the other two tiles was to showcase to the client how applying different styles could achieve a different look and feel.

Client Feedback

SpeakEazy CEO gave us detailed feedback on all of our stylistic choices, so I had clear directions to begin my high fidelity screen mock-ups. The client and I decided that I would incorporate elements that stood out on the two tiles they didn’t liked and add those elements to the second tile and proceed with it for my high-fidelity screen design.

The Result-HiFi Screens

 

After two rounds of the design sprint presenting our work and receiving feedback from the client and our project manager, I arrived at my final designs working off of the annotated wireframes because they were user tested, keeping in mind the analysis and style tiles result. Having said, there was no way for users to reply to the comments so I had to come up with a solution given the few days I had. While designing, I think about the use case throughout the design process that led to a few changes to improve the user’s experience. Coming into this project, I had experience working with uBack which made the process much easier. I gained more confidence meeting the client, asking questions, designing and refining base on feedback.

Screen 1. Empty state of the dashboard where users can create projects, invite collaborators, and record new videos.

Screen 2. Content state of the dashboard connect users project to the videos and collaborators.

Screen 1. Record flow of the dashboard where users can choose audience from categories that range from size and level. The categories section was limited when selecting from size to level, everything was in one. I’ll give credit to my teammate Justin Martin for coming up with the idea of sectioning the size and level categories so users can select both the level and size difficulties. I followed the same concept but in wording and visual elements, it was different.

Screen 2. Recording prompt is a good way for not letting the users feel rushed when starting their recording before they are ready. The annotated wireframes had only a start button and I think it was a great idea to added the text prompt above the button to help improve the user experience.

Recording countdown starts from 0 to 5.

image

Screen 1. The recording screen is where users are being recorded facing an audience. I added a pause button for the users to have more flexibility when recording because of life’s full of distractions.

Screen 2. This screen was an addition to the wireframes. The restart button, I added a prompt that will warn the users just in case they’re not aware of the losing the entire recording or change their mind last minute.

image

The save recording modal direct users to name their video and allocate it to a project folder. The users can also watch the recording video right there and save it, restart their recording or delete it if they need to. The wireframes had a share section added to the save modal, it was very confusing because if you decided to share first before you save there was no way to reverted to save. I took out the share section and added another modal to show up after the user save the video they then have the option to share.

image
Realizing the wireframe has not accounted for replies to comments. My solution was, I borrowed Gmail interface because the layout fitted well with the dashboard and integrated perfectly with the time-stamp on the video bar. I also wanted to take a different approach from my other three teammates who was working off of the YouTube interface. My goal was to present different options to the client.

 

The animation below is showing the normal state of the dashboard, users can click anywhere on the video and the comment modal box will pop up for users to enter their comment. However, the client had concerns with users has to click on the video in order to know there’s a way to comment on the video.

image
Taking the client concerns into consideration with the click to add comment popup, I created a circular add button and a comment input box to solve this problem. When the users commented on the video it will automatically be added to the right bar with the timestamp under the user icon/picture. The client really liked this idea when I explained to him my thought process behind this. I think it would be very distracting to have a lot of circular icons on the video bar, especially when there’ll be fifty to a hundred comments screaming at you. Putting myself as a user when designing really helped me to make sense of the use case.

 

The right comment bar is showing an active state. When the user clicked a comment it changes the state color, displaying a reply icon and the timestamp icon showed up on the video bar so the user got a feel of where the comment is in the video.

image

High-Fidelity Invision Prototype

 

In addition to the high fidelity mock-ups, I created a clickable prototype in InVision that was presented to SpeakEazy at our final meeting walking them through the flow of the key screens. Please view the prototype in InVision for the best experience with more flushed out screens.

Style Guide

 

As a final deliverable, my team and I each created and delivered a comprehensive style guide for SpeakEazy to served as a visual guide to ensure consistency with all the UI elements found throughout the various screens of the interface so that developers and other designers can reference to.

Final Thoughts

 

SpeakEazy was very satisfied with the UI redesign my team and I produced and was overwhelmed with all the different directions they had. However, SpeakEazy felt I excelled by listened and responded to constructive feedback where I executed their vision effectively and chose to implement my design for their redesigned website when they get to the development phase.

I really enjoyed working with the UI team, Lainey, James, and Justin. It was a fun challenge and a great experience that allowed me to grow as a digital designer. I annoyingly bugged my team for their feedback and we collaborated well when there was a need to discuss challenges which led me to create an interface that met SpeakEazy vision and helped improve the user’s experience. Additionally, one mistake I made was to overthink ways of changing the wireframe flow for the navigation luckily I consulted with the UX team first which helped me to understand the reasoning behind the flow ― realizing how important it was to understand the UX work that went into the wireframes I was handed helped me to create solid UI deliverables.