Events & News

Events & News is a site page I designed for Artists for Humanity's website to let people see their events and news

My Role

UX/UI Designer

User Researcher

Client

Artists for Humanity's Clients

Teammate

Caroline Stenzel

Year

Caroline Stenzel

Overview

Problem

Based on Skateholder's experience with the users, she found out that people rarely look through Artists for Humanity's website for events and news information because they don't know where to look for the events AFH has, nor stay on the website for more than 5 minutes because they are very busy and they love to scroll to look for information. If they could not find the information within a few minutes, they would leave the page.

Background

Artists for Humanity is a non-profit organization, also called AFH. They have events like Open Studio, The Greatest Party On Earth, and articles for people inside and outside of AFH to attend and read about. Before having the "Events&News" page on its website, people knew about AFH's events from AFH employees, attended one before, or lived around the area. So AFH wants more people to check their website and attend their events. Now, people can look through AFH's website to check what events AFH has.

Challenge

How can we redesign Artists for Humanity's website to be more user-friendly and improve user retention rate?

As a designer, I was tasked to design a page inside AFH's website to improve the user retention rate, encouraging users to continue looking through the events, stories, and news AFH has. In addition, I was tasked to design events and news page templates for future events and news and make sure the management team was able to edit the content in Storyblok, a content management system.

Final Prototype

Final Wireframes

The final design is launched on Artists for Humanity's website. https://www.afhboston.org/events

AFH recently changed its brand color back to orange.

User Research

This survey aims to gain an understanding of users' behaviors and pain points to design intentionally.

Highlights from the survey (11 participants who went to the Open Studio that day)

How did you hear about tonight's Open Studio?

80% of participants know about Open Studio because they know AFH's employees and told them about it

Do you know AFH has other events?

70% of the participants did not know AFH has other events

Have you ever visited AFH's website?

90% of participants visited AFH's website, but they did not use it to learn about tonight's Open Studio

Solutions

Given the insights from the survey, requirements, and feedback from AFH's art director. Here are the solutions my co-worker and I came up with, and these are the hi-fi wireframes:

Screen Capture 001 - Homepage - Artists For Humanity - www.afhboston.org.jpg

Events and news on the home page

From our research, we know that users visit AFH's website but don't know where to look for information about the events

Need: Make the events and news more visible

Solution: By moving the Events & Stories cards on the homepage, users were able to notice the latest events

A page for events and news

People mentioned they don't know where to find events and stories AFH has in the survey

Need: Create a page that contains events and stories.

Solution: I created a page and named it Events & Stories (which later on changed to Events & News), and put events and stories together. So people can view them by scrolling the page.

Quick scroll to see everything in one screen

One of the feedback given by our stakeholder is that AFH customers like to scroll through the page to see information instead of clicking around because they are usually very busy.

Need: Have events and news together on the same page

Solution: put events and news on the same page, where people can scroll down to see news. Also, people can use the dropdown to see different kinds of news(stories)

Visual for date and location

Another feedback from stakeholder is to want the date and location to be obvious for users to notice

Need: large date and location on the top of the page

Solution: I highlight the date by using the shape, trying to make it look like a calendar and big to see. Have the location beside the date so that people can view them all together

Visual for event information

One of skateholder's need is their Open Studio current every month, we need to make sure the design is easier for them to add and delete event information

Need: find a way to arrange the monthly information so that the management people can update it easily

Solution: have the event information inside a filled color box, so it is obvious for people to notice and the management people can know where to change the information.

Screen Capture 002 - Open Studio May 2023 - Artists For Humanity - www.afhboston.org.jpg

Visual help

From a user's perspective, having visual help people understand more of the information

Need: Add pictures to add visual

Solution: I added images to attract people of what past events look like or what people can see if they come to the Open Studio event.

Easy to go back to pervious screen

From a user's perspective, the stories are too long when people scroll to the button

Need: go-back button to go back to where people were before

Solution: I added two back buttons at the page's beginning and end. People can go back to the previous page easily.

Benefits for Clients

Check events and news easily on the website.
Users can plan ahead if they can or can not attend AFH meetings
Users can see all events and news with one scroll; no need to click around
Have more visuals to help users understand each event

Color Palette

While I work at Artists for Humanity, they are using this color palette for its 30th anniversary. We designed and followed Artists for Humanity's brand guidelines and the art director's requirements when we did the UI and UX for the event page.