Variable West Redesign
Redesign mobile and desktop art event website
Variable West is a redesign web project of an existing platform that provides art events on the West Coast of the United States. The project leverages research insights from interviews and questionnaires to revamping the web experiences in a responsive design, through the use of personas, storyboards, wireframes, prototypes, and enhanced information architecture.
Client: Variable West
Duration: 12 weeks
Design Tool: Figma, Optimal Workshop, Miro, Notion
Practiced Skills: Competitive Analysis, Content Strategy, Wireframing, Prototyping, User Interview, Affinity Diagram, Persona, Card Sorting, Tree Testing
Team: Zhuolan Zhang, Yifan Wang, Aichen Guo
==> Gain an understanding of information architecture and interaction design and the role in the user-centered design process.
==> Provide practical experience using design methods and creating design deliverables.
==> Improve individual and collaborative skills in problem-solving, communication, and creative thinking.
Conducted a questionnaire with 76 responses and 6 interviews with 2 professionals in the field and 4 art lovers. Refine key attribute and create personas
Conducted card sorting with 11 responses and tree testing with 7 participants. Analyzed the data to understand the usability of the mapping
Listed out 4 of the most compelling competitor's websites out of 16 selections and gained insights for redesigning Variable West.
Designed and delivered the final prototype that supports the completion of 3-4 tasks to the client
UI Key Features Overview:
Phase 1 Understanding Users
The goal of this phase is to gain a deeper understanding of the website’s users.
What Is Variable West?
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 is the first platform to provide a comprehensive calendar of art events on the West Coast of the United States.
Who is Our User Group?
For this portion of the research for redesigning the Variable West website, we focused on two groups of people regarding their relationship with art. One group is visitors who are interested in art events and the other group is artists or event organizers who seek platforms to promote their events. 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.
We did our first user search by composing a questionnaire that asked some general questions about the art event website. This diagram reveals the data we collected from our target users. The top 3 choices (needs/preferences) are highlighted in red. (Total: 76 responses)
1. Both visitors and art professionals prefer an art event website with personalized information regarding their location, preferred time, and categories.
In our interviews, subjects mention that they are more likely to go to art events that are close to them. Similarly in the questionnaire, the top 3 aspects that people value the most in art events are the quality of the event, the uniqueness of the event, and the location of the event. Based on this insight, we should recommend art events to users based on their preferences or provide a better filtering function.
2. Visitors would like to go to art events and pay more if it has artists or themes they like.
The majority of people claimed that price is relatively less important if they are really
interested in the art event. Thus, highlighting artists and themes of art events can
help users better navigate the events they want.
3. People enjoy reading well-organized websites that have many pictures instead of heavy texts.
Many interviewees complained that each event on VW's website only contained one
picture, which made their browsing experience unpleasant. Including more pictures of
the event and the museum would help improve the user experience.
4. Both visitors and art professionals prefer using SNS as a way to gain information and advertise art events.
Many interviewees mentioned that they would like to go to events that their friends go to,
and the majority prefer using SNS ( Twitter, Facebook, and Instagram mostly) to share
events' information. Art professionals would also like to use SNS to promote their
events because it is direct, low-cost, and can reach a wider crowd.
5. People's top 3 favorite ways to support artists or events are buying souvenirs, purchasing tickets, and sharing art events.
This information might help us design an accepted and comfortable method to support
artists by adding features on VW's website.
Phase 2 Structuring Contents
The goal of this phase is to gain a deeper understanding of the users’ needs and propose a revised information architecture for the site
To begin with, we gathered information from the 6 interviews and the current Variable West website and organized an information architecture on Miro based on our perspectives. Then, we created 46 cards and five main categories including "Home Page", "Event Page", "About", "Support Us", "Submit an Event", and "My account" for card sorting on Optimal.
After collected card sorting results from 11 participants, we firstly used the standardization grid function in Optimal to sort card ranking for each category and put cards that the majority (number>7/11) has agreed on in the tree testing model. Then, we analyzed the results of the controversial cards and summarized our findings:
==>The agreement rates for four categories are under 40% which is relatively low. Possible reasons are that the wording of cards is not accurate enough and some cards may fall under multiple pages (e.g. calendar may fall under both "home page" for searching and "My account" for documentation).
We developed 5 tasks for the tree testing with an aim to ensure accurate navigation for "search", "submit an event", "saved event", "precautions for COVID19", and "write a review". We've collected results from 7 participants for the tree testing:
1. The navigation success for "submit an event" is very high (6/7) due to the lack of layers.
2. While we expect participants to choose "search date/location" when they were asked to find an art event in San Francisco next weekend, all of them choose "Explore" which also makes sense in this case.
3. When participants try to find "precautions for COVID19" in tree testing, many selected "About" and "Home page" instead of the "Event page" expected by us. We think the participants may not fully understand the nature of the website that it collects events held by various institutions rather than a specific institution's events page.
4. 4/7 got confused about where to find the "saved events" possibly because the wording may
indicate the event section. Thus, we revised the wording to the "wish list".
We created our revised site map based on our analysis and findings from card sorting and tree testing.
Phase 3 Competitive Analysis
The goal of this phase is to explore the design space for the client’s new website by conducting a systematic review of the client’s direct and/or indirect competitors.
Phase 4 Prototype & Wireframe
The goal of this phrase is to evaluate the design direction and user flow by testing your low-fidelity prototype with actual users.
Paper Prototype & Wireframing
We design a paper prototype (mobile + desktop) of the website that supports the completion of 2-3 key tasks. and then evaluate the paper prototype with 6 users.
Usability Problem & Recommendations After User Testing:
1. My wishlist needs consistent visual recognition.
A user suggests that when finding the wishlist he saved, adding some visual recognition would be helpful for navigation. Thus, we should add a heart logo in front of the My Wishlist tag so that it matches up with the heart logo on the event page.
2. A go-back button is needed on both mobile and desktop versions.
Two users had the problem of going back to the previous page on the event page. We should add a return button on the event page so that the user can go back.
3. A unique visual standard is needed.
A user stated that the current visual layout of our low-fidelity prototype seems similar to Eventbrite's design. Thus, when we design our medium-fidelity and high-fidelity prototypes, we should try to differentiate the visual style in fonts, color, icons, shapes, etc.
4. My Page button will be better with a drop-down menu during the hover state.
One of the users expected a drop-down menu when hover on the profile "avatar" button during the desktop test, but it jumped to a separate page. To improve, the main menu under My Page could be shown in a drop-down menu and more specific information could be shown on the new page when clicking a menu category.
5. The visual design of the calendar could be improved.
The calendar function is a controversial one during the user testing. While two users thought the calendar box on the home page of the desktop version is too obvious and decreases the importance of event information, the rest claimed that the calendar box makes the filtering date function very accessible on the desktop version and the lack of the calendar box on the mobile version decreases its accessibility. To solve this conflicting issue, we first discussed the possible reasons why some users thought the calendar box is extra. We figured that the dislike does not come from the lack of usability but due to the distractive and old-fashioned visual of the calendar box. Therefore, we decided to replace the calendar with an eye-catching box with texts of "select a date range" on both desktop and mobile versions to make the filtering date function accessible and visually pleasant. When users click on the "select a date range" button, a calendar would then be expanded for users to choose.
Mid-Fidelity Prototype & Wireframing
We Iterated our prototype based on the findings from the paper prototype and developed a mid-fidelity prototype contains standardized fonts, text-indent, size, colors, style, and icons.
Phase 5 Final Digital Prototype
The goal of this phase is to create two interactive, task-based, high-fidelity digital prototypes. The digital prototypes support the completion of 4 specific tasks
Click the image to see the original Variable West website and our final digital prototype.
We merge the date selection bar and the location selection bar on the home page so the user can filter irrelevant events. In advance, we enable the user to select a range of dates for planning their journey.
We compile all important information of the event into four categories "Description" "Artist" "Organization" and "Review" without navigating to other pages or websites. The user can also see a gallery of images about the event, follow their favorite artists, and get notifications about the latest news and events.
We rename the "Donate" page to "Membership" in order to change the tone of the content to be more professional. We list out all the benefits and prices of being a member of our community and use attractive colors to highlight the action button with fewer words and choices.
We design a new personal page to help the user save and review their events. All events will be saved and organize chronologically in the My Reservation section. People and also invite their friends to the event by clicking the share button and write reviews after the event.
We pitched our idea for the new website. our client loved the idea and shared some comments!
"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."