UI/UX Design ︎ September-December 2020
VARIABLE WEST is the first platform to provide a comprehensive calendar of art events on the West Coast of the United States.
Variable West - Website Redesign
VARIABLE WEST is the first platform to provide a comprehensive calendar of art events on the West Coast of the United States.
Task
To enhance the usability of using the Variable West website by reframing the homepage, improving the search function and creating a new subscription system.
Client
Variable West
Variable West
Tools
Figma,
Optimal Workshop
Figma,
Optimal Workshop
Team
Yifan Wang,
Aichen Guo,
Leo Zhang
Yifan Wang,
Aichen Guo,
Leo Zhang
Responsibility
Research & Analysis,
Visual design
Research & Analysis,
Visual design
ABOUT THE CLIENT
Variable West aims to increase engagement with the West Coast art world while nurturing both regional communities and international conversations.
Variable West aims to increase engagement with the West Coast art world while nurturing both regional communities and international conversations.
Founded during the chaotic summer of 2020 by Portland-based writer and editor Amelia Rina, Variable West aims to increase engagement with the West Coast art world while nurturing both regional communities and international conversations. The vision of Variable West is to become an essential resources for writers, artists, curators, and other art lovers to find art events they want to attend.
BRANDING
![]()
UI GUIDE
FINAL PROTOTYPES
Click the images below to experience the INTERACTIVE prototypes!
Mobile Version Prototype
Desktop Version Prototype
USER RESEARCH
TARGET USERS
Based our kick-off meeting with the client, there are two main goals we want to achieve:
- Attract new visitors including both event organizers and art visitors
- Increase users' return rate by enhancing the interaction between users and the website
Both groups are our potential users of Variable West since they are likely to search for art events or post new event information. They are also potential promoters who are likely to recommend the events to others and go with their friends. Thus, both groups are essential to our research in learning user preferences for an art event website.
QUESTIONNAIRE ︎ Sample size: 76 responses (33 art professionals and 43 amateurs)
KEY INSIGHTS
1. Both visitors and art professionals prefer an art event website with personalized information regarding their location, preferred time, and categories.
2. Visitors would like to go to art events and pay more if it has artists or themes they like.
3. People enjoy reading well-organized websites that have many pictures instead of heavy texts.
4. Both visitors and art professionals prefer using SNS as a way to gain information and advertise art events.
5. People's top 3 favorite ways to support artists or events are buying souvenirs, purchasing tickets, and sharing art events.
1. Both visitors and art professionals prefer an art event website with personalized information regarding their location, preferred time, and categories.
2. Visitors would like to go to art events and pay more if it has artists or themes they like.
3. People enjoy reading well-organized websites that have many pictures instead of heavy texts.
4. Both visitors and art professionals prefer using SNS as a way to gain information and advertise art events.
5. People's top 3 favorite ways to support artists or events are buying souvenirs, purchasing tickets, and sharing art events.
PERSONAS
SITEMAP REVISION
To enhance the information architecture of Variable West website, we did card sorting and tree testing.
Based on the tests, we revised the wording of the controversial cards and put some of them under multiple pages to improve the navigation of information for tree testing, and simplified the hierarchy.
REVISED INFORMATION ARCHITECTURE
COMPETITIVE ANALYSIS
What we did: Conducted competitive review of 4 events-related or art-related websites across 6 criteria including homepage features, navigation, search, categories, visual, and the for event organizer section.
Objective: To establish guidelines for Variable West's design by analyzing the pros and cons of benchmarking art-related websites and their information architecture.
Objective: To establish guidelines for Variable West's design by analyzing the pros and cons of benchmarking art-related websites and their information architecture.
WHAT WORKED
1. Navigation bar that has intuitive categories and a short dropdown menu for each if needed
2. Search that includes filters of events categories, time, location, price; it's even nicer to provide suggested keywords when users type and a map function that indicates the events' locations visually
3. Homepages that give personalized recommendation, featured categories, time & location of the events, free/ get tickets icon
4. Updated data with clear insights on published events for event organizers
5. Interesting and consistent visual standards, animations, and wordings
1. Navigation bar that has intuitive categories and a short dropdown menu for each if needed
2. Search that includes filters of events categories, time, location, price; it's even nicer to provide suggested keywords when users type and a map function that indicates the events' locations visually
3. Homepages that give personalized recommendation, featured categories, time & location of the events, free/ get tickets icon
4. Updated data with clear insights on published events for event organizers
5. Interesting and consistent visual standards, animations, and wordings
WHAT DIDN'T WORK
1. Pages for event organizers that are usually too hard to find.
2. Wordings for navigation bar that are sometime too board or vague to understand.
3. Navigation bars that require an extra click to view subcategories
1. Pages for event organizers that are usually too hard to find.
2. Wordings for navigation bar that are sometime too board or vague to understand.
3. Navigation bars that require an extra click to view subcategories
WIREFRAME & PROTITYPES
PAPER PROTOTYPES
USER TESTING
We conducted moderated user tests on our interactive paper prototypes with 7 users.
We concluded with 5 usability problems and recommendations respectively for our later medium-fidelity prototype design.
We conducted moderated user tests on our interactive paper prototypes with 7 users.
We concluded with 5 usability problems and recommendations respectively for our later medium-fidelity prototype design.
1. My wishlist needs consistent visual recognition.
2. A go back button is needed on both mobile and desktop versions.
3. A unique visual standard is needed.
4. My Page button will be better with a drop-down menu during the hover state.
5. The visual design of the calendar could be improved.
MID-FI PROTOTYPES
![Desktop Version]()
![Mobile Version]()
FINAL PROTOTYPES
![Revised Variable West Final Prototype]()
OUTCOMES
THE CLIENT WAS IMPRESSED!!
"Your work is way beyond my expectation! I'm very impressed with the findings and prototypes. I love the horizontal display of categories which prevents excessive scrolling for long paragraphs. The scroll block on the event page is very smart! I also like the wishlist (heart) function and the ability to follow artists & organizations; establishing personal profiles (reservations, wishlists, follow artists & organizations) effectively increases more interaction on the site! I was worried that “Support” does not convey the message of donation well. After listening to your research and findings, I agree that “membership” does work better."
