WanderVision header (1).png
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

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.

DESIGN PROCESS

So, how did I get to my final solution?

  • User Surveys

  • Competitive Analysis

  • Design Opportunity

  • Site Mapping

  • User Persona

  • Sketching

  • Low-Fidelity

  • Mid-Fidelity

  • High Fidelity

  • Feature breakdown

  • Reflection

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
Screen Shot 2021-10-21 at 11.55.36 AM.png
Screen Shot 2021-10-21 at 11.56.29 AM.png
Screen Shot 2021-10-21 at 12.15.03 PM.png
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.

Frame 1.png
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.

x-mark-64.png

Users feel lonely and uninspired while working

from home

checkmark-64.png

Allow users to "travel" to live-streamed workspaces around the world and chat with others

x-mark-64.png

Existing time management tools become ineffective and boring over time

checkmark-64.png

Provide users with an exciting alternative to the Pomodoro timer method

x-mark-64.png

Users feel unmotivated in their current work environments

checkmark-64.png

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.

WanderVision Site Map.png

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.

UX Persona.png

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.

Screen Shot 2021-10-21 at 5.23.24 PM.png
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.

Screen Shot 2021-10-21 at 5.35.30 PM.png
MID-FIDELITY DESIGNS
Screen Shot 2021-10-21 at 5.52.48 PM.png
MID-FIDELITY ITERATIONS

Onboarding

Low-Fidelity

Onboarding.png

Mid-Fidelity

Onboarding_ Choose Locations.png
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

Landing Page.png

Mid-Fidelity

User Dashboard (1).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

Globe View.png

Mid-Fidelity

Globe View (1).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

Focus Screen_ Default.png

Mid-Fidelity

Focus Screen_ Message View.png
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.

Branding Guide.png
FINAL SOLUTION
 
HIGH-FIDELITY DESIGNS
Screen Shot 2021-10-28 at 2.20.05 PM.png
MAIN FEATURES

Account Creation

2be737f7bfd5606211362b6baa8bc05de5386d90.gif

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.

2e5adc1726505830fc576a520f6fe816c5c84b0d.gif

Map View

00af6e2134d203acff4b776b2e922157b8da4afc.gif

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.

7f530bc6a0289cebdf2c530f2288718e121727de.gif
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.