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 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:
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.
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:
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.
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.
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:
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.
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.
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. 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.
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.
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.
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.
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.
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.
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.
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.