The Enlightened Shadow.

An online behavior-management toolkit featured through

The Learning Seeds website.

Project

Overview

Learning Seeds was looking to take their paper version of The Enlightened Shadow program and move it from high-touch to low-touch on a digital platform. Successfully designing this feature would mean taking the bottleneck of the program away and creating a more autonomous experience for those utilizing the program. The new found autonomy would provide Erica Key, founder and creator of Learning Seeds and The Enlightened shadow program the opportunity to focus on adding new techniques and solutions to better serve those in need.

Problem Statement:

Parents and professionals need an efficient way to access trusted material to help close the development gap for children with social and behavioral challenges because the current methods of gathering information are time consuming, and limit the number of children that can be helped.

Proposed Solution:

We believe that by developing a digital platform that supports access to The Enlightened Shadow content and collaborative communication, we will make it easier for parents and professionals to more autonomously address the needs of their students.

Role:

I worked on a team of 4 and contributed to each step of the process. Including but not limited to, research, design, wireframing, testing and delivery.

Client: Tools: Time:

Learning Seeds consisting Sketch 3 weeks

of Erica and Jason Key InVision

Axure

Project Process

Discovery:

On the first day, as a team, we sat down and spoke with Erica and Jason Key. We asked many questions and collected many useful documents so that we were able to understand our client and the goal they had.

Digitizing:

Wireframes were created in Sketch based off the pencil designs. These gray-scale boxes and lines allowed us to move quickly and perform Usability tests to filter the design.

User Research:

After drafting a consent form, a screener was sent out to filter potential target users. Questions were created that would be best to better understand the target user and their struggles.

Testing:

Usability tests were performed with 3 users to flesh out any issues. we took the feedback from these tests to influence the hi-fi prototypes.

Analysis:

With the interviews were all complete we turned to affinity mapping to synthesize the data and focus on the common pain points.

Design:

We worked as a team in 2 design studios to pencil sketch as many potential design ideas as possible. We decided on the best potential concepts and moved forward to digitizing.

Delivery:

Once the Usability tests were complete they gave us the insight needed to finalize our hi-fi prototype and deliver the finalized version to the Stakeholders.

Discovery

To kickoff the project, the team had a preliminary meeting with Erica and Jason Key, the stakeholders of our project. Although we spent time in person with Erica and Jason, learning about their program and what they wanted to achieve we also spent countless hours sifting through the many documents they shared with us.

Some key takeaways from the discovery phase that would influence our design were:

Solve social/behavioral challenges
A 'put time-in model'
Move from high-touch to low-touch
Management of materials
Scale to grow as program expands
Access to many strategies at once
Usable for anyone
Backend data collection to enhance frontend experience

With These and many other factors in front of us, we had a solid understanding of what our Stakeholders needed from us. Now it was time for us to discover who the target user was and what they needed out of our design.

User Research

As a team we knew that it would be pertinent to collect as many interviews as possible to fully grasp the challenge we were designing for. While my teammates worked on the many other parts of beginning the project, I focused on curating questions for the interviews that would truly dig deep and enable the interviewees to easily elaborate and provide details of their daily struggles. The struggles that I intended the questions to hone in on related to how they currently interact with children, the behaviors that they try to teach, where and how they obtain methods as well as who they collaborate with. I performed 2 of the 7 interviews that the team conducted.

In addition to researching the target user, we also chose to research potential online competition. My teammates and I each took responsibility for conducting a competitive analysis. I handled researching and documenting TheAutismHelper.org. Per our Stakeholders recommendations I also documented the on-boarding for Hubspot Knowledge Space and the Temi mobile app, as it was believe their on-boarding was smooth and simple and ideal concepts to influence our design.

A card sort and keyword test were also devised to help us clarify how target users would potential search or browse for tips. We needed to understand the terms they would use so we could better guide our design and our stakeholders when developing the program. I helped in creating the keyword test, a set of scenarios that the target user would provide terms and phrases they associated with each scenario. With the research complete we moved to synthesizing all of the data we collected.

Analysis

Meanwhile, my Customer Journey Map was really taking off. It showcased the path a user would take leading up to discovering the Learning Seeds website through their experience in The Enlightened Shadows Toolkit we were creating. The journey map captured the feelings and thoughts of the user as they would experience the product therefore providing insights to both the stakeholders and our team as we designed.

Design

Beginning with User flows, the team took some time to whiteboard our concepts for what the path a user would take would look like. Once we finished and shared ideas, we realized each flow was only partially complete but when combined created a solid path with beginning middle and end. The user flow included a login-process, a feed, a messaging center and the solution grid.

A site map was sketched out representing the current Learning Seeds website and where our new Enlightened Shadows toolkit would go. Taking the flow concepts, we performed a couple rounds of design studios to crank out unique design ideas in as many ways as possible. Working fast with pencil and paper the team generated many ideations for building out. In the end we felt confident that we had a design ready for wireframing.

Digitizing

Using Sketch we built basic wireframes in lo-fi gray-scale. My contribution to the design was the login process. How the user would first enter The Enlightened Shadows toolkit, choose an account type, sign-in/sign-up, select an existing child or create a new child profile, fill in a brief questionnaire so the toolkit can build a basic feed and generate tips immediately upon entering.

My teammates created the feed that would house articles, videos and podcasts related to the various behavioral challenges. From here the user would be able to find new tips related to the child’s needs, have access to the tip sheets, access to the messenger as well as a resources library to answer any questions they may have on how the method works, or how any of the individual tips may be applied. The messenger portion was built out to allow all of the individuals involved with the child’s behavior management the freedom to communicate easily with access to references that they actively use so they can update and inform in real-time. The messenger allows for sharing of documents and other useful articles, pictures or videos. The tip sheet is the heart and soul of the entire Enlightened Shadows methodology. Using the current paper grid, a digital one was created, allowing for the user to update and edit their own tip sheet while viewing the tip sheets generated by the other individuals involved with the child’s behavior management. The tip sheet design has a way of providing new tips, following up on old tips and searching for related tips.

Included but not built out were the favorites section that would collect and organize the articles, podcasts and videos that the user found most helpful, or wanted to save to access at a later time. The resources section was also not built out but would hold The Enlightened Shadows solution guide as well as any helpful information the user may need to be able to fully understand and use the toolkit. The help section was also not built out, but upon clicking would place information dots around the page, whereupon the user could hover their mouse to receive a pop-up of explanation of specific page features, tools or terms. Once the wireframes were complete we uploaded the screens into InVision and placed hotspots so we could perform usability tests.

Testing

We chose to upload our Sketch wireframes into InVision and add hot-spots so the screens would flow like a functional website. The team then conducted 3 usability tests on the wireframes we designed. The tests provided some nice feedback that we would be able to use in our hi-fi prototypes. These insights included but are not limited to:

Unclear whose feed they were navigating.
Confused by terms, "avoidance, proximity, tolerance, etc."
Wants a box to appear when hovering over a level to remind user what they mean.
Did not notice the "x" next to 'The Helper" to remove the tip.

The feedback we received from the usability tests enabled us to hone our design in a way that would make the hi-fi prototype smooth and easy to use, more intuitive and more efficient.

Delivery

The hi-fi prototype was built through Sketch. We added color, more clear taxonomy, pictures and an all around more real-life feel. Based on the usability tests on the lo-fi wireframes, I knew that I needed to make a few adjustments to my hi-fi version. I added in a statement on the profile setup page to inform the user that if they are not familiar enough with the child to accurately fill out the questionnaire that they can skip ahead to the feed and update the questions at a later time. Based on feedback from Erica on the Lo-Fi prototypes we changed the flow from following the teacher to following the paraprofessional through their path in the Toolkit. I used a grid and digital ruler to align every detail perfectly. I removed the “back” button and added “my account” and “sign out” button in its place. I changed “edit account” to “edit profile" and moved it to the bottom center of the page. I increased the student profiles to 30 available for the teacher flow while maintaining the 5 plus add new student for the paraprofessional flow. I changed the upload photo square box to a round one since the rest of the photos on the prototype were all circular. I added a skip button as well for those that wanted to answer the profile building questions later.

Adjustments to the rest of the screens were made as well. Global changes that were made are the redesign of the learning seeds logo, moving the top navigation to center of the page instead of right aligned. Adding a resource and help icon to the left navigation, changing the favorites icon from a heart to thumbs up and removing the color box around “your toolkit”.

Takeaways

The main takeaways from this project are vast. I learned how to work with a real client, and what kind of expectations there would be. Working for a stakeholder and understanding what they're trying to accomplish and where I fit in helping to make that happen; while also understanding the users needs and doing my best to design for both. Creating an SOW and moving forward while delivering on time each agreed upon deliverable. How to work in an efficient manner to ensure that I met deadlines. I further honed my skills of working on a team, and the intricacies that go along with managing different personality types, ideas and work methodologies.