UX|UI Designer
About:
RETROffice is a native Android App designed to bring teams together, even while working from home. Packed with games that encourage professional development and team-building, it'll be like you're back in the office-- just like the old days!
Team: Mads Motush
Roles: UX researcher & Designer
Tools: Figma, Photoshop, Marvel POP app, Pen & Paper
Timeline: 10 Weeks
This is the plan I would use à la the Double Diamond User Research technique
Problem Space
Since the beginning of Covid-19, we have seen a 40% increase in reported mental health struggles amongst work from home employees (CDC.gov). Clearly a problem exists: What can we do to help this overlooked cohort? What is the root of the problem? I decided to do more research through one on one interviews with target subjects. I would further pare down my focus group to employees who were now forced to work from home and go about finding some of my target audience to interview in order to figure out the following:
- Why are people feeling depressed?
- What can I do to help them feel better in their current situations?
I'd focus my research by utilizing using the question "How Might we encourage employees to socialize more authentically with their coworkers when they're working from home in order to lessen feelings of isolation the environment creates?
Discover
After performing initial research to flesh out my problem space, it was then time to accrue some research from primary sources: the office workers that I cared so deeply about creating a more authentic socialization experience for.
Research Participant Criteria:
1. Have formerly worked in an office environment
2. Started working from home post Covid-19
3. be between ages 20-40
Synthesis
After performing 4 interviews with my target population, I'd then go on to synthesize my findings into a more palletable form that could be broken down into the aforementioned three themes:
Intentionality
- employees need to take bonding into their own hands as employers aren't encouraging WFH bonding
- it's impossible for teams to communicate without prior planning
Accountability
- it's easy for users to procrastinate when working from home because of temptations
-WFH impedes job performance because it's not possible to see what others are doing
Communication
- users want to be able to communicate with their colleagues easily
- users want to do fun things with their colleagues like they used to
-users have to communicate with their colleagues on a daily basis
- communication feels inauthentic
From these interviews I would then create my persona, Jamie Peters. She'd help me narrow down my target audience along with fleshing out her specific problems now that she was Working from Home.
Define
After creating my persona, I'd then go through Jamie's experience from the starting point of working from home to her current point in working at home in order to get a more holistic view of the situation and further explore the problems she was facing.
From the interview findings & organization of my research, I was able to create user stories which then helped me to define a task flow to focus on. I saw the low point in Jamie's journey, her frustration with lack of bonding and inauthentic communication as an opportunity for a design intervention. I would utilize the following user story as a way to extract this issue into a feasible solution.
I chose this user story to base my primary task flow off of because it was both relevant to my users issue of not feeling like she's having an authentic interaction with her coworkers and also was viable for business, as shown below on my Value Proposition Canvas:
The user stories stage was critical because it created a tangible artifact of user problems.
It would also serve as the base of my primary task flow:
Develop
After creating a task flow, I would then go on to creating some initial sketches of what the product should look like based on the needs of my target users. In order to coincide with Jacob's Law from N&N group, I took inspiration from other gaming apps like Houseparty and Skribble.io to assist with the building process.
Once I had some sketches I felt good about, I began to translate these into a digital wireframe.
Then, it was time to test RetrOffice's usability with the following goals as test criteria:
Research
1. Logging in
Are users able to log in via the home screen without any issues?
2. Start game
Are users able to figure out how to start the game?
3. Invite Colleagues
Are users able invite their colleagues?
4. Play Game
Are users able to figure out the instructions of the game?
5. Accept Reward
Are users able to accept the reward after the game?
I would then begin User Testing after the creation of my first digital wireframe.
The results of my first round of testing produced the following results:
From this data I would create a second iteration of digital grey scale wireframes with the following notable improvements:
1. Logging in
Round 1
- changed the language from Sign in/Sign Up to Login/Register
2. Start game
-- changed the home screen to include additional information/and help section
- added affordance to game selection screens to hint towards additional content
3. Invite Colleagues
- added different color to tab bar to indicate visibility of system status
4. Play Game
- clarified language of "next prompt" to "next drawing"
- added icon next to player to indicate their status as drawer vs. guesser
5. Accept Reward
- changed exit button to be larger
- made "exit" button on par with the "play again" button
It was then on to round 2 *ding ding!* of User Testing with my new and improved greyscale wireframes (seen above). These wireframes would yield me the following results from my user testing.
From this second round of data with all new participants, I would create a second iteration of digital grey scale wireframes with the following notable improvements:
1. Logging in
Round 2
- changed the language from Sign in/Sign Up to Login/Register
2. Start game
-- changed the home screen to include additional information/and help section
- added affordance to game selection screens to hint towards additional content
3. Invite Colleagues
- added different color to tab bar to indicate visibility of system status
4. Play Game
- clarified language of "next prompt" to "next drawing"
- added icon next to player to indicate their status as drawer vs. guesser
5. Accept Reward
- changed exit button to be larger
- made "exit" button on par with the "play again" button
A visual summary of the design changes can be seen in the following carousel:
Deliver
Branding & Moodboard
Once a prototype was developed, I would then go on to inject design elements like text, color and branding elements. The mood I wanted my design to invoke was something fun and simple yet professional. I found that the colors purple and yellow did well to foster these feelings in my target users, I also included elements from vintage board and video games to hark back to a time before Covid-19 as an attempt to create a sense of worry-free fun in my user base, something I think the fonts "Exo" and "Aldrich" conveyed quite nicely.
Finally I had a product I was ready to show to the world: RetrOffice.
Polishing
After creating a high fidelity prototype of RetrOffice, I began to put a bit more thought into the types of contexts it could be used in. Not only have I created a marketing website that incorporates branding and information about the site, I also created a potential mockup for RetrOffice’s use as a Google Chrome Extension as that is something target users stated they would like to see for the next iterations of the product.
Next Steps & Reflections
In retrospect (but not conclusion as design is never done!), some next steps that I would like to pursue are to:
1. prototype more game functionality
2. improvements to the the reward system in order to put more focus on congratulating the user
3. playing with the information architecture to better reflect apps on the market today.
Some key learnings and Personal Reflections I have found through this the creation of this project are the importance of organization in design and also the importance of using inspiration that customers are used to seeing in other competitor products.