Adopt a Elder
Jared K. Bateman
2022
Non-Profit Redesign
Project Type: Non-profit redesign
Date: November 2022
Role: UX/UI Design, Prototyping/Navigation, Research, Ideation, etc.
Redesign: Update website design, create trust for donors & volunteers due to lack of transparency, & outdated aesthetics.
Project Description
Adopt-A-Native-Elder is a non-profit run out of Park City, UT. Its goal is to raise donations to supply the elders of Navajo Nation with many useful things, from food and medicine to the wool that they use to make their world-renowned rugs.
The current website is underserved and lacks modern UI, the general aesthetic being outdated and inconsistent. This creates a level of distrust in the user, possibly portraying itself as a scam. The information that is there is not organized or displayed well, sometimes requiring trips to their Facebook to find relevant information.
Our goal is to help make this information more accessible and allow for an easier site walkthrough so that Adopt-A-Native-Elder can inspire new people to help in their cause.
Why?
Adopt a Native Elder allows you to on top of basic food support send certain items that give them basic needs that aren't accessible on the reservation and supplies to support themselves financially. Such as yarn to weave rugs. You can do a one-time donation or set it up to provide support for 6 months or 12 months. Along with the option to buy Traditional Native American art. With the Navajo Nation having their own corrupt political system. This allows 100 percent transparency of where the donations are dispersed. Not a lot of people know that oppression still exists for Native Americans. Some without power, running water, and living on dirt floors.
​
Research
​
Heuristic evaluation of current website
​
This is just an example of what their current website looks like, here is half of the home page. The bottom half was just continued text. You can see their lovely logo and the pages listed underneath. The hero image is cropped a little different than we’re used to, giving it a 3D feel. However, there’s a lot of white space and the text is hard to read.
User Interview Responses
HOME PAGE
-
So text heavy, it’s making the user feel overwhelmed and confused.
-
WEBSITE OVERALL
-
Information is not well organized. Too much repetitive, redundant, and inconsistent information.
-
The search function is overly complicated (too many unnecessary filters).
-
​
CONFIDENCE
-
Users did not feel comfortable donating due to the appearance and information on the website.
-
Needs more donation transparency.
-
Some of the verbage being used seemed dehumanizing.
Define & Ideate
We imagined a Fred Williamson, who is a recent retiree and art lover with expendable income who wants to put that money towards something he feels is impactful and will aid the community.
Diving into our brainstorming, we used the I like, I wish, what if method to hone in on key features we wanted to focus on which were: UI improvement and displaying a more personal and empathetic tone with the elders.
User Flow
The user flow is essential for creating a great UX design that can straighten out the user's path, this flow is aimed to follow the steps necessary to successfully apply for a job using the app, beginning with account creation/onboarding. This is the updated user flow where I was able to reorganize and condensed their information into pages that were more digestible.
​
-
Fred was on a trip to Taos and had a chance to buy artwork by a Native artist and talk to her about the issues of the pueblo.
-
After coming back home to Park City, Fred decides he wants help out how he can. So he googles both local artists and non-profits, he comes across an interesting site.
-
Fred arrives on the site and sees that it directly gives many needed things to Navajo Nation. And he can buy more art knowing 100% of his money goes to the artist.
-
Fred is an art addict so the first thing he looks for is more turquoise. He finds a beautiful bracelet and decides he is going to purchase it.
-
When he goes to check out, Fred sees an itemized list of things he can buy today for the elders. Wanting to support more art, he buys them yarn for the famous rugs to be woven. But he knows life is uncertain and adds on the firewood voucher and some food certificates.
-
Fred is very excited by his new bracelet and has to show it to his friends. In doing so, he tells about Adopt a Native Elder and his great experience with it. He goes home feeling like he has made a difference in a tangible way. And get a turquoise bracelet out of it was a good bargain.
RWD Wireframes
We started out with our wireframes, as we all know wireframes act as blueprints and help to ensure that designers are headed in the right direction prior to putting a lot of time into full mockups of the user interface complete with colors, fonts and other design elements
Before & After
Examples of the 1st iteration wireframes: Donate Page, Art Marketplace, & About Us. I graphed out each frame for placement & alignment. Starting with these lo-fi frames are very helpful in a group setting so that we can be sure our site had proper flow & style uniformity.
RWD Wireframes
Final iteration examples
1st iteration wireframes: Donate Page, Art Marketplace, & About Us.
We graphed out each frame for placement & alignment. Starting with these lo-fi frames are very helpful in a group setting so that we can be sure our site had proper flow & style uniformity.
RWD Wireframes
1st iteration examples
Here we have the final iterations where design & dimensions adjustments have been made. I implemented the color scheme, buttons & have added animations in as well as show how it fits and interacts with components. The final prototype illustrates the real-world functionality of the site.
Style Guide
Here in the style guide the before and after of the redesign is really called out and highlighted with examples of color scheme, buttons and interactions, as well as logos and imagery etc.
Final Thought
•Working with the non-profit directly would have been incredibly beneficial for us in learning the pains of the company themselves, rather than focusing purely on the user experience as we had done. This would aid in our goal of transparency.
• Still needs iterating. Overlays cause prototype functions to cease working, something to work around.
•Needs to have the remainder of the marketplace built out with categories, filters, etc.
•Focus more on Elder stories.