Back2Back Fundraiser

Where do I sell and promote my artwork?

Work-life balance is difficult to handle on it’s own but what about being a creative person balancing their work, life, school, and hobby? Think about someone you know who love to create art but don’t know what to do with them after.

My friend wanted to make a change and organized a fundraiser event where creative students can showcase and sell their artwork. The proceedings will then be donated to non-profit organizations “Stop AAPI Hate” and “Black Lives Matter”.

To start organizing this event, we will first need a website. She and 3 of her friends were the front and back-end developers while I was the UX/UI designer.

We created a website from scratch with React.
I used Figma for my prototypes.
My prototype, our website

1. Research

1A. Seeing the sponsor’s picture

I met with my friend (who initiated this event) and discussed about how she imagined the event and website to be like. Below are the notes I took.

In summary, the website is focused on customers since the sellers would be approached more so in the background. The website should also have minimal pages since the developers plan to create it on React. Since we are all students, we did not want to overestimate the project scope and risk missing the deadline.

1B. Researching the university’s visual identity

Because I’m designing a website that will be used for a university event, I would need to follow the university’s visual identity colors. The primary colors are gold, white, and brown. Because of that, I chose a more “neutral” style for the website since it ties into both the university guidelines and the “artsy” vibe for the event. I used mainly gold and white

2. Definition

2A. Creating our User Persona

To have a more accurate representation of our website user, I created a user persona. Although we anticipate that there will be some faculty and staff joining the event, our main targeted users are still students who are interested in the arts or are there to support their friends.

Mariah

Age: 20

Status: Single

Location: Grand Rapids, MI

Pronouns: She/her

Likes: Thrifting, photography, Cooking

Dislikes: cats because I’m allergic

“Ooh! I can’t wait to meet new people and see what art they’re into!”

3. Ideation

3A. Defining the pages

The 5 of us had our first team meeting to brainstorm what features each webpage should have. This helped each of us understand the process both the customer and the vendor would have. Since vendor sign ups and communication would be held in Google forms and email, all the website would provide is a button to guide them to

3B. Designing the Page Flow

In my opinion, simple pages require more attention on their arrangement of information. I think the presentation of content can make or break the website since people expect little to no effort in navigating a two-page website. So, I created a mini user flow to plot out how the webpage should look like:

4. Design

4A. Defining our Style Guide

I mentioned above that this website will be following the university’s visual identity guide. However, I wanted a more “artsy” feeling so I chose a neutral style for the website. I designed a color palette and took some pictures to put in the website.

This was a really fun project for me because I got to ask my roommate “do you want to help me take some photographs for our fundraiser website?” Immediately, we grabbed anything from our rooms that could be used for our photos. The result were a table full of random items. After some experimenting, this was what we had:

4B. Sketching out the idea

Once I have a sense of how the website looks like, I sketched out the visual look according to the user flow. I also added interactions of how each button or action item would lead to. This would easily help me understand what each type of user (customer vs vendor) would do on each page. I made sure there would not be a “dead end” on each page for either user.

It is also important to note that I created a simple User Interface for this website because I wanted to make sure the developers would be able to program it within the time frame. We are still students after all and are constantly learning.

5. Prototype

At this stage, it was easy for me to create my prototype on Figma. I sent it to the developers to verify that each section is doable and assured them that I could change any features if needed.

After a week of the developers working, I received feedback that there was one UI feature that was difficult for them to program. I discussed with them and made some necessary changes to accommodate everyone’s abilities. Fortunately, they got back to me that they figured out how to make it appear! Like I mentioned, we’re all learning :)

H

O

M

E

P

A

G

E

V

E

N

D

O

R

P

A

G

E

Check out our website!

Takeaways

Be ambitious. I especially like this project because it shows how ambitious and driven we are. As students, we didn’t need to go through the lengths until organizing a campus-wide event but my friend did and it showed me how important taking the initiative is.
We’re all learning. It gave me a sense of comfort knowing that everyone in the team is at the same level as me in terms of experience. Although I usually strive to work and learn from someone who is more experience, this project gave me a different perspective I could not see if I stuck to what I usually do. I see the effort my friends put to hone their skills and passion.

Final thoughts

Honestly, my first impression being asked to work on this project was gratitude that I was thought to be skilled enough to help. I learned so much in this project, both technical and soft skills.

As our end of project celebration, we attended the event and saw so many talented individuals there. There was someone who made clay trinket trays, someone who would read your tarot card fortune, and someone who made balloon-powered wooden boats. It was my first public project, so what better way than to start my first trial with a one-time event?