AI Implementation Case Study
UIX Design
Sendsteps
January 2023
Overview
Sendsteps is an audience engagement platform which enables users to connect with their audience on a deeper level. It functions as a presentation creation tool enabling users to convey their messages interactively and engage their audience effectively during their presentations.
Within this project, I took on the role of a confident leader, guiding a team of two designers in UIX design and research. My responsibilities encompassed conducting user research, formulating interactions for mobile, website, and web applications, as well as making substantial contributions to the visual design phase and actively participating in prototyping using Figma.
Problem Statement
Drawing from the insights gathered by our product team's user research, a key issue has emerged: users invest a significant amount of time in crafting their presentations. This extensive time investment detracts from their schedules and contributes to user dissatisfaction.
Discovery Phase - Information Research
Given our defined problem statement, our focus shifted to deliberating potential solutions. Our primary guiding principles revolved around resolving the issue through a user-centric approach, maintaining consistent user engagement, comprehending their requirements, and rigorously testing our solutions with them. This approach was aimed at ensuring that we adeptly tackled their time-related concerns.
These were the core principles that guided our course of action:
1) Simplify the Creation Process: Identify specific pain points in the presentation creation process where users are getting stuck or spending excessive time. Streamline these steps by providing more intuitive tools, templates, or automation features. For example, offering a variety of pre-designed templates that users can customize easily could speed up the process.
2) Automation and AI Assistance: Consider integrating automation and AI features that can help users by suggesting layout designs, generating visual elements, suggesting content based on the topic. These features can significantly reduce the manual effort required to create presentations.
3) User-Friendly Interface: Ensure that our presentation software has an intuitive and user-friendly interface. Complex and cluttered interfaces can lead to confusion and slow down the creation process. A clean and easy-to-navigate interface can make a significant difference in saving users' time.
4) Style (Theme): Provide users with a style (theme); a certain font, color, background, and layout. This will help our users achieve a professional-looking presentation without spending excessive time on design decisions.
5) Guided Tutorials: Offer step-by-step tutorials or tooltips within the software to guide users through the presentation creation process. This can help users (who have used first time our tool) discover features they might not be aware of and improve their efficiency.
6) Feedback Loop: Continuously gather feedback from users to understand their pain points and gather insights into how the changes you implement are affecting their experience. Regularly iterate and improve our software based on this feedback.
7) Performance Optimization: Ensure that our software runs smoothly and doesn't lag or slow down during the creation process. Technical issues can exacerbate users' frustration and waste even more of their time.
8) Collaboration Features: Integrate collaboration features that allow multiple users to work on the same presentation simultaneously. This can save time when multiple stakeholders are involved in the content creation process.
9) Mobile-Friendly: Make sure our presentation software is accessible and functional on mobile devices. This can enable users to work on their presentations even when they're on the go.
We embarked on a journey to explore the feasibility of integrating AI into our product. This exploration not only established a context for users but also synergized with one of our strengths, which is interactivity.
Drafting - Iterations
We conducted a comprehensive benchmarking exercise of 8 AI tools dedicated to content creation. Each tool underwent a thorough review to gain a holistic understanding of their functionalities and solutions. Based on our findings, we then formulated four distinct personas by mapping out user journeys. This process enabled us to construct user flows that eventually led us to identify the most optimal solutions.
During the phase of exploring the user interface (UI), we initiated with swift sketches that were later transformed into high-fidelity wireframes. These wireframes were shared with developers, product manager and owner, and stakeholders to foster brainstorming, comprehension, and discourse about the solutions we had devised.
Based on our research findings, we arrived at a strategic decision. We introduced an entry point within the stepper, where users input specific information to facilitate an efficient and accurate AI process, thereby enhancing their overall user experience. As users input data into the steps, AI begins crafting their context in the back, aligning with their preferences. By providing a subject, AI generates corresponding titles. This approach grants AI the time it needs to generate the entire presentation. Our primary focus here was on a key factor "performance optimization" which ensures the seamless operation of our software, preventing any slowdowns during the creation process. We were well aware that technical glitches could amplify user frustration and lead to further time wastage.
Initially, we grappled with the design direction for the banner on our main page, "My Library." We deliberated whether the banner should be static or animated, and we explored possibilities like initiating it with a button or an input field. Simultaneously, we tackled the challenge of creating a cohesive play mode within the presentation tool, harmonizing it with the overall design language. To address these considerations, we present our initial attempts at the banner design and the stepper interface, which are showcased at the top.
Digitalizing Visual Elements - Prototyping
Within our tool, we offer a play mode that enables users to present their created content. Ensuring consistency with our AI integration was equally important in this aspect. As previously mentioned, the animated banner concept required alignment with the play mode. Consequently, we conducted trials to find the optimal solution, resulting in the most recent version that effectively captures attention and maintains a uniform style across our website, web app, and mobile design.
The Stepper function serves as a tool for users to create complete presentations through inputting relevant information. During this process, our objective is two-fold: to gather additional ideas from the Stepper to construct an accurate presentation context, while simultaneously affording the AI sufficient time to generate a comprehensive presentation. Within the Stepper, we pose targeted questions to refine the presentation context, thereby enabling the AI to produce precise presentations. Our overarching aim is to tailor the experience for each user.
Initially we were uncertain about how to smoothly guide users from the "My Library" main page to the Stepper, our approach evolved through different versions. In the second iteration, we introduced an action button to access the Stepper, which was followed by presenting related questions and subjects for users to complete.
However, during the penultimate version, informed by user interviews, we recognized that transitioning from the "My Library" to the Stepper using an action button wasn't intuitive for understanding the stepper's functionality. Consequently, we introduced an input field within the banner to initiate the Stepper function. This enhancement enables users to initiate the presentation creation process while being aware of their active engagement.
Furthermore, after careful consideration, we decided to eliminate an additional step in the process. Therefore, we removed the question about the presentation's duration from the Stepper, allowing us to focus more on title customization. We implemented supplementary functionalities for the titles, allowing users the option to either create their own titles or opt for AI-generated titles in cases where their preferences aren't met.
Upon refining these features, we noticed that AI processing was slow. To address this, we proactively informed users with an alert box that the creation process might take longer than expected. Our intention was to not only provide transparency but also engage users in the process itself.
Following the decision regarding the stepper, we extended the changes to the mobile design. After crafting several sketches, we tested them with users. The feedback indicated that reproducing the stepper on mobile couldn't follow the same approach due to the smaller screen size compared to the web app. Consequently, we adopted an alternative strategy, opting to utilize mobile functionalities. Instead of implementing a scrolling mechanism between steps, we positioned the stepper at the top and displayed each step individually. This adjustment enhanced users' ability to navigate through the steps more effectively within the constraints of smaller screen sizes.
Final Design
In the ultimate design iteration, guided by user reviews and feedback, we resolved to adopt distinct a banner style for the website, web app, and mobile interfaces. Furthermore, we enhanced the functionality of the stepper for both the mobile and web app platform.
I'll begin by addressing the banner's evolution: initially static and not in alignment with our website's messaging. To address this inconsistency, we harmonized the design by adhering to consistent color schemes across platforms. Additionally, we introduced a dynamic element – an animated GIF – infusing a futuristic aesthetic and inviting users to engage with our AI tool. Below, you can observe the alterations across all interfaces of our product: website, mobile, and web app.
In the final iteration of the stepper functionality, our approach underwent several enhancements. We chose to initiate the process by having users entering their topic from the animated banner and then proceed step by step. We refined certain questions and the overall context to ensure an improved user experience and elevate the quality of their presentation creation. A pivotal addition was introducing an extra step that queries the desired length of the presentation. This enhancement allows AI to assist users in framing their work, thereby saving them valuable time.
In response to feedback, we tackled navigation issues within the stepper. By implementing suggested changes, we managed to resolve problems and enhance the timeline's usability. We also refined the presentation of cards, now displaying them individually instead of collectively. This modification eliminates confusion and streamlines the experience.
Leveraging one of our tool's strengths, we integrated the option for users to choose between creating a presentation or a quiz. This feature empowers users to tailor their content to include a specific level of interactivity.
Moreover, in a bid to address privacy concerns, we adapted a question. Instead of asking about the intended audience, which could potentially raise privacy issues, we opted for a broader inquiry about the desired "tone of voice". This adjustment maintains relevance while respecting user privacy.
Following the finalization of the stepper's last version, we extended the same approach to our mobile stepper. During this adaptation, we paid particular attention to optimizing spacing for improved readability. Furthermore, we enhanced the navigation bar options by incorporating a timeline guide. This innovative addition allows users to smoothly navigate through their steps. The mobile stepper now offers a heightened user experience, particularly for those who wish to edit their other steps.
During our discovery phase, we highlighted the significance of Performance optimization and Collaboration features. Following the completion of the final design phase for the stepper and AI tool, we dedicated our attention to enhancing these aspects.
Regarding Performance optimization, our focus was to address potential slowdowns in AI processing during presentation creation. To mitigate this, we introduced a feature designed to accelerate AI processing. This enables users to engage in immediate presentation editing while the AI continues generating the remaining slides. This approach significantly reduces waiting times, ensuring a smoother user experience.
In addition, we introduced a Collaboration feature, allowing multiple users to collaboratively work on the same presentation in real-time. This functionality proves invaluable when numerous stakeholders are participating in the content creation process, effectively streamlining collaboration and saving time.
Results - Conversation Rate
In February 2023, we introduced our AI-powered presentation creator to our product lineup, resulting in remarkable growth statistics. Presently, the platform is witnessing an astonishing daily generation of approximately 10,000 presentations. Following the integration of AI, the number of new users surged by a remarkable factor of 50x. Our efforts have significantly elevated Sendsteps' standing on Google, propelling its average position from 2.3 to an impressive 30.2 for AI-based presentations.
Over the past four months, our growth trajectory has been exceptional, marked by the following milestones:
• Organic search-driven user count escalated from 6.000 to 60.000 monthly.
• Presentation creation surged from 4.000 to 185.000 per month.
• A remarkable 70% conversion rate observed from website visitors to account creation.
• An impressive 87% conversion rate recorded from account creation to generating an AI-based presentation using our web app.
• Our footprint has expanded to more than 125 countries, reflecting a global presence.
These achievements underscore the profound impact of our AI-powered innovation, driving Sendsteps' substantial growth across multiple key metrics in a mere four-month span.