Brainstorming with Stakeholders
Based on the analytics provided by Heads Up Guys admin, we decided the best way to increase user engagement and education was by having interactive educational modules which educate men about mental health.
We began our design process by identifying the required features for the module builder.
We began our design process by identifying the required features for the module builder.
Ideating within Developer Constraints
Our original idea for the Module builder was to create a slideshow experience similar to Google Jamboard where users can design slides by drag + dropping elements such as text and images onto slides.
However, after consulting with the Project Lead, we received the following feedback:
🧑🏻💻
Developer Constraint
It is not technically feasible to implement drag + drop functionality.
💻
Responsiveness
It is not possible to create responsive slides and give HUG admin freedom over slide layout.
After receiving this feedback from developers we asked ourselves:
How can users add elements to a slide without drag + drop functionality? And how can we create responsive slides?
Since we were back to square one and unfamiliar with the product space we conducted market research to learn about how to better design this experience.
Market Research
We were specifically interested in finding alternatives to drag + drop in a presentation workspace. Some products we looked at were Powerpoint, Canva, and Copysmith AI.
🔑 Key findings:
- Split-screen editing formats are used in with drag + drop.
- Pre-made layouts are used to make editing slides faster for users.
Prototyping
Based on our research, our plan was to create a split-screen tool that uses pre-made layouts to give HUG admin creative freedom over the module slides.
Our job was to create a tool that enables HUG admin to create, modify, and delete education modules for their users.
After conducting scoping meetings with the HUG admin, we concluded that the best way for HUG to provide more online resources is by creating a digital “Toolkit” for users that provides educational resources to learn more about different mental health problems or skills.
Our job was to design a Tool builder for HUG admin so that they can create tools for their end-users.
Understanding Requirements
The purpose of the tool page is to give end users an overview of the mental health problem or skill they wish to learn more about.
When creating the tool page, our users have a lot of required information they need to input into the tool builder:
User Flow
To map out how each required information will fit into the designs we created a user flow:
Iteration #1: Fulfilling Requirements
Since are so many fields for the HUG admin to fill out, we decided to design the tool builder as a form to create an organized and familiar experience for HUG admin.
Our goal for the first iteration was to fit the large number of requirements listed above.
Internal Stakeholder Feedback
We gathered early feedback by presenting the first iteration designs to our two PMs. Here’s what they had to say:
😔
Too much information
There were a lot of fields to fill out which felt quite overwhelming and crowded.
😔
No preview = Low confidence
Since there is no preview for how this page will look, there is an element of uncertainty when publishing the tool page.
Iteration #:2 Reducing Information Overload and Building Confidence
Design Decisions
Once again, we presented our designs internally, to the PMs and the technical project lead. We convinced them of the design changes with the following design decisions:
1. Separate Tool Page builder and Self Check Builder
We decided to separate the self-check builder from the rest of the tool builder to reduce information overload.
2. Built-in Preview to build user confidence
We created a built-in preview by arranging the fields into the same format as they appear to end-users on the Tool page.
Iteration #3: Creating flexibility in the Self-check Builder
For the third iteration of our designs, our goal was to make the self-check builder more flexible by allowing users to rearrange the order of questions. A technical constraint we had to keep in mind when designing was: no drag + drop.
Conducting User Feedback to Finalize Designs
Because each iteration was pretty balanced in pros and cons, we decided to conduct user testing with HUG admin to see which solution fits best with their mental model.
To test, we presented each design to the user and prompted them to walk through how they would use each prototype to re-arrange question order.
