Website Redesign • 10 minutes

Problem Statement

Case Study Objective

Wellbriety is a sustainable grassroots movement that provides culturally based healing for the next seven generations of Indigenous people. Wellbriety.com currently lacks a lot of important information for its users.

Our solution delivers a way for any user or browser to access a calender of meetings and events, a way for users to chat online or call help sources and easily navigate the website in order to provide a culturally supportive resource for those of Native American decent or others of varying backgrounds seeking a different method of addiction treatment.

November 15th - December 8th, 2021
Hayden Araza
Dustin Bolin
Amy Molnar
Valerie Nelson
Website Redesign
Missing Information

● Meeting schedule
● Testimony
● Documented & affiliated professionals

Usability problems

● Confusing homepage
● Strange layout of header tabs with repeat tabs
● Lack of homepage content


User Research

We started our journey by doing research on who Wellbriety users are or could be. We developed a proto persona, created a survey to better understand potential users, and constructed a more accurate user persona for Wellbriety.

  • Proto Persona
  • Survey
  • Results & Affinity Mapping
  • User Persona
Surveying Process

In order to get the most realistic user base for our Wellbriety redesign, I decided to join a facebook group titled "Addicts Fighting Addiction" and ask if the members of the group would be willing to complete the survey about Wellbriety and other online resources for help fighting addiction and living a healthy life. We gathered an abundance of data, and categorized it before creating a priority matrix.

Surveying Details

● 14 Questions
● Google Forms Survey
● Ages 19-62
● 30 Responses


Defining The User Experience

After categorizing our data, we focused on defining exactly what our users want and how we would organize and prioritize content on our redesign. We conducted a created a priority matrix, noted our key takeaways, and created a competitor analysis.

  • Priority Matrix
  • Key Takeaways
  • Competitor Analysis
Competitor Analysis Details

We found that competitor websites had problems with usability as well, and we realized that if Wellbriety can increase its usability it will be able to hold and advantage amoungst its competitors.


• Majority of users want meeting information displayed upfront
• Users want support that cares about them, has good testimony, and qualified professionals.
•Users want to know the price upfront


Ideation Process

With our goals defined, we started our ideation. We took a look back at the original website design and completed an in-depth heuristic evaluation to determine what exactly needed to be fixed and changed. We also created user scenarios to hypothesize how users would desire to use and interact with the Wellbriety site.

  • Hueristic Evaluation
  • UX Hypothesis
  • Storyboarding
Top Issues

(A) Lack of content and mission statement on the homepage of the website.
(B) Lack of calendar information anywhere on the website.
(C) Confusing site layout for link locating.

Story Board

Our story follows Steve, an Indigenous Person who struggles with an addiction but wants a rescource that understands generational trauma as a Native American. To connect with likeminded people, he uses the Wellbriety website to find event meeting dates and meditation resources.


Designing the Prototype

After we had our ideas, we started be defining our Design System UI Style Guide, and designed our website prototype using Adobe XD.

  • Design System UI Style Guide
  • Website Prototyping
Design System UI Style Guide

We constructed our color scheme based on the traditional Indigenous Medicine Wheel which the Wellbriety Movement is centered around. We kept a bold and clear font and consistent styling features for buttons and links.


After our system style guide was arranged, we jumped right into designing the website with precision and care.


Testing Our Prototype

After the design of the new Wellbriety site, we began the process of putting it into a real HTML and CSS website web page. We launched our site on Github, designed our code framework blocking for our website, and dove into active hard coding.

  • Github Launch
  • Code Framework Blocking
  • Active Hard Coding
Website Design Blocking

After looking at our design, we blocked each of the sections into different codable framing language.

Launching the Coded Site

We actively hard coded the beginning features of the Wellbriety website, but due to our short time constraints, we were unable to complete the finished site. With more hours dedicated to active hard coding, we would definitley be able to construct our designed design.

Try Out Our Adobe XD Design

Test For Yourself!

Test out the XD Prototype of Wellbriety below.

Other Projects