Activity Wizard
T.ux (teach UX) is an education software designed to help
facilitate the learning of UX material.
Their philosophy is to help users understand where they are at in
their UX learning, figure out what they don't know,
and be able to fill in the gaps of their knowledge.
The Challenge
t.UX began to grow rapidly, which caused a back log of activities to be built.
While designers were finding ways to increase productivity, engineers struggled to keep up with the new activities to develop.
Designers were spending at least 4x longer than expected to design and build an activity- they also needed to create the content that would be housed in each activity.
Engineers were spending at least 6x longer than expected when coding the activities, on top of the task of managing the content within these activities.
The Process
Business Goals
After receiving the brief, we had questions like:
“What platforms within t.UX will this product benefit?” and “What are your business goals ”
The main business goals included:
To find a solution that allows Designers to build activities independent of engineering resources.
Enable Designers to counterbalance engineering resources by building activities independently, allowing engineers to focus on more custom functionality.
Eliminate the need for Engineering resources to be wasted on proofing and copy.
Allow Content Creators to focus on content instead of pushing pixels in Figma.
User Research
We discovered that the user of this product would ultimately be the designers and content creators.
We conducted user research by interviewing the Design Team within t.ux.
We discovered some of their pain points included:
Pushing pixels around in Figma to create the design took an excessive amount of time, demanding they check for inconsistencies between each designer.
The design process was redundant and lacked structure.
They were unable to visualize the final product within the design process, leaving room for error and missing the user’s goals.
The Solution
After reviewing the insights discovered in our user interviews, Caitlin and I put our heads together and asked ourselves:
How can we solve this time-wasting problem and help both groups (design and development teams) by providing an automated method to designing an activity?
How can we add value to our users and provide all of the tools they would need for this process, eliminating the need to reference past designs and eliminating the inconsistencies?
Through user testing and insights, we discovered that the best solution for our client was to design a wizard, providing one single platform that includes all the tools needed to build an activity so that any designer can seamlessly build an activity only once and in half amount of time it originally took.
Our goal was not to reinvent the wheel but to build upon it. We first sought out how others were designing builders, otherwise known as wizards.
Competitive Research
Through our competitive analysis, we found inspiration from wizards that kept the design structure simple, provided intuitive interactive design. Some even provided tooltips to help guide their user. One of our biggest inspirations was Pinterest because it was an online platform that gave users the ability to save inspiration, create mood boards, and many more tools while remaining in one single platform.
User Flow
We created a user flow to better understand the journey our users will take within the activity wizard. This later helped us focus on the priority features, instances we would need, instead of what we could have or would like to have.
Prototype
Design
My primary focus was to design the dashboard, interactive modals, and add a content page button.
Dashboard
We went through several different iterations of the dashboard page before our final design.
I took findings from our competitive analysis and combined the format of both Pinterest’s dashboard and our original ideations of t.UX’s user dashboard.
We simplified the user’s ability to create a topic by designing it to mirror the process of creating activities-allowing for recognition over recall.
The user must create a topic before they can build an activity. This provides error prevention for both novice designers and experienced designers on the team by setting the standard of how each activity must be formatted.
Modals
We incorporated modals into our Activity Wizard based on insights through research.
The modal allowed us to ask the user for information needed (such as topic name, activity name, etc.) while also allowing us to significantly lessen the user’s work or effort, harmoniously adding value to the user and integrating the business’s goals.
“Delete” button
While the premise of this button seems simple, we prioritized adding value for the user by including a tooltip for the button, informing them that when they clicked on the button they were actually deleting an item (in this case, the “Intro to UI Patterns” page)
Icons are not always intuitive, so it is imperative to provide error prevention for our users.
We did this by adding a tooltip to the button that was viewable on hover state, communicating the purpose and action of the button.
Takeaways and next steps
Next steps:
Adding a “Save as Draft” feature
Considering alternative methods to modals for selecting the Question or Content pages
Updating the Question Wizard so that all text input boxes are visible at all times (rather than selecting “add justification”)
Testing the current Activity Wizard on our users to get more input
Collaboration with team members
While both Caitlin and I delegated different design work to one another, we also got the opportunity to collaborate on many features and design decisions on the ultimate product. We found our harmonious flow of being able to collaborate with one another, while also focusing on our individual responsibilities. We strengthened our problem-solving skills, learned how to communicate more efficiently with one another, and celebrated our success in the resolutions. I will always cherish this experience and am grateful for the opportunity of working on this project with each other.
We also gained experience collaborating with our product manager and engineers. It was fascinating and extremely useful to be able to discuss feature ideations and design decisions with engineers. The engineers provided us with insight on how certain design features would perform in the live product, as well as helped us make decisions on which features would ultimately make the cut in the final product.