Duration
48 hours
(March 26, 2021 - March 28, 2021)
OVERVIEW
WanderVision is a productivity tool that promotes time management, collaboration, and virtual travel in the era of social distancing. This web application was designed for Catalyst, Boston University’s annual designathon. My two teammates and I designed WanderVision in just 40 hours, and we ended up winning first place out of over 100 design teams!
Tools
Figma
Google Forms
Miro
My Role
Product Designer
User Experience Designer
UX Researcher
Deliverable
At a glance...
PROBLEM
“How might we mitigate feelings of isolation and help individuals become a part of a larger community?”
As a result of the COVID-19 pandemic, many people have struggled to stay productive and combat feelings of loneliness while working remotely. Furthermore, the Stay at Home Order has forced many individuals to cancel their travel plans and forego
in-person social activities.
SOLUTION
Our solution is a web application called WanderVision, which seeks to combine the excitement of travel and exploration with productivity and a sense of community. WanderVision allows users to virtually travel to different locations around the world and practice time management while immersed in an online workspace.
IMPACT
By combining productivity, community, and adventure, WanderVision provides users with a unique way to stay focused while meeting new people and exploring different sceneries and cultures, all from the safety of their home.
BACKGROUND
About the challenge
For this designathon, hosted by Boston University's FORGE Design Studio, participants were challenged to design a platform that empowers users to combat loneliness and join a virtual community while practicing social distancing. We were given just 48 hours to research, plan, and design our solution. At the end of the challenge, our designs were judged by a panel of industry professionals from companies like Disney, Sketch, and General Electric.
RESEARCH
USER SURVEYS
Identifying our users and their needs
After reviewing the challenge prompt, my team and I began conducting research to decide how we would approach our solution. Although we initially struggled to come up with an idea, we decided to explore the possibility of combining productivity and virtual community.
The first step in fleshing out our idea was identifying our user base and understanding their wants, needs, and goals. My team created and distributed a survey to discover the lifestyles and work habits of users, specifically during the pandemic. We were able to collect 37 responses from college students and recent graduates.
37
respondents
17-26
age
11
questions
Goals
1. Identify demographics of our target user base
2. Understand users' needs regarding productivity, community, and socializing
3. Discover our users' time management methods
4. Understand how COVID has affected work and lifestyle habits
Sample Questions
1. Have you ever used a time management or productivity app?
2. What do you miss most about in-person work/school?
3. Has COVID-19 interfered with your travel plans?
4. Are you interested in learning about new cultures? Why or why not?
USER QUOTES
“I miss being in an atmosphere where everyone around me is working. At home, I'm alone in my room and don't have anybody to keep me in check.”
“Being able to study in a place that is a change of scenery from my house helps me stay focused and get things done quicker.”
“I used to use a basic Pomodoro timer. It was nice at first, but it got boring quickly and I couldn't
follow it anymore.”
KEY INSIGHTS
1. Change of Scenery
Many users feel lonely while working from home, and miss being able to work in public spaces like libraries and cafés.
2. Staying Motivated
Many users reported that working in a space with other working individuals helps keep them motivated and minimize distractions.
3. Travel Restrictions
Most users reported that they enjoy exploring new places and learning about different cultures, but they have been unable to because of COVID-19.
4. Make it Exciting!
Users are looking for a time management tool that
improves their productivity and is more exciting to use than the standard Pomodoro timer.
COMPETITIVE ANALYSIS
Scoping out the competition
To gain a better understanding of some existing products and their capabilities, we conducted a competitive analysis on the time management and productivity resources that were popular among our survey respondents. We identified their key features and compared these to the features we envisioned for WanderVision.
ANALYSIS AND IDEATION
Converting pain points into design opportunities
After analyzing our survey results, we discovered several common wants, needs, and frustrations among our survey respondents, and we began brainstorming ideas to address these. To begin planning the features and functionality of our solution, my team decided to convert our users’ pain points into a list of design opportunities to accomplish throughout our design process.
Users feel lonely and uninspired while working
from home
Allow users to "travel" to live-streamed workspaces around the world and chat with others
Existing time management tools become ineffective and boring over time
Provide users with an exciting alternative to the Pomodoro timer method
Users feel unmotivated in their current work environments
Create an immersive workspace through virtual locations and ambient sound
DESIGN OPPORTUNITY
“How might we mitigate feelings of isolation and help individuals become
a part of a larger community?”
SOLUTION
After ideating multiple possible solutions, my team decided to create a web application that combines commonly-used productivity and community-building tools, such as a Pomodoro timer, relaxing background music, and a live chat room, with the thrill of exploring new places in a safe manner.
USER FLOW
Planning the user experience
After deciding on our solution, we began ideating the structure of our designs. Since we knew we wanted our product to be a web application, we decided to create a site map. This allowed us to visualize the layout and information architecture of our application, as well as the features we would be designing.
The main productivity feature we envisioned for our product was an interactive Pomodoro timer, or a digital timer that divides a user’s work time into 25 minute intervals, with each interval followed by a 5 or 10 minute break. We also wanted to include an immersive livestream in the background of the Pomodoro timer, with various locations to choose from, a live chat for users on the same livestream to chat with each other, and an Explore page, personalized for each user, with recommended virtual locations.
Site map of navigation
USER PERSONAS
Representing our target users
To summarize our research findings and guide us throughout the design process, we created a user persona. My team recognized from our survey feedback that users wanted a fun and exciting resource, but also wanted to reduce distractions while working from home or living with others. We echoed these needs in our user persona and kept them in mind throughout the
design process.
User persona
DESIGN
SKETCHING
Drawing it all out
After finishing our research and ideation process, it was time to start designing! We began by sketching the screen designs for the application’s key features, including the account creation and onboarding flow, as well as the landing page, user profile page, and search results. We also sketched some potential layouts for the Focus screen, which combines the Pomodoro timer, the livestream background, and the ambient sound and chat features into one page.
LOW-FIDELITY DESIGNS
With our deadline quickly approaching, the next step was to transition our sketches directly into low-fidelity wireframes. While designing these iterations and developing our low-fidelity designs into mid-fidelity wireframes, we took this opportunity to test out different styling and visual elements, and solidify the key navigational features we wanted to include in our prototype.
MID-FIDELITY DESIGNS
MID-FIDELITY ITERATIONS
Onboarding
Low-Fidelity
Mid-Fidelity
KEY CHANGES
1. Added a more detailed title and button labels to create an effective call to action.
2. Added relevant illustrations to help users visualize each type of location before making a selection.
Explore page
Low-Fidelity
Mid-Fidelity
.png)
KEY CHANGES
1. Added more advanced styling elements, including colors and images for each location.
2. Added relevant illustrations to help users visualize each type of location before making a selection.
Map view
Low-Fidelity
Mid-Fidelity
.png)
KEY CHANGES
1. Added "zoom" feature to allow users to view each location more closely.
2. Created scrollable popup windows for each map location, with featured livestreams for each.
Focus screen
Low-Fidelity
Mid-Fidelity
KEY CHANGES
1. Added features including chat window, trivia popup, and an example image of a livestream background.
STYLE GUIDE
Maintaining visual consistency
Before designing our high-fidelity wireframes, we created a style guide to ensure that the branding and visual elements we used would be consistent across all of the designs in our final solution.
FINAL SOLUTION
MAIN FEATURES
Account Creation
When a new user joins WanderVision, they are asked to input some information for their profile, which will be visible to users that they interact with. New users also complete an onboarding quiz, where they can select their favorite types of landscapes. Their choices are used to customize the virtual workspaces that are recommended to them.
Explore and Search
After creating an account, users are brought to the Explore page. Users can browse a variety of categories, including a personalized Recommendations list, to select a location to virtually travel to. If a user wants to search for a specific location, they can do so using the Search bar. Alternatively, if the user doesn’t have a location in mind, they can use the “Take me somewhere!” button to be automatically navigated to a random location.
Map View
Using the Map View feature, users can browse locations through an interactive world map. Each city, state, or country with a virtual location is marked with a yellow pin. Users can click on a pin or use the “Zoom In” button to get a closer look at each location and view a list of featured live streams.
Focus Screen
Once a user selects a location, they are brought to the Focus Screen, which displays a livestream of the location. The Focus Screen includes a fact about the location, background music and ambient sound, a live Chat Room for users at the same location to chat with each other, and a Pomodoro timer. The timer is 25 minutes long, with Long and Short Break options, allowing users to manage their own time. If a user wants a change of scenery, they can use the “Relocate” feature to choose a new location, or they can be sent to a random location using the “Refresh” button.
REFLECTION
Wow! This project was a whirlwind from start to finish. At the beginning of this challenge, my teammates and I had no idea what we were going to create or how we were going to research, design, and iterate in just two days. Thankfully, we had guidance from BU’s Forge Design Studio and all the industry professionals that helped make Catalyst 2021 happen. They helped us understand the challenge prompt and provided so much support, which really helped catalyze (get it? :)) our design process, leading us to a first-place win!
KEY TAKEAWAYS
1. Working Under Pressure
This was my first time designing a product under such an extreme time constraint, and it taught me a lot about prioritization, efficient design thinking, and working in sprints. Although we were unable to add certain functionalities to our designs or conduct usability testing, we learned how to condense the tedious design process into a few crucial steps, in order to finish a high-fidelity prototype in 40 hours.
2. Celebrating Accomplishments!
Although this challenge was so fast-paced, my team and I were able to create an innovative solution that addresses productivity and social needs, and promotes cultural awareness, specifically during the pandemic. Overall, I’m so proud of us for accomplishing our design goals and winning first place! :)
3. Next Steps
In the future, we hope to improve WanderVision by refining our designs and conducting usability testing. Usability testing would allow us to gather comprehensive feedback from our users and identify ways to improve our application. Also, we ran into a challenge while trying to embed videos of virtual locations and add sound in Figma. With more time, we could implement these features in WanderVision, as well as other interactive elements to exceed our users' wants and needs.