Web design

ArtSeed Website Redesign

Redesign an nonprofit website to improve website navigation efficiency and visitor engagement

Information architecture, stakeholder engagement
Comparative analysis, contextual inquiries,
user journey mapping, co-design, high-fidelity prototype
UX Designer & Information Architect: Olivia Ouyang (Me),
Front-end Developer: Chetan Keshav
my role
I planned, conducted user research, and presented research findings and prototype to our client. During the design process, I reconstructed the website navigation flows via template design to coordinate technical feasibility with my teammate and future developers.
project initiative

Seek opportunities to voice up impacts of art creation

During my undergrad study in engineering, pragmatism is the king. However, with my fond for art creation, I always wonder how art could make more impacts, not just simply be perceived as decoration or sugar-coating for a well-functioning products.

So my teammate and I especially looked for a side project related to art creation which led me to ArtSeed. ArtSeed is an art education nonprofit at San Francisco over 19 years who connects the young and vulnerable communities with local artists via fine arts studio projects and long-term apprenticeships.

Design challenge

How might we create an efficient, action-driven website exploring experience for potential ArtSeed participants?

solution Preview

Design for less yet attention-driven

The new website aims to create a conversational browsing experience from introducing, exploring to engaging. By limiting content on one page, we help website visitors navigate through grids to improve the efficiency of identifying their interests via a top-down search.

Design process

UX the process as well as the project

Illustration Credit: Chetan
Research & define

Discover, reorganize and highlight user values via co-design

Problem Scoping

The first and biggest challenge was getting our client on the same page about project proposal. Under the one-week time constraint, we needed to create a feasible project plan for not only to set proper expectations for deliverables, but also explained why they would need our help.

We first walked through the current website thoroughly to understand what services they provided and who the website visitors were.

At a glance, this website was shouting at me with blocks of text and I had no idea where to start. I literally forced myself to go through each page and digested who the target audiences might be. Still, there was too much at stake. So I suggested to schedule several phone calls with the founder and staffs to clarify the prioritized goals for the organization from their current practice. Over 19 years, the organization grew their connections mostly on word-of-mouth and in-person meetings, which required up to hours of engagement. Although the website was built in 2012, ArtSeed had not included online engagement in their outreaching strategies.

We learn from the best practice together

Before landing at SF, I had been thinking about one question -- How should I elaborate the design opportunities without pointing fingers at someone who did not much about UX?

When conducting comparative analysis of other art nonprofits, I identified 3 key attributes as overarching design principles. And instead of presenting our research results, I invited our client to discuss and study the example websites together.

Empathize users in the context

We planned field trips between our interviews to deepen the understanding of the organization missions and connect different stakeholders’ perspectives back to it. Surprisingly, although different individuals had unique interpretation of the organization value, I found that their way-finding processes were similar.

design iteration

Iterate design along constant feedback

I wanted to design a website that my client could understand and love to continue working on. So I started the prototype process from day 1 right after the first interview until the last hour before presentation. Getting constant feedback from the stakeholders not only helped me justify design decisions, but also prepared them to incorporate the website into their future outreach work.

Iteration 1: interpreting the Grassroot vibe

The founder could not emphasize more about the concept Grassroot. As an organization that would not turn anyone away, they did not want a slake or modern look saying that “you need some prerequisites to get in”. But it was definitely something we were not familiar with. So I walked through the website visiting process to a volunteer artist and explained how it mimicked the process of growing a seed. Eventually, I incorporated his crafted illustrations to our design.

Before: Use icons to deliver 3 core values

After: Illustrate the story of seed growth

Iteration 2: provide hints when unfolding our story

Swiping through a website often happens between couple seconds. Therefore, we had to chop down a chunk of content and picked the most interesting piece as a hint upfront. When walking through the mission statement part as introduction, I got feedback that it was a bit redundant with the value part. Therefore, I further broke down “Learn More” to specific “History” and “People” to disclose more about what the readers will learn about.

Before: "Learn about Our Story" seemed vague

After: Direct audiences to legacy projects and people

Design Detail

A dialogue-style browsing experience

I found the pattern across different stakeholders that it was the compelling story told by the founder that got them onboard. The more time they stayed in the organization, the more understanding they built upon what they actually got involved. So I designed the browsing experience to have a conversation with the audiences.

Home Page Overview

Action items as site navigation

Everyone has a unique pace and interest to comprehend new things. So the site navigation should serve visitors at any stage with any purpose to identify where to go.

Sticky Site Navigation Structure

Reusable template design

To ensure the sustainability of our design, it was important to create usable components that allow future content contributors focus on editing content as soon as possible.

Grid templates for main sections

Post example utilizing an origin post from the current website

A passion project that helped me reflect myself as a designer

It had been a fruitful journey as a brand new experience working with a nonprofit. I was very grateful to facilitate ArtSeed to voice up for the healing power of fine art.

And most importantly, I rediscovered my UX passion from this journey. The 2 key takeaways from this journey were:
1. "Find the resolution of solution for the resolution of problem space”
As a designer, we do spend a lot of time staring at screens for interfaces which is critical as the outcomes of zooming into user behaviors. However, design is definitely not a standalone product. And delivering the sense of unity require us to zoom out and consider how the experience will affect the ecosystem.

2. Every actor plays their own parts
The users do not need to understand the nitty gritty but the only matter is to achieve their own goals. A good design should afford users following their own paths to their destinations.

If you are interested, here is my Medium post about this journey. Thanks for reading!
How I rediscovered my UX passions from a working trip