Closer: a pandemic passion project
Project Overview
Problem
2020 was a challenging year, causing changes in the ways many of us interact with each other. With increased social distancing measures and restrictions on what people can do for leisure, there was a growing need to connect people and entertain them in a safe way.
Solution
Closer is a concept that offers activity and cooking box sets designed to be enjoyed together with friends or family anywhere - virtually.
Time
4 weeks (part-time)
Role
UX, UI Designer
Tools
Figma, GSuite
How might we
offer people safe ways to participate in activities with friends and family when they can’t be together in person?
Discover
Desk Research
Problem
The Mental Health Foundation explained that millions of people during the pandemic are experiencing feelings of loneliness, which could lead to mental health issues including depression, anxiety and increased stress.
Recommendations
Stay connected with friends and family
Keep busy with hobbies
Problem
The CDC explained that public health actions, like social distancing, can make us feel isolated and lonely which can increase stress, anxiety, and exacerbate other health issues.
Recommendations
Take care of your body
Make time to unwind
Connect with others
Exploratory Survey
We sent out exploratory surveys to users in our network to gauge how the COVID-19 pandemic affected their lives and the way people interact.
Survey respondents:
41 people responded to our survey, most of which were single women between the age of 25-34, living in big cities
Key findings:
75 % of the participants felt more lonely now than before the Covid-19 outbreak started.
Activities participants missed doing the most (except traveling) were dining out and going to bars/clubs.
Many participants had started new hobbies since the outbreak started.
85 % of participants had experienced larger scale lifestyle changes since the outbreak started.
85% of participants said they would be interested in doing activities with others remotely
Define
Persona
To ensure that we move forward with our users in mind, we crafted a persona based off the insights we gathered from the survey.
Brainstorming
After gaining clarity on the problem our persona, Nina, is facing, we created an initial problem statement and ideated on ways we could help her.
Decision making
We came up with several ideas, but ultimately decided that since Nina missed dining out and sharing experiences with her friends, we decided to merge the two ideas (circles marked in green) shown in the map on the left.
Defining the solution
Thus, we sought to create a product that offered food prep box sets (and other themed sets) that can be sent to multiple people so friends and family can do the same activity together.
Revised problem statement
How might we offer people safe ways to participate in activities with friends and family when they can’t be together in person?
Sitemap
We created a sitemap of key elements to include in our MVP to help prepare us for the design phase.
Task Flow
In our task flow, we mapped out the happy path a user would take upon starting at the homepage and purchasing a box set.
Design
Competitor Analysis
Anne and I reviewed other e-commerce, delivery, meal kit, and even travel websites like Airbnb. We noted pros and cons of each websites and found elements that we wanted to include in our product as well like: crisp clear imagery, story-telling of the experience our product can offer, detailed product page, and reminders of our value proposition.
Feature ideation and prioritization
Feature Ideation
We came up with ideas for possible features we wanted to include to set us apart even further. We generated wild ideas like hologram phone calls where customers could open their box sets and cook together.
MoSCoW prioritization
However, as fun as it was to ideate all kinds of features, we needed to prioritize them in our MVP. Thus, we used the MoSCoW prioritization method to determine which we should include.
Lo-fi wireframes
After agreeing on what features to include in our MVP, as well as laying out the sitemap and task flows earlier, we started sketching on paper with a series of Crazy-8’s exercises. This helped us determine the layout of various pages of our site including the Homepage, Catalog page, and product description page.
Mobile first approach
Our first lo-fi wireframes were done for mobile, to ensure we keep our designs as simple as possible, by designing for the smallest screen first. This helped us have a responsive design approach and focus on the content that is most integral.
Desktop lo-fi wireframes
However, upon discussing with the other designer on the project, we decided that users would likely make a purchase decision via Desktop, especially with our new concept of allowing people to add multiple addresses to one checkout (so that a user can send a box to themself, and their friends in one session). Thus, we moved forward to high-fidelity wireframes in Desktop to test the (possibly) most common use case.
High fidelity wireframes
We discussed how we wanted the UI to look and came to a consensus that it should be simple and inviting, because in the chaotic times, users should find our product as a reprieve from the pandemic related stressors. Therefore, we focused on using light colors like lavender and pink to evoke feelings of peace and imagination. We were inspired by UI trends like neumorphism and included rounded elements like cards and buttons to be more playful.
Usability testing
We conducted 5 usability tests to ensure users understand how each page and certain features work. We prepared a research guide to follow and recorded each interview with participants’ consent.
Testing goals
Homepage: Users understand what Closer is about and how it works
Catalogue: Users understand the products we are offering and how to use filters
Product display page: Users understand how to purchase a shared experience and add-on’s
Cart: Users understand what they added to their bag and how to continue to checkout
Synthesis
After reviewing our notes from the usability tests, we created an Issue Matrix with all problems users faced and their level of severity. We also came up with possible solutions that would alleviate their problems.
Pros
Users liked the concept of sending box sets to friends and family in order to do activities together virtual
Users found the look and feel of the site to be fresh and cute (aside from one user)
Users felt like the overall process of going to checkout was expected (aside from the add-on’s)
Cons
Having an add-on feature as check-boxes on the product page, before a user clicks on the CTA “Add to cart” was confusing
There were some other minor UI issues that need to be addressed
Reflection & next steps
Designing Closer was a great experience, because we were able to dive into a very relevant problem and come up with a concept that could be of interest to people.
Since Anne and I were working on this as a side passion project, we had to really structure ourselves and set a timeline so that we could stay focused.
We were able to as creative and free as we wanted with no constraints, which was also tough because we basically started from scratch. If we decided to move forward, we could do the following:
1. Re-test
Since we already applied the changes we made due to the first usability test, I would want to test it on another set of participants to see if our changes made any improvements in usability.
2. Narrow in on the MVP
Although we did prioritize the features we wanted to include in our MVP, it seemed like the add-on’s made our product more confusing. We should consider removing it for the MVP and revisit the idea later if need be.
3. Conduct more research
Aside from our initial surveys, we could benefit from user interviews to understand more deeply what user’s needs are. We could pick a more specific target demographic to interview (perhaps similar to our persona Nina’s) and interview users that meet that criteria. This could help us craft box sets that are more relevant and interesting for users.