Anew Behavioral Health

Connecting those in need of well-being support with a compassionate company.

Project Overview

Problem

Anew Behavioral Health is an outpatient behavioral health provider that helps individuals facing mental health and substance use disorders. With the increasing importance of online accessibility to mental health resources, Anew needed a way to better serve their clients and community.

Outcome

  • Cutting-edge website and homepage video deliver a delightful user experience
  • Addressed the unique needs of three user personas
  • Showcased the organization's commitment to mental health
  • Achieved pixel-perfect illustration and animation

My Role

  • UX Design
  • Research
  • UI Design
  • Interaction Design
  • Character Design
  • Animation
  • Developer Handoff
  • Project Management

Understanding

We worked with Anew to ensure we had a good understanding of three diverse users that may visit the site. During this time, we held an empathy session, crafted three user personas, developed user flows, and created site maps for the front end and admin panel.

No items found.

Developing the Video

Users needed to feel comfortable and excited about seeking help from Anew. We crafted a narrative featuring a main character that effectively depicted the challenges and difficulties experienced by our user, "Insured Irma." My team used an affinity diagram to begin our character design process, a mood board to shape the visuals, sketching for form and features, and After Effects for the final animation.

No items found.

We established a structured product backlog to ensure timely completion of each component of the product development cycle. Guided by Design Thinking principles, we prioritized the creation of a Minimum Viable Product (MVP) to serve as a prototype for usability testing. Throughout the entire process, we maintained a biweekly meeting cadence with the client to showcase newly implemented features and gather their valuable feedback. We also collaborated with the client to define and optimize the Inspection Process Flow, recognizing the critical importance of this feature in their service delivery model.

Modal window mockups for adding an account (customer, building or location) to the application.

As my design skills improved, I created a Youtube channel for my students to practice their Phonics words. Although I was the Math teacher, my passion for helping my students learn motivated me to create this short video series! At the time, I had no idea in the year 2020, I would benefit greatly from the time and effort I put it into drawing, animating, voicing-over, and producing these videos.

Final storyboard of the animated video used on the homepage featuring a small acorn that grows into a tree after finding the right care for their struggles with mental health

The ultimate storyboard emerged after numerous iterations, with a commitment to crafting a compelling narrative that resonated with users and kept them engaged. Designing through storytelling, illustration, and sketching has been an enjoyable aspect of this project.

From day one we began discussing the importance of storytelling and a designer's portfolio. I held four workshops to brainstorm and discuss specific parts of a UX/UI portfolio using Figjam to help guide my learners with their own thought process. This collaborative style of learning helped to encourage and motivate everyone!
As the learners created more projects, I began introducing more advanced topics like prototyping to bring their existing designs to life. One of their homework assignments was to create a modal window. After everyone had turned in their hi-fidelity mockups, we spent the next lesson adding prototype connections and discussing interaction details.
Once the learners became more comfortable in Figma, I incorporated live challenges to our lessons. This helped them gain confidence sharing their successes and failures. In addition, it helped me understand which topics we needed to spend more time focusing on. I always encouraged the learners to be vulnerable and show their mistakes so everyone could learn from it. This created a safe space for all and the freedom to ask any questions that came up!
Near the end of our 12 weeks, I modified the lessons by allowing one day a week to be dedicated to live Q&A. This empowered the learners to play around with their own designs and have guided assistance when needed. Once we started our weekly Q&A sessions, the learners really came out of their shells. Some even found random designs online for us to recreate as a class!

With accessibility in mind, we utilized the Stark plugin on Figma to test the contrast of our color schemes. We incorporated underlines as a hover interaction on the main navigation to ensure color independence. Our final homepage resulted in a much cleaner feel to evoke calm feelings amongst users. After conducting A/B tests for each page, we compiled our final mockups to create a fully responsive website.

iterations of the homepage for EcoReality after testing for color contrast

After many iterations, we finalized our designs to create our website. Thanks to Figma's Auto Layout feature, we created a mobile version in no time! Check out our final mockups and prototypes below.

Hi-fidelity mockups of the EcoReality website.mobile mockups of the EcoReality website

Prototyping

We conducted moderated usability testing with both the mobile and web version of our prototype to fix minor interaction details. Thanks to our users, we were able to find inconsistencies across our designs. Our users loved the use of different skin tones to create an inclusive experience when viewing our products page!

The Final Video

Designing the Website

Visual design played a pivotal role in building trust and fostering user comfort. We aimed for an interface that was not only user-friendly but also playful and enjoyable for everyone. To achieve this, we opted for a style guide that exuded a cheerful and delightful ambiance, streamlined our design with digital wireframes, incorporated animations to humanize employees, and integrated hand-drawn visuals to maintain consistency and inspire trust throughout the user experience. We scaled back our original idea for the "Our Team" page to include only long-term staff members. This decision allowed us to save time, and allowed those managing the website to avoid having to continually record audio for new team members.

No items found.

The next part of our process consisted of ideating, prototyping and testing. My team was never short of ideas! We turned to sketching as a tool for anything and everything. After creating our initial lo-fidelity wireframes we moved on to testing how we would filter different recipe categories. Using a card sorting test, we quickly realized some things needed more research. This led us to eliminate anything that was too confusing for our users. We incorporated our results into the secondary navigation seen on the recipes page. Next, we created hi-fidelity mockups and conducted a 5 second test for our landing page. This gave us a lot of helpful insight and allowed us to make some major changes before moving on to creating our prototype. The initial design confused our users and made them think they were looking at a supermarket webpage. With this in mind, we scrapped our original image and swapped it for a person cooking. Finally, we created a prototype for the web version and designed hi-fidelity mockups for a mobile version. After surveying our potential users, we discovered most people preferred to find a recipe on their computer or tablet because they don't like getting their phones dirty.

Hi-fidelity mockups of the BetterBites website in a Macbook Pro 16"
Hi-fidelity mockups of the BetterBites mobile version in an Iphone.
As with any new experience, this 12 week bootcamp came with challenges. With just one hour allocated to Figma per day, I ended up spending hours of extra time with learners who were struggling to grasp the concepts presented in the course. The second challenge was being able to adequately differentiate the content to match the varying skill set of the learners. Some individuals were comfortable using advanced software such as Blender, Adobe Illustrator, and Premiere Pro. Others, had never even opened Figma! In order to accommodate all learners, I created bonus challenges to encourage advanced learners to continue practicing. Finally, each learner had different devices with different capabilities. I'm grateful that the learners were engaged and helped each other with any tech issues. Not the mention...Figma had 10+ official feature updates (hello, spell check!) during the bootcamp - so that kept us on our toes as well!
three challenges faced during the Figma course design and training including time, learner skill set and tech issuesprocess photo of a Figjam retrospective after the course finished featuring three sections: what went well, what problems did we face, and what actions were needed

Testing the Product

We performed unmoderated usability tests and tested device screen sizes to efficiently collect diverse user feedback and guarantee the product's responsiveness on various devices. This method improved the final product by offering valuable insights, prioritizing usability enhancements, and ensuring a smooth user experience across different platforms and screen sizes. Our users taught us about more than just performance bugs! They gave us insight into what was unclear and confusing, which allowed us to make major improvements for the final launch.

No items found.

Lessons Learned

Two key lessons that have enhanced my professional experience are all about development and leadership. Firstly, the collaboration with the development team was pivotal to optimize the performance of our animation-intensive website. From DevOps to Visual Studio code, my team had a blast sharing code to enhance web performance. Secondly, I gained significant leadership experience by guiding a team of three junior designers who had limited familiarity with Adobe Illustrator. Creating a range of engaging resources to enhance their illustration skills taught me that guidance fostering support and independence is key to creating a collaborative environment.

Check out my other case studies: