Company
Team
Time
Role
Tools
Everett Program
Me, Harrison F. (dev)
5 months
UX/UI Designer
Adobe XD, Photoshop, GSuite, FCPX, Wordpress, Boba
Website
WHAT IS THE EVERETT PROGRAM?
The Everett Program was conceptualized in 1998 by UCSC Sociology students and has 4 classes, spanning over one year, where ultimately students are able to implement a project to help nonprofits through technology. Students who wish to continue to work with Everett after the 3rd class can apply to a fellowship position as there is a shared-governance structure of both staff and undergraduate students (Fellows).
If inducted, Fellows have various opportunities and ways to work with other students, staff, and other Fellows to further Everett’s goal: empowering them to utilize systemic thinking for needs based, human centered implementation of technological solutions to create social change locally, nationally, and internationally.
CONTEXT
During my last quarter of my undergraduate studies (April 2020), the program’s director and the rest of the staff felt like they needed a new website. The original site was a fellow initiative around 5-6 years ago and since then it has barely been touched. Initially when joining the program, I knew there could be lots of improvements to be made and that a redesign was needed. The redesign started off as a conversation with one of the Executive Fellows and we had a few meetings after that back in January 2020, but this project took off when the staff voiced the need for a redesign.
ISSUES
I started by critiquing the original website and found there were 3 main problems:
-
The website gave Everett’s branding and story an outdated aesthetic and a less engaging platform
-
The copy and visual collateral were also obsolete. Due to the site being poorly maintained, the site had copy, pictures, and video that were not relevant or not in use anymore (ie blog page wasn’t in use since 2016/2017 and team page had old Executive Fellows and titles for staff).
-
The information architecture of the website was very complicated, making it hard for users to find information easily and sustaining the site for future development
STAKEHOLDER INTERVIEWS
I met with the Everett Program Director and Program Director weekly in order to address these issues and to strategize moving forward with this redesign. We agreed and concluded that the following redesign objectives were needed to be kept in mind:
-
Update and modernize the website to create a more interactive and engaging experience that captures Everett's branding, story, and mission within UCSC and beyond
-
Increase clarity for students (information & involvement), partners (benefits & involvement), and funders (taste of everything)
-
Create a more sustainable site for future use (understand tech support offered, train staff)
With these goals in mind, I set specific solutions in address these with the following:
-
Applying modern design principles with integrated features
-
Overhauling their information architecture (IA)
-
Using Wordpress and the UCSC hosted platform
USER INTERVIEWS
The main users that are visiting the website are mainly students, partners, and funders. Usually, I would have interviewed these individuals, but in this case the program director happened to be my target audience. She started off in the program as a student and transitioned into a staff position who works with specifically partners and funders for student projects. This longevity within the program was perfect as her experience encompasses the stages of the program one can have.
I interviewed the program director (the director was there too in case he wanted to expand on certain topics) and gathered valuable information on what usual tasks these users would perform on the site, the goals of the site, and pain points they experience in their personal lives that might affect the website experience. More so, at the time myself and my web developer partner were also students so we had first had experience that helped during the student portion of the interview.
I compiled the information from the interview into user empathy personas:
I then summarized the user personas into digestible key takeaways to present to both stakeholders since the personas information can be overwhelming to read and hard to remember.
INFORMATION ARCHITECTURE (IA) OVERHAUL
There were 3 phases of this IA overhaul.
-
In phase 1, I scraped through the original website to create the site’s IA to help visualise the setup of the website.
-
This allowed me to define the page priorities and determine if elements of the original structure can be kept, deleted, edited, or needed pages to be added in phase 2. To help me do so, I colour coded the types of edits I would need to make (green is to keep, orange is to edit, and dark blue is to delete).
-
The last phase was the end result of the IA overhaul, with the final IA of the new (now current) site. The pages and its respective contents were designed with the user in mind. This new setup of the site allowed easier wayfinding, making the site less complicated and streamlined the information discovery process.
I ended up deleting most of the child pages under the work section since the amount of clicks to get there was too long for a user and our data showed that the average user only stays for about no longer than 30 seconds. I kept most of the navigation as it broke down the site into its relevant aspects, though I needed to change the copy and content within each page to adjust to our new goals.
USER/CUSTOMER JOURNEYS
By redoing the site’s IA, it helped me creating user journeys for each target audience member. The new updated IA visualised the process of each user and helped me see how they would navigate the site through their perspective to evaluate if the site reached their needs.
-
The student would navigate the site to find information about projects, curriculum, and Everett as a program to see the difference and impact they can have beyond a traditional class, and in hopes, to enroll in the course as a new student.
-
The partner would navigate the site to find information about projects, other partners, the partnership process, and Everett as a program to see how Everett can help their organisation and in hopes onboard them as a new partner.
-
The funder would navigate the site to find information about projects, partners, and Everett as a program in hopes to display the impact student projects have and the need for external funding to do so in hopes to gain a new funder
RELEASE PLAN
While all this research and strategising was occurring and wrapping up, I made a fluid release plan for the developer and I to redesign this website. It was fluid due to us both entering the job market in a pandemic, personal matters, and technical delays on the development side.
DESIGNING (SKETCHES)
From sketching to final designs took around 3 months. But everything begins with an idea. I sketched out some early wireframes that helped me dump all the ideas in my head out on paper (in this case my iPad).
Some early sketches of various pages of the new site
DESIGNING (LO-FI WIREFRAMES)
I then transferred these sketches into Adobe XD. I chose this software since I wanted to expose myself to a new tool. It was a really fun learning process and I received lots of valuable feedback from my stakeholders and developer.
One important thing I kept in mind when designing, was to design this site and its pages in a way where future students can add on to this simply and where the developer can easily implement my designs. He was no professional in WordPress, the platform we used to implement the new site, so I had to be in constant communication with him to make sure certain features or layouts were technically and easily feasible.
The copy was also being composed while I was designing so as placeholder text, so I decided to put what the copy should say rather than generic ‘Lorem Ipsum’ to provide better transparency for the stakeholders when presenting these iterations of the design
Left to right, top to bottom: Project landing, current project, about landing, and team page lo-fi examples
USER TESTING & SOFT RELEASE
We did a soft launch of the site to gain feedback for the final push and was announced to the board and rest of the program.
During this phase of implementation and testing, though most of my designs were implemented, some designs that were thought to be easy to do and/or were sustainable turned out harder in the end or not as sustainable, so some compromises had to be made in the end (ie the team page). Thus, the live site has some differences compared to my designs in the prototype provided below. I was in constant and almost daily communication with the developer for QA testing to make sure the designs were implemented, and if not, find alternative designs that could be made easily and sustainably.
We managed to receive feedback from a board member, staff, and students regarding mainly about the sustainability and expansion of the site that future fellows will be adding on. The feedback received from someone on the Everett board, Managing Partner at a LA digital design agency, was mainly about design, which we were already working on, so it was great to hear our vision aligning. I offered some recommendations like some background pattern to elevate the site even more, and she loved the idea and provided the UI collateral you see on the site now.
DESIGNING (HI-FI WIREFRAMES & BRANDING)
After iterations and valuable feedback, I then focused on the UI aspect more by adding in Everett’s branding into the designs. I also added in the visual assets like pictures and thumbnails of videos that were going to be used, remembering that these assets had to represent the story and personality of the program.
Left to right, top to bottom: Home, project landing, current project, and team page hi-fi examples
Design choices were deliberate and thought out - for example on the team page, the fellows were put first as we wanted to convey that fellows were important (if not, sometimes more) in the program as to staff due to Everett's shared governance of fellows and staff.
As we made the I also created a style guide for my developer and I to reference to keep the stylistic details of each page consistent throughout the site and to maintain Everett Program’s branding.
OUTCOMES
This project was months in the making and am proud to wrap on this. I considered it to be my last ‘hoorah’ and my footprint at Everett and university.
To update and modernize the website to make it more interactive and engaging, new features were added such as:
-
A video upon entering the site highlighting the program, students, and fellows
-
An interactive FAQ curriculum page
-
Links to our Mailchimp so users can directly sign up for our newsletters and/or view our newsletter archives
-
A revamped blog page where program and project related news is posted to keep everyone updated
-
An interactive map to show Everett's location at UCSC since it can be confusing for newcomers trying to find us (UCSC can be tricky to navigate)
-
Lastly, we are currently working on a visual mapping tool that will visualize the geospatial data of these projects that will be added soon!
To simplify the wayfinding and navigation experience for students, partners, and funders to find information, we managed to:
-
Reduce in the current site's information architecture by 17%
-
Achieve a 76.5% increase in page visits duration within a 45 day span. We now average around 3 minutes per visit as before users were only on our site for a maximum of 30 seconds (like mentioned previously)
To create a more sustainable site to maintain the longevity of Everett’s digital presence, the site now:
-
Does not rely on dozens of plugins and is easy for the staff or whoever works on the website to easily publish new blogs, update content, and change pictures
-
Is not as expensive because UCSC sites offers free hosting, SSL certificate, as well as customer support saving us 100s of dollars over just a couple of years
"This looks AMAZING. Such a great improvement!!!!!
Things I love:
- Overall design - clean simple, feels right on brand, and feels professional
- UX is great. Great job!!!
- LOVE the new hands heart head. The old ones were feeling very dated... It seriously looks so amazing. Really really good job. You're doing us [alumni] all proud!"
Hanami Sutton, Managing Partner @ Made By Super & Director of Outreach @ Everett Alumni Foundation
If you want to check out the prototype, here is the link
If you want to check out the newsletter that the website was mentioned in, here is the link