This project began by observing the world around me and identifying opportunities for a design intervention. My motivations were to create a product that could improve a user's quality of life. I explored different ideas and concepts in an iterative process, taking steps forwards or backwards as I verified my design decisions through user feedback and usability testing. The final outcome was a high fidelity prototype that can serve as a proof of concept for additional iteration.
The tools and software I used for this project were Sketch, Photoshop, InVision, and of course – pen & paper.
In March of 2020, the World Health Organization declared the COVID-19 viral disease a pandemic. At the start of this capstone project in July 2020, it was clear that this novel coronavirus has impacted the world and affected our day to day lives. As public buildings, restaurants, and office spaces closed for lockdown, a shift towards remote work presented new challenges and issues for the office worker.
Telework is a trend that is growing rapidly as evidenced by dramatically reduced office occupancy and a more than a 100 percent increase in regular telework (at least one day per week) since 2005. A shift towards this remote working culture presents new challenges for telecommuters around human interaction and blurred lines between work and personal life.
With physical distancing constraints in place, the entirety of this project had to be completed remotely. This made it challenging to meet with educators and peers for feedback. This constraint was also an obstacle when it came to conducting user interviews and usability testing. Communications were entirely remote and done through voice and video calls.
– Develop a meaningful digital product that can help teleworkers maintain a healthy balance between work and personal life.
– Empathize with users to translate real world problems and concerns into design decisions.
– Apply design thinking and become familiar with the User Experience design process.
EMPATHIZE & DEFINE
To develop a greater understanding of the problem space, I began by looking at existing research and publications on the state of remote work and the future of office spaces.
A shift towards remote work will ultimately impact the usage and design of office spaces. I reached out to my network and scheduled a coffee chat with a design director from Gensler, a global design and architecture firm, to gather some insight on the future of office spaces.
I conducted a survey to gather more insight on telecommuting and how respondents felt about their productivity, communication, and social interactions while working remotely. This survey received about 100 responses, many which were within my target user demographic.a
From the survey that was sent out, I was able to organize more in-depth interviews with select respondents. This helped to investigate how users felt about their current work lifestyle and if they were open to embracing technology as a digital solution.
From my user interview findings, a common pain point was the feeling of a blurred line between work and personal life. Other issues included challenges in completing certain tasks remotely and working in small spaces (e.g. bedrooms or living spaces)
Working remotely has been an option for years. The trust in empathy is key for innovation. Face to face interactions are an important aspect of this, it’s the trust that you build with colleagues that is important and not your levels of education or experience.
Putting all of this research together along with insights from my survey and user interviews, I was able to have a better understanding of remote work. Telecommuting has been a rising trend, and with the 2020 global pandemic that is unraveling, the need for re-evaluating our relationship with work is vital.
EMPATHIZE & DEFINE
Creating a persona helped to synthesize all of the research data and insights into a tangible and understandable form. Erica, our fictional persona, helps to represent the motivations, pain points, and behaviours of our target demographic.
This experience map helped to illustrate and visualize what Erica’s experience might be like while working remotely. It takes a look at the environment around her, how she is feeling, what she interacts with, and opportunities for design.
At this point, I had key research insights, a persona that represented my target users, and a better understanding of the teleworking experience. From here I was able to begin thinking about my core value proposition and what my minimum viable product would be.
The user epics and stories that I explored addressed challenges related to communication, productivity, and disconnecting. What I ended up focusing on for a core epic was on helping users unplug and disconnect. This is the most compelling narrative because it’s representative of the greatest challenges when working remotely as discovered from my research.
Now that I have an idea of what types of features and solutions I could explore, I thought about when the user would use this product.
The concept I decided to develop was the second concept. This wire-flow was interesting to me because of the step-by-step, screen to screen flow that occurs after the user presses the “End your day” button. Indicated by the progress circles, this concept creates an almost ritual like experience for the user when they decide to sign off using the app.
Producing a medium fidelity prototype was the next step in translating my analog sketches into the digital space. I took this opportunity to begin thinking about basic visual elements and the user interface. Working at this fidelity level helped to stay focused on functionality rather than pixel perfect visuals (that’ll be for later).
Using only grayscale helped to work out the visual hierarchy of each element before injecting colour in the later stages. For the purpose of usability testing, I also attempted to select shades of gray that would not cause contrast issues with white or black text.
I decided to use cards and a rounded language for my user interface so that I had a flexible system to work with. Each card can have varying levels of visual depth and information content depending on the usage.
Working in medium fidelity, I started to introduce elements that helped relate back to the product features and user stories. Progress bars helped give user’s a visual indicator of time. Pills helped to suggest filtering options for event searching.
Using the medium fidelity prototype, I was able to begin my first round of usability testing. This was a process that served as an opportunity to verify my assumptions and challenge my design intentions with real users in my target demographic. Receiving direct feedback from users gave me insight into the functionality of the prototype and helped me gain a greater understanding of the problem space.
The usability testing began with a short brief about the project and the purpose of the usability testing, emphasizing that the exercise was about testing the prototype and not the user themselves. I then asked some general questions for background information and tasked each user with 5 specific tasks to complete.
Given the timeline of the project, it was important to review all of the feedback and summarize them into key insights. To help focus on which issues were important to address first, I created a priority matrix that helped to identify key changes in relation to the time and effort it takes to resolve them.
After applying these changes, I developed a Version 2 of my prototype for another round of testing. Conducting these usability tests were invaluable to the design process. An idea or course of action that is obvious to the designer may easily be misinterpreted or cause confusion to a user. Listening to user feedback and observing their behaviour helped to resolve usability issues like the one below.
Before I began user testing, I noticed a potential issue with this prototype. In the above wire-flow, all of the above screens happen within the Dashboard navigation tab. If a user were to accidentally exit this flow in the middle of the process (e.g. by clicking another navigation tab) — how would the user return to their previous screen in the wire-flow?
To investigate this potential violation, I took a look at the Instagram ‘Explore’ tab. In these wire-flows, content within the ‘Explore’ tab stays within the tab. If a user were to click another tab, such as Profile, once they return to the ‘Explore’ tab they will be at the same screen they left off at. This concept can be implied in my prototype by having a ‘Dashboard’ tab that is in a constant active state throughout the wire-flows.
To kickstart the creation of a visual identity for this product, I began with brainstorming words that helped to shape what this product and brand would be.
Along with words, images also helped to define a mood and atmosphere for the product. The feeling I was trying to invoke with this moodboard was something that was a pop of colour, punchy, and exciting. After a few board iterations and colour extractions, this is the moodboard that I felt reflected the idea I had.
Using the direct colour extraction as inspiration, this was the colour palette I decided on. The intention was using the primary and accent colours to bring emphasis to important elements and using the neutral shades to curate a minimal look with a pop of colour.
The selected typeface was Rubik. I choose this typeface for the clear and legible glyphs, rounded corners, and balance between casual and professional look.
With a greater understanding of what this product could be, I began to generate a list of potential names and watermark design ideas. I explored different ideas relating to fills versus outlines, graphic glyphs, positive and negative spaces, and began to introduce colour. After some peer reviews and feedback, I then started to narrow down on specific concepts and colour combinations.
Although I wanted to include more colours in my design, it proved to be a challenge to balance more than one colour at a time. I chose a version that was simple, without any extra ornaments, and using the primary colour only.
After completing two rounds of user testing, visual design explorations, and branding exercises, I created a high-fidelity prototype.
The primary task flow is to search for an event (try Yoga), invite a co-worker to join you, and end your work day by signing off and letting your team know you're done for the day.
Building on the visual design elements and branding, I designed a product marketing website for Unplug. I took this as an opportunity to imagine how the product could be discovered by a user. I approached this with responsive web design in mind, making sure that the content would be optimized for both mobile and desktop.
Using the high fidelity prototype, I would conduct another couple rounds of usability testing to make sure there are no more major issues and that users understand the core value of the product.
Digital wellbeing is an important aspect that I want to raise more attention to. Given more time, I would like to explore features that can remind users to take periodic breaks in their work day. Perhaps this could be setting timers or looking at opportunities to notify users about their screen time and productivity.
When conducting user interviews or doing usability testing, it’s important to ask questions that give insight into what someone is thinking about. It’s important to avoid asking leading questions so that you don’t project any of your assumptions or bias onto the user.
Something that I had to remind myself constantly throughout this project timeline was if a deliverable was realistic to accomplish in 10 weeks (while also working on other course assignments). I tend to spend lots of time working out small details to perfection and can sometimes overlook the larger picture. Creating priority matrices and being more cognizant about my timelines helped me to work on improving my efficiency.
As a designer, it’s tempting to overlook feedback (either from a user or a peer) that you don’t agree with. Reviewing interview notes and key insights periodically helped remind myself to re-align my design intentions with the intended user.
© Henry Mai 2021