Design for Others — Group 3

Summary

The purpose of this design project was to redesign an existing website to cater towards a specific user group. We chose to redesign the CommUnityZone website specifically for donors or organizations wanting to support the establishment in any way. Instead of redesigning the entire website, we selected four pages from the site that catered to the needs and preferences of donors or supporting organizations. These pages included the “Home”, “Our Donors”, “Our Story”, and “News & Events” tabs. Adobe XD allowed us to create a prototype of our mobile design to share and demo with the class.

Information Design

The first step in our design process was determining which pages were beneficial for the targeted user group and the motivations behind those pages. We redesigned the “Home”, “Our Donors”, “Our Story”, and “News & Events” tabs to emphasize the goals of our users. Since there wasn’t enough time to interview our user group, we researched what their perceived intentions were. We kept track of this information in our “Motivations” document. Within each page, we outlined the most important information that needed to be included to align with the motivations of the users. We explained our information hierarchy in the “Information Organization Outline” document.

Visual Design

One of our main concerns for the design was the style that our user group preferred. Each team member took charge of designing one of the pages and developed six sketches for the potential solution. Although we couldn’t get feedback from our target group, we received feedback from the other group members and decided on the most beneficial designs.

As a group, we needed to establish the mood and tone for our demographic. To gather a few ideas on the color schemes, fonts, and patterns to use in our design we created a mood board with examples of other environments that accumulate donors.

From our mood board, we decided that Segoe UI, Baskerville Old Face, and Sylfaen were appropriate for our primary fonts. We also determined that the set of colors should contain cool colors with a lighter shade of orange to add a contrast.

For the design patterns, we thought that the information would be easy to follow if it was separated by horizontal boxes and pictures. Unlike the original website, we wanted to include pictures for most of the sections to show the beneficial changes that can be made for the community from the organization.

Prototype

After we had all of our design components, we designed a prototype using Adobe XD. Adobe XD allowed each team member to work on their specific page in the same workspace. This meant that all of the pages could be linked off of the homepage. We used the material from the information design stage and our thoughts from the visual design stage to create the four webpages. To receive feedback from the class, Adobe XD generated a link to demo our prototype. In groups, classmates explored our interactive website and gave their feedback when necessary. We took this feedback into consideration for the final design.

What worked? What didn’t work?

Having a collection of images already used by the previous website design made the process of choosing graphics for the web pages easier and allowed us to focus more on scripting and style decisions. Our design did a good job of making all pages accessible from the homepage as well as from the navigation bar on the top of the screen. Additionally, we were able to effectively organize our content to prioritize information most important to our target group. However, in some cases we did have difficulty trying to ensure that certain areas of the webpages weren’t too text heavy. A potential solution would be to extend the webpages, but it’s tricky establishing a balance between length of a mobile webpage and amount of information on the page itself.

What options did you explore?

In using Adobe XD for the first time, one of our most important design options was to decide how we were going to use the basic shapes available to us in order to make identifiable buttons on our web page that would link to other pages. Additionally, we also explored different ways that we can visually structure a large amount of information on one page in a way that’s both visually appealing and as concise as possible. We were able to test these options mostly by creating rough designs in Adobe XD in order to fully visualize webpage layouts and see how intuitive certain interactive parts of a page were to use and how uniform they would all look together.

How did you decide on the results?

After looking into the web platforms of America’s most successful nonprofit organizations such as the Red Cross and the American Heart Association, we decided that a design based off of the needs of potential donors would need to emphasize:

• The donation/service of the donors will be a catalyst for change/helpful to the community
• Our organization will be true to our word and not use donated money for selfish reasons
• Donors will be a part of a community/work together towards the common good
• Donors will know exactly what their money is being used for/contributing to
• Donors will receive tax benefits
• Lewisburg donors are likely to know someone who has directly benefited from our charity events

Based on our research findings, we prototyped different versions of each of our four web pages and chose those which emphasized the ways that CommUnityZone uses its donations, the events that CommUnityZone runs in Lewisburg, the ways that the Lewisburg community benefits from the existence of CommUnityZone, and the amazing/successful contributions of our past donors. We also used the information from websites detailing the wants of potential donors (i.e. https://www.networkforgood.com/nonprofitblog/7-reasons-why-donors-give/) and from our research on other nonprofits to choose the fonts/color scheme that we found to be most welcoming and calming for potential donors, encouraging them to give to our organization.

Repository Link:

https://drive.google.com/drive/folders/1uGJlbZ0wQm5l_h4Cl8f4Q8cs_XLJFvyC?usp=sharing

The Final Product that we created is available at the following link: https://xd.adobe.com/view/67e4fbc4-5058-42f9-b13a-3fb3ae8ca499-32b7/

The Strengths of the product include:

• Clear organization of information catered to chosen consumer group
• Intuitive design
• Easy to navigate
• Pleasing color scheme
• Good use of photos

The Weaknesses of the product include:

• Inconsistent spacing of text/photos
• Some text too small to be read in a mobile context
• Photos not clickable/used for navigation
• Too many links
• Distracting background on News & Events page

Going Forward, to maintain the strengths in our design and address the weaknesses we would:

• Increase the size of the navigation menu up top to be visible in a mobile context
• Change some links to buttons/clickable photos/etc. to combat the overload of links on the page
• Increase the contrast between the text and background in the places where it is currently grey on orange/green to increase visibility
• Change background on News & Events page to a subtle pattern and add white boxes behind the event photos on the page, further making them stand out
• Re-order events on news feed to be chronological/more easily readable
• Choose a consistent font/photo size and a consistent spacing for each sub-header
• Align all text and photo boxes
• Rearrange the Our Donors section to highlight one donor at a time vertically, rather than horizontally, in order to increase mobile readability and highlight each donor more individually
• Increase resolution on all photos

Conclusion

Using the research we did on the wants/desires/incentives of donors, we built a website that we believe caters very well to what we learned. Donors are more likely to help an organization if they can see where their money is needed most and how that money would be spent. We used this information to emphasize CommUnityZone’s upcoming events and current projects on our website. Our intention when creating our web pages was to have the user’s attention go to upcoming events and current projects first in order to engage our specific user group. This was achieved through implementing different properties of human computer interaction, properties like contrast, simplicity, grouping, etc. We applied these concepts to the best of our abilities by redesigning the “Home”, “Our Donors”, “Our Story”, and “News & Events” tabs of the CommUnityZone website.