Wellness Spot - New Website Design with Front-End Development

Case Study

Overview:

Wellness Spot - A Self-Care and Wellness Program for Bootcamp Participants. A New Website Design.

Problem:

Bootcamp students add a tremendous amount of intense stress to their lives, and many end up feeling overwhelmed, not fully connected to their cohort, and alone in the journey. There seems to be a missing piece from the bootcamp experience.

Solution:

A self-care and wellness program included in the bootcamp experience to assist bootcamp participants in navigating the huge life change process, intense stress, and overwhelm that can come with a bootcamp program. All with convenient and simple digital access.

Role:

UX/UI Designer on a team of four. My areas of contribution included: user research - survey development, user interviews - data analysis, user story development, ideation, wireframing, prototyping. And, front-end development (HTML, CSS, JavaScript), which was my largest solo contribution.

Background: Why Wellness Spot?

Our bootcamp cohort was in the home stretch. You could see the fatigue taking over people's demeanors. In the beginning, we were all energized, excited for what lay ahead, and reminded by our instructional staff that we had an intense 6 months ahead of us - take care of yourselves, set-up good habits from the beginning, etc...These pep talks dwindled over time. Enter in a new Student Success Manager, Q. Q was energetic, abundantly positive, and reiterated how far we had come and how close we were to the the finish line.

Q joined in a class session to introduce himself, remind us he was there for any support we needed, and asking us "What do you need these last weeks?" The idea of self-care and our wellness crept back into the conversation. With the space opened up, people started stepping up and admitting they were OVERWHELMED and despite group work, felt a bit alone. Somedays it was hard to know where to start. And many had forgotten we even had a Student Success Manager. People indicated that a support factor felt like it was missing from the program.

Q wanted to address this - we weren't the only cohort he had heard this from. Q got a few people to meet with him outside of class to discuss what would be helpful and how could the program offer better support for self-care and overall wellness to participants. The next day he added a Wellness channel to our cohort's Slack and starting posting reminders about getting some self-care and mini-breaks into one's day. He posted photos and videos showing what he was doing for himself. People started following suite - posting and sharing things that worked for them in stressful times. People started saying how they had learned more about their classmates and felt more connected to them in the first week alone, than in the past four months.

This conversation led to the idea of creating a user interface for a self-care and wellness program for participants in the boot camp program. I chose to work on this project because the area of overall wellness, especially cognitive and emotional wellness, are areas I am passionate about within healthcare itself. And an area as a society we still need to do much better in.

Phase I - Empathize

User Research:

After our group developed a proto-persona, we started our journey by compiling a survery for current and alumni bootcamp participants to gather quantitative data specific to the issue we saw and wanted to provide a solution for.

The survery was sent out to our current cohort and to alumni via collaboration with Q, our Student Success Manager, who was able to provide the survey link to other cohorts and alumni.

Survery Says:

The quantitative results showed 81.6% of our fifty-nine respondents felt an increase in their stress during their boot camp.

The top two stressors reported were Time and Homework, which together accounted for 53% of the top five stressors.

And, 88% of respondents felt a wellness/self-care program would be beneficial.

From the surveys received, the team interviewed five current and former bootcamp participants to go more indepth about their bootcamp experience, did they think a wellness program within the bootcamp curriculum would be beneficial, and what types of resources do they think would be valuable.

Phase II - Define

Affinity Mapping:

An affinity mapping process was used to analyze and find trends in the qualitative data from the user interviews. This helped to further understand bootcamp participants, their stressors, what are activites and practices they go to for self-care and wellness, and what they would find helpful in a program.

This process not only helped the team to build further empathy and solidify our user persona Jacob, but also to develop ideas for features of the program later in the ideation process.

Storyboard:

A storyboard was created to help demonstrate Jacob's experience in bootcamp, juggling his many responsibilities, and to help stakeholders build empathy for Jacob and other bootcamp participants like him.

Phase III - Ideate

Feature Prioritization:

We began the ideation process with an 'I Like, I Wish, What If' exercise to generate ideas for program features that could be beneficial for bootcamp participants such as Jacob. Considering that a self-care and wellness program did not yet exist, not only were we seeking to develop an intuitive and clean interface, but we were also gathering data for what should be addressed within a program.

Top Features Emerging From Research:

  • A mental health survey/assessment. Initial and regular intervals throughout program, so participants have objective data to assess their wellness state.
  • Curated resources on common stressors identified, so participants have easy access increasing chances they will use resources.
  • Mentorship program - participants paired with a bootcamp alumni.
  • Curated, searchable list for professional support services in a participant's area.
  • Forum for connecting with peers - one on one support, study groups, support groups following graduation.
  • An avenue for participant contributions to the program resources.

Wireframing:

Wireframe sketches were completed for initial redesign ideas. Through a discussion by team members of the proposed sketches and research findings, and the feature prioritization work, it was determined what layout and features would be included in initial digital wireframes and lo-fi prototypes.


Ideas were generated regarding how participants and alumni would access the site from within Boot Camp Spot, the learning management system used by bootcamp participants.

Ideas for the actual program site interface were also wireframed.

All team members inidividually sketched and proposed ideas. Through a discussion of the proposed sketches and how they supported research findings, and the feature prioritization work, it was determined what layout and features would be included in initial digital wireframes and lo-fi prototypes.

Ultimately it was decided that Wellness Spot should be a free-standing site outside of the Boot Camp Spot application, as the program will continue to be available for alumni, and alumni do eventually lose access to the Boot Camp Spot site.

Phase IV - Test

Lo-Fi Testing:

User testing feedback on our lo-fi prototype was reviewed and areas where iterations would provide a more positive experience for Jacob were identified.

Feedback included positives such as:

  • Enjoyed the minimalist design
  • Really liked the wellness assessment feature
  • Main features easy to access in the sidebar navigation options

Feedback also provided important changes or additions such as:

  • Search icon was missing from the search bar in the global navigation
  • User account icon should be larger and located in different spot to stand out better
  • Some content needed clarification, such as dropdown menus and hierarchy of items
  • Users expected a landing page for the Track My Wellness option, which originally went directly to an assessment

Iteration and Hi-Fi Prototype:

Following the user testing analysis, iterations were made to the digital wireframes then the prototype was upgraded to hi-fidelity.

Key changes based on user testing included:

  • Revised content options on the sidebar navigation
  • Revised language for navigation options for more clarity of content
  • Designed a Wellness Dashboard as a landing page for the Track My Wellness menu option, which allowed users to take a new wellness assessment, review their past results and trends and access their saved resources

Hi-fi user testing provided suggestions of making the iconography for the sidebar navigation tiles larger and darker and sub-menus in the global navigation should open to the right of the main dropdowns.

Front End Development

For this project, the homepage along with two additional pages were developed in GitHub. For the initial phase of development the Wellness Dashboard page and Wellness Assessment page were developed. The site was coded using HTML, CSS, and JavaScript. Bootstrap was utilized for the global navigation menu, and modified to reflect the Wellness Spot brand.

The Wellness Spot site developed for this project can be viewed here: Wellness Spot

Future Iterations:

The full scope of ideas/features imagined for Wellness Spot could not be developed in the initial phase of this project due to time contraints. Additional features to be considered for future iterative development cycles include:

  • Move to responsive mobile design. Initial development was just for desktop as majority of bootcamp and participants noted they access Boot Camp Spot strictly from their desktop/laptop
  • Develop a functioning fillable form for wellness assessment. Additional time for coding was needed for this level of development in the first phase of the project
  • Development of the curated resources pages
  • Search feature for professional support services
  • Devlopment of mentorship application form
  • Mobile app development for Wellness Spot to increase the accessibility of the support program for participants
  • Feature for participant curated resources to be submitted for inclusion on site
  • Development of forum for participants to connect with one another