-
Creating for the Desktop Web Experience
This 2-month project was built as a part of my UX design coursework with Google’s UX Design program. This particular case study has taught me several new skills including: designing for the desktop computer, responsive web design, and working with new design programs (this one was developed utilizing Adobe XD).
Tools Used: Adobe XD, Photoshop, Canva Design, pen and paper
Charity Background & UX Project Vision
In the pursuit of portraying the authentic life and message of Jesus Christ, The Chosen (a crowdfunded media project) is striving to reach the lives of a billion people from all around the world.
It is the pursuit of this UX case study to improve this organization’s website donation flow.
Building It
Make the organization’s spending transparent.
Fashion an online experience that makes donating to The Chosen relatable to the user.
Create an easy, straightforward process for donating to The Chosen online.
Research
User Pain Points
Not Worthwhile
Users don’t like feeling that what they give is just a drop in the bucket. They are also weary of scams.
Time Consuming
Users have busy schedules and get frustrated if it takes too long to donate.
Lack of Connectivity
Users don’t want to give if they don’t feel a connection to the charity.
User Persona Development
Based on research (qualitative interviews), the personas above were developed to represent the two personality types that would be the main donors to The Chosen website. Their pain points and needs were taken into deep consideration when building out the new donation flow for this organization.
User Journey Maps
Simple & Straightforward
Amanda Peters represents another user base that is also very busy and easily distracted. Her main goal is to find a cause she truly connects with and is looking for a streamline process where she doesn’t have to wade through surveys or take time to scroll and find the donate button. She wants the flow to be easy, intuitive, dependable, and relatable.
Connection & Impact
Kyle Robins is someone who is conscientious about where he gives his money and will do the research necessary to make sure he is donating to the most trustworthy and compatible charity/organization. However, he is busy, so he will want the process to be as easy as possible. Therefore, when developing solutions to Kyle’s needs, the website should result in a one-stop-shop (where transparency and a straightforward process are married).
Competitive Audit
-
Reymaker
Direct Competitor
-
Called Higher Studios
Direct Competitor
-
Kickstarter
Indirect Competitor
-
Indiegogo
Indirect Competitor
Opportunities Discovered
The above businesses were examined for a myriad of criteria, and the data revealed the following opportunities as seen on the right:
Donate Button
Include an investment/donate button in both the page itself (at the top) and in the hamburger menu (optimize the amount of times the user sees it).
Donation Options
Make sure donors can donate any amount they want in addition to buying perks or other packaged options.
Connection
Have an array of mediums through which to convey messages (video, text, pictures, graphs, etc.)
Authenticity
Have testimonial videos or show what your project is doing for others.
Unique & Consistent
Personalization and branding is key
One-Stop-Shop
Be able to donate within company’s website (not have to be redirected to a 3rd party)
Accessibility
Make sure accessibility is at the forefront of design, including screen reader capability, contrast, and multiple languages.
Ideation
Sketching/ Mapping/ Iterating
Throughout this project, pen and paper proved the quickest way to get down rapid iterations of a screen idea. It extended my thinking and provided numerous creative ideas and solutions to design challenges.
Affinity Mapping
This process helped me to organize my research findings and design ideas in order to find themes and produce insights that led to changes in The Chosen website’s overall design.
Information Architecture
Once I created the basic main pages for the website design, I then mapped the remainder of the flow for each category. This ensures that items are not left out and everything within the website is structured.
Screen Size Variation
Planning Ahead.
It is crucial that when developing a website that you consider and plan for a variety of screen sizes so that it looks and performs professionally.
When designing for smaller screen sizes, such as mobile, I maintained the same look and feel from the original website by utilizing carousels for content that was secondary in importance, and leaving the main flow items and buttons as blocks vertically; thus, creating a hierarchy for the user.
Product Solution
The Chosen website is redesigned to be a more relatable, engaging, straightforward, and transparent platform in which fans can donate in a variety of ways.
Engagement
The goal tracker has been implemented in order to boost engagement and make the user feel that their contribution is not just a “drop in the bucket, but that they are actually moving the needle toward the show achieving its goal.
Upon completion of the donation flow, users are directed back to the home page and can see instantly the difference they have made to the project’s overall goal.
Transparency
Built into the “About” page, links to the organization’s financial accountability are provided. Through research, it was discovered that users can be skeptical of charities and where the money goes. Those who donate to charities want to see transparency. They also want their experience with donating to be straightforward and easy.
Therefore, it is critical that The Chosen provide a one-stop-shop for our users. They shouldn’t have to spend hours scouring the internet to find out where The Chosen spends its money. And that’s why it has been built into the design; for ease of access and creating trust.
Donation Choices
To further garner trust and build a close relationship with The Chosen’s audience, a series of options for donating were created. Research revealed that people want to be able to relate to the organization to which they are donating. And that is exactly what '“Purchasing Show Items” seeks to do. It gives Chosen fans the opportunity to donate by paying for items (props, wardrobe pieces, wages …) that will be used in the show. And at the end of the season, the donor’s name will appear in the credits.
Additionally, research showed that users want transparency. Therefore, in conjunction with the “Transparency” page, users can choose to donate to a specific cause/department of The Chosen show (Film Production, Construction, Translation, or Music) that needs help. This allows the donors to know exactly where their money is being funneled, and it allows them to feel more connected than just giving a flat donation.
Accessibility
According to the competitive audit, our competitors are not providing enough accessibility access. And since The Chosen is trying to reach a global audience, it only makes sense that we have all the accessibility standards built into our product. That is why when you go to the settings menu, you will find many accessibility options, such as language, text size, and contrast.
In it of itself, the website is designed for high contrast in that the text is almost always white on black, or vice-versa. Contrast as well as other elements (such as intuitive language), are just a few ways in which the website has automatically made its experience user friendly.
Take Aways
What People Are Saying
“I liked the layout. Everything was clear and concise and logical for me. So overall, I thought it was great!”
— Zackary P. , Technical Director
“I like that I had options and choices to join the story, to pay it forward, the transparency part, giving people other options to help other than financial (praying, sharing, encouraging), checking out the latest things.”
— Tymira J., Educator
“Oh so that's cool that I can see all the earnings from everything! (referring to the transparency page)”
— Bradley C., Actor
“You knocked it out of the park! I now finding myself Googling to see if this is all real! Amazing work, keep it up!”
— Alyssa L., UX Design Peer
Project Insights
This project has revealed just how important it is to differentiate the content for a host of different type of user learning styles. Those who donate through websites have different expectations. Some are drawn to good storytelling and connectedness, while others want to see the hard data to convince them that this is a trustworthy cause.
So design-wise, it was a balancing act to ensure that all parties were satisfied.
Additionally, the nuances of designing for a donation-like website illuminated some interesting findings. For instance, since The Chosen caters to such a wide and diverse audience, it was necessary to include language on the buttons that was familiar to everyone, such as the word “Donate” instead of Pay It Forward. Moreover, based on competitive audit research and the fact that we have an international audience, I learned just how vital it was to ensure that multiple language options were available.
Overall, designing for a project like The Chosen website has provided great insight into both the challenges and the opportunities that anyone who is designing for a charity needs to know in order to reach and maintain a wider audience.
