Tall Poppy's original onboarding solution.
Overview
Tall Poppy is a security company that helps users mitigate online harassment through its web application.
It partners with companies to help employees take actionable steps to improve their cybersecurity and provide resources for when being harassed online.
The problem
Approximately 10% of Tall Poppy users fail to complete the onboarding questionnaire, blocking them from the remainder of the app's content.
The Tall Poppy dashboard header takes up a large amount of real estate and distracts users from beginning to complete tasks.
The "Secure Your Accounts" task uses a modal functionality to complete tasks, disrupting the application’s consistency.
The solution
Improve the overall usability of Tall Poppy’s web application:
Integrate a questionnaire within the rest of the online application so that users aren't blocked from the dashboard.
Improve the UI of the current header so that it does not take away from the user’s path to task completion, but rather serves as a mode encouraging users and tracking progress.
Develop a page-based solution for the "Secure Your Accounts" task to remain consistent with the remainder of the app's card task functionality.
Process
User Research & Synthesize
Sketch & Wireframe
UI Design & Prototype
Usability Test & Synthesize
Redesign & Dev Handoff
Role
Team Lead & UX/UI Designer
UX Research, UX Design, UI Design, Prototyping
Tools
Figma
Figma Prototyping
Usertesting.com
01. Discover
Internal kickoff call & project plan
To kick off the design challenge, I set up a Zoom call for our team to discuss the project scope, how we will be collaborating, and develop a project plan.
The project plan we developed broke down each step of the process required to design a great solution and assigned deadlines to each step to help keep us accountable.
02. Research
Client research
After reviewing the current online application, we complied a list of questions for the client regarding their existing application, constraints, brand guidelines, and past research.
Tall Poppy was able to share user testing data and user personas which aided in gaining a more holistic understanding of the brand, its users, and past test results.
Our research findings on UX best practices for headers, onboarding, and cards.
Secondary research
To better understand how we might create solutions to address Tall Poppy’s challenges, our team researched UX Best Practices for onboarding, headers, and card displays.
We chose to individually research all 3 types of best practices and share our key findings on a centralized Figma document so that every team member would have a thorough understanding of industry standards and possible solutions.
Impactful findings
Set user expectations & show how long users have left.
Show progress feedback.
Headers should not overload users.
Each card should only discuss one topic.
Do not include any inline links on cards.
03. Design
A few of our sketches created prior to Wireframing.
Sketches
After synthesizing and reviewing our research findings, we each brainstormed several paper wireframe sketches and added them to an annotated Figma file so we could collaborate on the best options for potential solutions.
Wireframes
We then met to discuss our sketches and narrowed down three potential iterations per feature to wireframe on Figma.
While wireframing, we began noting areas where accessibility could be improved, such as adjusting the paragraph line-height to 150% to increase readability. However, as we were using an existing design system and did not want to increase dev time, I decided to develop a list of client suggestions rather than re-designing existing design system components (a full list can be found in the reflection).
Client review
I then set up a Zoom meeting with Nadia, Tall Poppy’s UX Designer, to walk through our wireframes and discuss feedback on our iterations.
Feedback overview
Nadia loved our ideas, most of which had never crossed her mind as solutions, and was thankful to have a fresh set of eyes on Tall Poppy's application.
A few concerns she noted:
She didn't like the Quick Tip as a card and was open to removing it entirely (Header Solution 2).
She was concerned about the accessibility of the onboarding modal solution but wanted to see what user testing data demonstrates. (Onboarding Solution 1).
She didn't like the number of arrows and accordions and thought it could be overwhelming to the user (Card Solution 3).
UI screens
Next, we incorporated the client feedback into the UI screens, ensuring we referenced the existing Tall Poppy Design System so that our work could be seamlessly implemented into the application after handoff.
To keep us organized, I created a system to segment our components by iteration type or if they were global components. Almost all of our team members operate in entirely different time zones, so organization and annotation were fundamental to the team's success.
-
Onboarding Solution 1 | Progressive onboarding using modals.
-
Onboarding Solution 2 | In-dashboard onboarding.
-
Onboarding Solution 3 | Progressive onboarding using cards.
-
Card Solution 1 | Complete "Secure Your Accounts" tasks within the card using an accordion and carousel.
-
Card Solution 2 | Secure accounts individually (Gmail, Twitter, etc.) on a new page.
-
Card Solution 3 | Secure all accounts on a new page.
-
Header Solution 1 | Welcome message and progress tracker move to sidebar (sticky).
-
Header Solution 2 | Welcome message and progress tracker are at top of dashboard.
-
Header Solution 3 | Welcome message at top of dashboard. Progress tracker left of screen & sticky.
04. Test
Prototype
Once we organized all our components, another team member and I used Figma's prototyping tool in conjunction with interactive components to build prototypes for user testing.
Rather than generating and testing 9 separate flows, which we believed would create confusion and potentially skew our user testing, our team decided to make 3 prototyping flows. Each user would only test 1 flow containing 1 iteration of each feature.
User testing research plan
We then developed a user testing research plan to define our test goals, methodology, and participant characteristics prior to testing our prototype.
Tall Poppy emphasized the importance of accessibility, so we made the participant characteristics requirements between the ages of 46-64 to source less tech-savvy users with an online presence.
Our research questions
Which iterations are most favorable to the user and why?
What are some challenges older folks face while navigating through each route?
Which iterations do users find most accessible?
User testing script
As we created our user testing script, we aimed to make our user testing scripts as straightforward as possible to minimize possible confusion.
We added instructions at the beginning of the script explaining how to use Figma's prototyping feature and what to do if they got stuck. We also decided to add a Likert scale to our script to accumulate quantitative data that would assist in measuring the effectiveness of our solutions.
User testing
After intensive work in creating our prototypes and planning our user testing, we launched 3 separate unmoderated user tests on usertesting.com.
A few technological and user error challenges appeared here:
Two users that participated in our tests were unable to click on the URL of the prototype, negating the test and causing leading to two lost user tests. Due to this, we could only recruit three participants per user test rather than five.
A few users didn't understand how to access the correct flow and began reviewing a flow different than the one they were asked to review. While they eventually identified the correct flow, this caused user confusion and frustration.
Once all 9 users completed their user testing, we each reviewed the user tests, and annotated their behavior, and synthesized the data on a shared document.
User testing results overview
Header 1, Onboarding 3, and Card 3 iterations were the highest-scoring and most accessible to users.
Users in all 3 flows struggled with the onboarding process in different ways.
Users from every prototype flow navigated and completed the Card tasks easily.
3
Unmoderated tests
9
Users
46-64
Age range
15m 52s
Avg test duration
05. Redesign & Dev Handoff
Our team presented and gained approval on our proposed design solutions.
Redesign
After presenting our user testing results to the client and gaining approval on our suggested solution, we combined the 3 iterations that performed best in user testing into pixel-perfect desktop and mobile UI screens.
From our user testing findings, we discovered that a few users were unsure when all of the "Secure Your Accounts" tasks were complete. To improve the user experience and decrease confusion, we modified our final design and added a confirmation modal that appears after the user has completed all subtasks.
-
Dashboard – user has not started completing tasks (Note: Sidebar is sticky).
-
Dashboard – user has completed a few onboarding questions.
-
Dashboard overlay – user attempts to complete a task without first completing an onboarding question.
-
Secure your accounts page - not started.
-
Secure your accounts page - Gmail task expanded.
-
Secure your accounts page - Gmail task completed.
-
Secure your accounts overlay - user completes all of the Gmail tasks.
A glimpse into our development handoff process.
Dev handoff
To ensure the developer understood our design reasoning and the screen functionality, we provided detailed annotated final screens and components. Here, we also added spacing measurements to indicate the distance between objects on our screens.
06. Reflection
Reflection
Upon completing this project and reflecting on the work that we produced, I noticed that throughout the course of this project my UX design, prototyping, and leadership skills grew immensely. I was challenged to think of various iterations for features that struggled to provide an optimal user experience and create solutions that met both the user and business needs.
As with any project, looking back I realize there are things our group could have done differently:
Conducted moderated user testing rather than unmoderated user testing. Our test group had so many technical difficulties using usertesting.com in combination with Figma prototyping, and moderating the tests would have allowed us to mitigate most of these issues.
I also would have made the color of the confirmation and error modals different to distinguish between the two types of notifications, as I suspect that the uniform color may cause confusion for some users.
Additional design suggestions
As mentioned earlier, we used an existing Design System that we were not able to alter in its entirety.
To help Tall Poppy improve their existing design and its accessibility, I compiled a list of 7 suggestions (shown to the right) that were not addressed during my team's screen redesigns.