"Sensory Friendly Solutions helps people, businesses, and organizations find and adopt sensory-friendly solutions in daily life".
%20-%20Light.png)
%20-%20Light.png)
Sensory Friendly Solutions
Product Management l Product Design
Overview
Project
Role
Tools
Our project objective was to create user experiences for the launch of two new products. Our goal was to design the experience in three main clicks, adhering to SFS’s goal of maintaining the KISS (Keep, It, Simple, Stupid) principle.
SCRUM & Agile
21 Day Sprint
March 8th to March 29th
Ready for launch 🚀
Product Designer
Product Manager
Project Manager
Figma
Trello
Marvel
Product Team
As the inaugural product team for SFS, we worked small, cross-functionally, and collaboratively. SFS's product team currently consists of three members, the product manager, product designer, and project manager. Our team brought the product, marketing, executive teams together with the end-goal of strategizing, planning, and launching Sensory Friendly Solutions (ie. digital products).
Marina Radovanovic
Product Manager
A product manager spearheads the product lifecycle by using the intersection of Technology (the how/feasibility), Design (the what/desirability), and Business (the why/viability). At SFS, Marina foresaw the long-term product vision(s) of the product and worked with the available resources (KPIs, budget, teams, and available time) to do so.
Mandeep Rainal
Product Designer
A product designer is responsible for the user experience of a product, and takes the direction of business goals and objectives from the product manager. At SFS, Mandeep performed the primary and secondary research necessary to empathize with customers. Mandeep took the vision of the product and created clear user experiences and interfaces.
Dominique Soffee
Project Manager
A project manager helps teams organize, track, and execute work within a project including stakeholder management, small tasks, and overall progress. At SFS, Dominique foresaw the short-term project vision and worked with the members of the product team to make sure meetings are booked, notes are taken, tasks are completed, and implements necessary stakeholders and tools for project success.
Project Overview
Originally, the product team was focusing on the design of the “Sensory Friendly Finder”. After deliberation and a major pivot, our team was tasked with creating the user experience for B2B Sensory Friendly Training and Sensory Friendly Kits. We were tasked with creating the user experience for four main tasks.
Product 1: Sensory Friendly Digital Training
Task 1: Businesses Buy SFS Training: Businesses from four different industries (Dentistry, Performance Venues, Workplace, and Swimming) buy SFS training. Each industry starts at free 101 Training. When complete 101 training, they will advance to industry specific, paid, SFS training.
Task 2: Businesses Complete Training and Retrieves their SFS Training Badge: Once a business either four different industries (Dentistry, Performance Venues, Workplace, and Swimming) complete their training, they will achieve an industry specific training badge.
Product 2: Sensory Friendly Solutions Kits
Task 1: Businesses Buy SFS Kits: Any Business can buy Sensory Friendly Kits. This is a general kit for any business. Future kits will have items included that are tailored towards each of the four industries listed.
Task 2: Businesses Buy Kits and Retrieves their SFS Kits Badge: A business that buys a bulk order of Sensory Friendly Kits will receive a badge. This badge can be displayed on their website or social media to inform their customers that they have Kits readily available.
External Stakeholders
Sensory Friendly Solutions has many external and internal stakeholders that assisted the MVP launch of the training and kits. When our product team arrived, Sensory Friendly Solutions already completed the customer discovery phases. Our team had to figure out how Sensory Friendly customers will navigate to each digital product on the SFS website. My job was to figure out the logistics and strategy by taking the whole picture into account. Since there was no product team before, I had to make sure the puzzle pieces fit together. For the first two weeks, I dug for information that could influence our User Experience in order to take it back to my team.
Duke Creative Collective
External Stakeholder
Duke Creative Collective is responsible for the development and look of the SFS training.
LearnDash
External Stakeholder
LearnDash is a LMS (Learning Management System) plugin for WordPress.
FDMT
External Stakeholder
FDMT is responsible for the purchases and distribution of the kits
Red Thread Innovations
External Stakeholder
Ran discovery and design thinking workshops prior to product team arrival.
Product Overview
🧑🏻💻 What We Know
Based on existing research and existing user testing, Sensory Friendly Solutions already knew three main facts about Sensory Friendly business audience.
⛔️ They do not want to pay us to advertise or to reach out to new consumers.
⛔️ They do not want to maintain a business listing on yet another platform.
✅ They want easy, low-cost ways to become sensory-friendly.
🎯 Our Objective
With the budget of time, we took a very scrappy, MVP, and KISS (Keep, It, Simple, Stupid) principle, approach to our design. Our approach insists on taking existing copy and images and shuffling it around with a goal to design the website to convert a user to a customer. Ultimately, during our time at SFS, the website was transforming the SFS website from an informational website to a website hosting actual products. It was imperative to provide designs and recommendations so a user can seamlessly navigate to each of these products.
Right now, we believe that the current SFS website could be easier to navigate and does not follow the KISS or 3-click principle, our aim was to get it to this point.
🌎 A Universal Approach
We took a universal approach to our design. We designed every call to action and page to be replicated for additions of businesses and consumers in the future, which maintains seamless and orderly navigation. We also designed with accessibility in mind, making minor changes to hopefully increase the accessibility score of the SFS website. We designed so any addition in the future can be added with haste (since SFS is an agile startup).
🧠 Understanding Tradeoffs
We wanted the SFS kits and training to be the main touchpoints for users when they enter the sensory-friendly website. However, we had to work within our limitations of WordPress, and our external stakeholders, FDMT & LearnDash.
Step 1: User Personas
🛠 Word
🎯 Understand the users
🗓 Days 1-2 of sprint
Since my product team joined later in the product lifecycle, it was important to understand the customers of the Kits and Training, and existing user research that has already been completed. After defining our objectives, I implemented a collaborative exercise with the marketing team to create very rough and scrappy user personas.
Performance Venues
Dentistry
General Business
Swimming (Pools)
Step 2: Content Inventory
🛠 Excel, SFS Website
🎯 Understand existing site
🗓 Days 3-5 of sprint
With the short amount of time we had, I decided to do a quick content audit of the website to understand the breadth and depth of existing information.
With this exercise, we were able to identify information that could be consistently grouped together to create less distractions from a customer looking to buy. It was also clear to us that there was a lot of information on the SFS website that needed to be reorganized, added, or removed due to redundancy.
We also found information that was readily available to us, something that we would not have known without this exercise. For example, the industry landing pages were already created, but were listed in the footer. It was important to bring this information to the forefront so customers can easily find it.
Step 3: User Flows
🛠 Figma
🎯 Understand touchpoints
🗓 Days 6-10 of sprint
Our third step was taking the information available from the Content Inventory, and drafting several user flows for the different user touchpoints and tasks involved in the training and kits user experience.
User Flow 1.0: Entire Kits and Badges Experience
User Flow 2.0: User Completes Training and Gets Badge
User Flow 3.0: User Buys Kits and Gets Badge
Step 4: Low-Fidelity Wireframes, Annotations, Rationale
🛠 Figma
🎯 Communicate/Display Design
🗓 Days 11-15 of sprint
Our fourth step was drafting low-fidelity wireframes to inform our user flows above. Due to time limitations, we chose to design very low-fidelity wireframes with annotations to help our website builder implement our suggestions. The design includes a reorganization of the current content on the website, to show users a more intuitive and sensory-friendly experience. We split up our annotations that match with the red locations in three different colours to directly tell the executive team what they need ready for the launch.
Home
Get
Kits Page
Kits
Badge Page
Get
Training Page
Matches with the "Kits Badge" Page
Example Annotations
Industry Specific
Training Page
Step 5: Prototype, Roadmap, & Prepare for Launch
🛠 Marvel
🎯 Communicate/Display Design
🗓 Day 15-17 of sprint
Our last step included a clickable prototype and directional video (unlisted/private on YouTube) showcasing the user flow of purchasing kits and training and then subsequently retrieving their badges. Since then, there have been some changes to the user flow of the website experience and the landing page designs. This prototype represents a general overview of a simplified user experience. View our prototype walkthrough.
We also ran through our designs with the executive team and had very few iterations to makes. The main iteration was with our Kits partners, FDMT, as some buying logistics weren't clear. However, the problem was solved and reflected in the final user exerience.
Step 6: Conclusion
♿️ Accessibility
1) Width to Width Text: Our main suggestion was to justify the text. All text on the SFS website should reach a benchmark of 9-12 words and 66 characters on each line. The existing website has width to width text that far exceeds user experience, readability, and common accessibility standards, which could cause users the inability to focus. Right now, the first sentence on SFS contains 160 characters on a single line, which could be a barrier to stopping a user from reading on.
2) User’s Eyes Typically Follow an “F” Shape: Our second concern is making the text and CTA's more digestible on our new homepage design. In UX, a common theme found in heatmaps (as you may see if you download HotJar) is that a user's eyes naturally follow an “F” pattern. Although there are many patterns based on user’s pain-points, motivations, and goals on a website, the average pattern lands in an “F” when reading text. In comparison to the new design and existing website, ask yourself, “Can a user can follow with an “F” pattern when looking at our existing website homepage”?
3) Information Overload and Too Many Choices: “More options typically lead to fewer actions”. Information overload in UX is defined as the excess of information available to a person aiming to complete a task or make a decision. Website users won’t be able to process what you are asking them if you confront them with too many options or actions.
It was a goal for the SFS for a user to get to the end of a task in 3 clicks or less. Right now, the SFS website could use some major improvements by taking away information, and grouping larger actions together. For example, “resources, blogs, and podcasts” in the navigation. Do these really need to be separated? Can a blog and podcast be categorized under resources? We took the time to audit the website and create larger actions with minimized decisions by reducing the number of main categories and taking a simplistic and minimalistic approach to our navigation and design. We also made pages easy to replicate for the sake of consistency.
Hero Space After
After
Text in the middle as soon as a user lands on the website.
First line of text is 160 characters
We fleshed text to the left, brought some of the text down, added two CTAs
Created more "space" by minimizing text and adding relevant CTAs. Text is fleshed left. CTAs are repeated for both B2B and B2C audiences.
Text, Text, and More Text. We moved this section down to the footer
Grouped resouces, podcasts, and blogs into one category, and added menu items instead of preview blogs
Brought search from footer to header
Wanted to include "real and diverse" photos to the brand and hero space instead of just a blue box.
🚀 Next Steps for Launch
These are the main next steps that are needed and required for the first launch and would be done if we had more time.
1) Link WordPress site to HotJar for Hands-Off User Testing: Testing the user experience on the website will be valuable for future product iterations. Hotjar is an affordable and anecdotal user testing tool. It’s a powerful tool that reveals the online behavior of your users. You are able to view key user-touchpoints throughout the website using a heat map. By combining both Analysis and Feedback tools, Hotjar gives you the 'big picture' of how to improve your site's user experience and performance/conversion rates. There is a free version and paid versions, but is recommended if there is not going to be a product team full-time to test.
2) Mobile Annotations: Decide what from the web design needs to be stacked for a user-friendly mobile experience. More opportunity here to integrate different product features related to finding businesses.
3) Roadmap the Evolution of the Two Products: Two future additions to both Kits and Badges would be reviews and testimonials. Road-mapping how this would be included and collected is essential. Our suggestions for this include a SFS specific login and dashboard for B2B and B2C, or implementing an external review site as a plugin.
4) Industry Landing Page Guide: Different industry landing pages need different information mapped out in a standardized way for ease of duplication and additions. We need to define what industry-specific information is needed to include for businesses, to help them make the decision to purchase training from SFS.
5) Gather Competitor Information: Learn to stand out/create industry standard from direct competitors such as KultureCity, that offer training and certifications, and sensory bags to their users. This information can inform future design iterations.
🚫 Limitations
The product and design process was dependent on various technical and business considerations. For one, the technical scope of the team was limited to frontend web development, and utilized external stakeholders for software expertise and designing more complex touchpoints, such as the purchase and training dashboard pages. As such, the current design was created based on the ongoing communication between stakeholders on features that are still being built out.
Further, the product timeline proposed the launch of an MVP (minimum viable product) by April 2022. Keeping this deadline in mind, we fast-tracked the user research and testing in the early phase of the design, based on validations made in previous research and design products. We were able to draft user personas that were informative but required more in-depth user insights that may be better collected through context-specific interviews, for instance from industry-based users.
Although recommended by RTI’s consulting team in the discovery phase, the team did not have the scope to define a beachhead and create an atomic network, or test the design with consumers, instead we are progressing to the launch stage first then we will conduct consumer testing.
Because of the nature of early design work and having a fast turnover rate, the team experienced many directional product changes that pivoted the project, and ultimately helped land us on the same page with what was feasible for our team and external stakeholders.
🏁 Expectations
1) Successful launch of customer-validated MVP: This is the main expectation for this design, we are to complete the following user touchpoints and have minimum viable products accessible and developed for consumers/businesses:
-
Training and Learn Dash login experience
-
Kit purchase and badges experience
2) Establish key Product Metrics: Define and determine forms of customer validation in the user experience, to help measure the success of the product. Performance indicators may include:
-
Number of monthly conversions
-
MoM Growth