Introduction
My Roles:
UX/UI Designer | Visual Designer
Deliverables:
Tools:
Balsamiq | Adobe XD
Background
In a matter of days, COVID-19 changed the lifestyle of everyone around the world. Global quarantine and social distancing measures meant that businesses had to shut down and people had to remain at home unless they needed to complete an essential task such as grocery shopping. Essential workers continued to meet the demands of a rapidly changing situation. Consumers swiftly began changing their purchasing behaviors causing shortages ranging from sold out PPE to cleared out toilet paper and cleaning supply aisles in grocery stores. Due to the pandemic, demand for certain types of products were high and drastically low for other non-essential items. Unemployment rates hit all-time highs and companies started facing a huge impact on revue.
Due to these increasing challenges posed to the economy during COVID-19, General Assembly DC wanted to explore ways to help affected small businesses, so they came up with a 24-hour remote design-hacking competition to design and develop potential solutions. Four teams of UX designers (all working remotely) participated in the design sprint. My team consisted of three members and our concept ended up winning based on our design approach, practicality, and technical impressiveness! This article is a case-study of my team’s process in developing our solution for the design hackathon.
Lean UX — Double Diamond
Discover
Researching the effect of COVID-19 on small businesses
Given our general challenge for the design sprint in the morning, our team began by discussing the various situations small businesses can face due to the effects of COVID-19 and social distancing. By conducting some quick primary and secondary research, our team came up with three main observations:
1. There are certain industries getting crushed (i.e. entertainment, hospitality, events, airlines, etc.) and other industries (i.e. amazon, consumer packaged goods, etc.) thriving due to increased demand for certain products around the pandemic.
Mark Cuban describes the situation aptly in this clip (starting at 6:26):
2. Certain companies have started to pivot their businesses to start manufacturing products with high demand during the pandemic in order to cover massive shortages.
Scrolling through my instagram feed, I noticed Compass Coffee DC (a popular coffeeshop in the area) decided to start manufacturing hand sanitizer with the space they had available and took the opportunity to repurpose their resources.
Within a matter of days, Compass started selling hand sanitizer (an item sold out in most places) in their cafes to customers who needed them right away. There were also other companies (example: Christian Siriano’s fashion house to mask factory) deciding to pivot in order to fulfill the needs of society around the pandemic.
Check out the full post here:
Welcome back to Instagram. Sign in to check out what your friends, family & interests have been capturing & sharing around the world.
3. Many small businesses have to lay off employees and struggle to pay rent if they have to remain closed due to social distancing measures.
These businesses that have worked so hard to grow continue to lose more than they gain in profits and have no way of using or sustaining the resources they currently have. Once the economy reopens, these businesses need to maintain a certain level of profit in order to start back up again.
The idea of certain industries thriving, pivoting businesses, and struggles around underutilized resources got our team thinking about how small businesses can continue earning profit while utilizing available resources and how certain businesses may have underutilized spaces available to meet the needs of manufactures who want to meet the increasing demands of consumers.
Define
Discussing user scenarios and pain points surrounding the small business community
Once we discovered the three main issues surrounding small businesses during COVID-19, our team decided on a concept for a platform that would alleviate all three situations.
Goal: By creating a platform that connects potential or pivoting manufacturers, who are facing unusually high demand for certain products, to underutilized spaces (such as kitchens/restaurants, bars, coffee shops, etc.), the D.C. small business community can maximize production efficiency and create new job opportunities despite the challenges caused by COVID-19.
Develop
Concept sketching and wireframes
Once we defined our goal at the end of the afternoon, the team separated for a couple hours to sketch out their ideas.
Here are some examples of my initial sketches I shared with my team:
We finished our individual sketches and came back together to share and discuss what features and elements we wanted to incorporate from each of our concepts. This process allowed us to finalize a user flow for the app at the end of the evening.
User Flow
Deliver
Prototyping the Minimum Viable Product (MVP) using Balsamiq
Once we shared our concept sketches and determined the user flow for our mobile application, our team spent the rest of the night putting together a clickable prototype. We decided to split the flow into sections, so we each picked a part of the flow and started designing. I focused on the search section and company profile screens. In the morning, we came together as a team to iterate on our mockups and build a cohesive, clickable prototype.
Here are mockups of the screens we came up with for the MVP prototype:
Try out the clickable prototype here.
We presented our process and platform to the other teams participating in the design sprint at the end of our 24-hour design sprints and the everyone voted on each concept. Open Kitchen ended up winning the competition, which made our team proud of the hard work we put in to find a solution that had potential to solve the challenges posed by the pandemic.
Bonus: High-Fidelity Mockup
Using Adobe XD, each team member created hi-fi mockups for iPhone, MacBook, and iPad
The week following the design hack competition, the teams had the opportunity to build out hi-fi mockups and prototypes of their concepts. Each team member created individual mockups of a mobile application, web platform, and one screen for another platform.
Starting the process of designing my hi-fi mockups, I decided to look at some similar platforms for user interface (UI) inspiration.
Once I had an idea of what elements I wanted to include in my user interface, I chose a color palette and UI patterns in order to maintain consistency. After deciding on the color palette and UI patterns, I wanted to create a logo for Open Kitchen that symbolized the concept. I decided to use icons to represent manufacturers and open spaces while adding arrows pointing in both directions in between them to indicate a connection.
• Color Palette for High-Fidelity Mockup •
• Open Kitchen Logo •
Based on my wireframes from the 24-hour design sprint and our team’s clickable prototype, I made a few iterations to create a hi-fi prototype using Adobe XD. Due to the time limit, I prioritized which tasks users needed to accomplish for each type of platform and created responsive designs based on the most critical features.
Since our team didn’t have any wireframes for the web platform, I started by quickly sketching the pages I wanted to mockup for the web version.
I took elements from both the app and web versions to create a responsive screen for an iPad.
Conclusion
While participating in my first design sprint, I had the opportunity to collaborate with two incredible and talented team members. Despite the challenges of remote collaboration, we used lean UX methodology to come up with a potential solution within 24-hours for small-businesses affected by COVID-19 and our process made me realize that determination and design-thinking can yield tangible results in a very short period of time.
Open Kitchen presents a solution to facilitate the connection between manufacturers and underutilized resources in a way that keeps up with consumer demand, creates pivoting job opportunities, production efficiency, and minimizes business losses for companies affected by COVID-19. Our concept aims to create a mutually beneficial solution for all types of business during a complex and challenging time.