Wellbriety
Website Redesign • 10 minutes
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.
- Duration
- November 15th - December 8th, 2021
- Team:
- Hayden Araza
- Dustin Bolin
- Amy Molnar
- Valerie Nelson
- Category
- Website Redesign
Missing Information
Usability problems
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
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.
KEY TAKEAWAYS🔑
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
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.
Prototype
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.
Test For Yourself!
Test out the XD Prototype of Wellbriety below.
