Role
UX Researcher &
UI / Visual Designer
(Individual Project)
Duration
September — December 2022 (3 months)
Overview
A collaboration with the creator of Whimsy Walks to conduct stakeholder research and discover solutions for improving the website's user experience.
ㅤProject Goalsㅤ
Whimsy Walks, created by Gregory Engel, is a website that curates artwork and other interesting features from within Seattle’s residential areas. By exploring these locations, Gregory hopes to encourage residents to rediscover the small joys found by simply walking around their neighborhood.
Though Whimsy Walks is still early in development, Gregory is continually adding new sites and hopes to expand the website into other neighborhoods. Currently, he is looking for ways to improve Whimsy Walks' user experience and increase community engagement.
(Left — The current website, which displays Whimsy Walks sites in the form of a long list.
Right — A section of my redesign, which aims to improve browsability and long-term organization.)
ㅤUser Researchㅤ
I collected user data using a variety of different methods in hopes of creating a more accurate and thorough understanding of Whimsy Walks' users. I wanted a very thorough research foundation to more suitably / best help Gregory with his goals.
First, I went on several Whimsy Walks myself and took field observations of the experience in the form of voice memos. I later transcribed and coded these into notes. This experience was very helpful; I immediately noticed some areas for improvement, such as the lack of organization, which made it time-consuming to find nearby sites. I also noticed that the embedded maps weren't useful at such a small size, and the single photos resulted in some confusion when they did not fully match the location.
Some of my transcribed and coded notes. I chose voice memos as a way to record fast, thorough, and uninterrupted observations of my surroundings. I coded positive/negative comments, as well as background noise, stuttering, and others' voices in hopes of painting a comprehensive scene.
Next, I created a short survey. In my survey, I asked local artists about their preferences when sharing their work, their experiences with other art platforms, as well as their impression of Whimsy Walks. I distributed this survey with the help of my university's clubs and friends.
Originally, my focus was on artists as a stakeholder group. Since their work makes up a foundation for Whimsy Walks, I imagined that creating a better experience for them could naturally drive engagement and growth. Since surveys can be distributed to many people at once, I used this format to quickly collect information that will help establish a design direction.
Lastly, I conducted a semi-structured interview with a freelance artist. After gaining some general insights from my survey, I used the interview as an opportunity to have a conversation and learn from a more personal, detailed perspective. In my interview, we talked about various pain points and motivations, as well as the user's in-depth opinion of Whimsy Walks as they browsed through it. I also had the opportunity to ask about some initial ideas I had in mind and get early feedback.
A presentation I created compiling my main research findings and design direction.
(A transcript of what I covered is available in the speaker notes.)
Research Findings
Throughout my entire research process, a recurring theme emerged surrounding the website's starkness and lack of organization. I first noticed this when I was using the website myself; the random order of the list became very apparent as I was looking for nearby sites to visit.
From both my survey and interview, I learned that users unanimously felt the landing page was too blank, leaving them with an ambiguous first impression. The user I interviewed skipped over the introductory paragraph to look at the photos. Many expressed a desire for more images and artistic visuals, while suggesting that the current layout was too text-heavy. Users seemed reluctant to read so much at once, or to scroll all the way to the end. This was concerning to me as Gregory was regularly adding new sites to the bottom of the page.
Design Concept
After analyzing my findings, it was clear that the Whimsy Walks website could be improved to display information about each site more effectively. I ultimately decided to pursue this direction because it was a pressing, but also realistic solution that could benefit both the end users and Gregory as he adds more sites.
As part of my brainstorming process, I interacted with several websites that handled similar data related to artwork. I wanted to see how other organizations approached maintaining their information, especially since they were handling a very large database; it would be important to have a good system to keep everything organized, but they would also want the website to be easy to browse.
I compared many different websites to see the different ways that others approached organization and presentation of similar data. These ranged from large art museums to local art walks.
A look into some of my sketches while I was brainstorming design solutions for the website. I pulled from both my explorations with other art collection sites, as well as my research findings.
Prototype
Here is a walkthrough of my proof-of-concept prototype, which I used to present various design recommendations to Gregory.
A clear, informative landing page
The homepage serves as an introduction for first-time visitors, so I wanted it to leave a clear and pleasant impression.
To prevent users from feeling overwhelmed, I divided the introduction into chunks, leveraging icons and text grouping to help users scan. I included a photo as both an example of a site and a visual aid towards its purpose.
Accessible 'newly added sites' section
When Gregory adds new sites, they are difficult to find because they appear at the very bottom of the list. As the vertical list of sites grows, it gets buried beneath all the others before it.
To work around this, I placed a ‘newly added sites’ section as one of the first things you see when you scroll down. My hope is that it encourages users to revisit the website and helps bring attention to the new content Gregory is adding.
Cards display and collapse information as needed
Cards enable information about each site to be collapsed into small thumbnails, which saves space and allows the user to quickly browse through multiple sites. If a user is interested, they can expand a card or click into it to learn more.
Find sites within a specific location
During my field observations, I learned the value of having sites organized by proximity. I added a ‘browse by location’ section which allows users to find collections of sites in specific neighborhoods, eliminating the need to look through sites they are unable to visit.
Find and organize sites through tags
Tags help label and organize sites throughout the website, as well as enable easier searches.
For example, the Ravenna Trollbooth can be tagged ‘ceramic’ (medium), ‘gregory engel’ (artist), ‘seattle’ or ‘ravenna’ (location), ‘trolls’ (subject), ‘2022’ (year it was added).
Dedicated pages offer more complete information
If a user is interested, they can click ‘learn more’ to enter into a site’s ‘details’ page, which include more images, larger photos, a full descriptions, directions, and a potential section for comments or user-submitted photos.
Having pages for each site could help users gain a more complete understanding of a site, its history, and its location without crowding the homepage.
User-submitted content can encourage engagement
Each site can opt in to an ‘activity’ section, which features comments and user-submitted photos.
While user activity can encourage engagement and help keep sites up to date, this will require some oversight from Gregory or an admin to prevent unwanted comments. In my example, user submissions are ‘parked’ for review before being posted.
A style guide I created for the website. The logo aims to communicate a lighthearted mood and sense of exploration while staying readable. For the colors, I used a combination of greens, tans, and autumn-like colors to evoke a natural, calming feeling.
Further Ideas
These ideas were outside the scope of my project, but I think they could be worth exploring in the future:
-
Accessibility options; A 'text-to-speech' button before descriptions, a button that increases font size, and an option to toggle on/off the dark background.
-
User profiles could add a layer of interactivity and engagement to the website. Accounts can be customized for different needs, e.g. an artist could use their profile as a shareable portfolio and a walker could create collections of sites to visit later.
-
QR codes at physical locations can help signal when you have reached a site, which would be especially helpful for smaller sites. These can include features that encourage users to visit, such as collecting digital ‘badges’ to display on your profile. Additionally, it could act as a form of advertisement for people passing by.
Reflection
I loved the concept behind Whimsy Walks, and was very excited to be able to contribute towards a real, community-based application. The prospect of being able to help Gregory in a substantial way motivated me to try my best along each step of the process. For this project in particular, I wanted to focus especially on collecting data, in hopes that it would lead to helpful and practical recommendations.
Originally, I started researching the website from local artists' point of view as a way to support the website's growth. During this period, I saw recurring trends that pointed towards organization as a noticeable and pressing concern. I ultimately decided to prioritize this direction for my final designs, as it seemed like the most immediately approachable and beneficial for Gregory to implement.
Though I didn't have much time to work on it, I challenged myself to utilize more of Figma's features while creating my prototype. I looked up many tutorials, and struggled frequently when things didn't work how I expected. However, trying to figure it out helped me learn so much more about Figma! Overall, I'm happy with the results and hope I can continue to improve my UX skillset.