Workery

Workery

An online marketplace to find your next workspace. Role: Product Designer

Background

Workery is an online marketplace designed to connect freelancers, entrepreneurs, and start-ups to on demand and long term office spaces. The focus will be creating a new logo, brand, and identity as well as creating a responsive website that involves search, filtering, booking, and scheduling.

Problem Statement

How might we make finding a new office space easier for users?

Users & Audience

Individuals or companies searching for long term or short term office space.

Process Overview

  • Research Competitive Analysis User Interviews
  • Define User Persona Empathy Map Problem Statement User Flow
  • Design Low Fidelity Wireframes Logo Design Style Tile UI Design UI Kit
  • Test High Fidelity Prototyping Useability Testing Affinity Map Priority Revisions

Research

Competitive Analysis, User Interviews Timeline: One Week

Competitive analysis was conducted by first looking at direct and indirect competitors. Strengths and weaknesses were assessed, both on a functional level as well as the UI design.

Individual interviews were conducted with users that had recently secured or were currently searching for long term or short term office space.

Competitive Analysis Findings:
Competitor: Liquid Space
  • Strengths
  • Many different types of spaces available
  • Extensive filtering
  • Map view
  • Realtime availability
  • Live chat
  • Save search
  • Cool tone color palette
  • Vivid photography
  • Consistent modern UI
  • Weaknesses
  • Confusing navigation
  • Cannot hide map
  • No option to hide listings already viewed
  • Low contrast on text
  • Multiple sticky headers don't leave much space to view search results
Competitor: Share Desk
  • Strengths
  • Search hourly, daily, or monthly
  • Clean card layout
  • Reviews available
  • Map with pin preview
  • Social login
  • Realtime availability
  • Clean minimalist design
  • Neutral color palette
  • Weaknesses
  • No option to hide listings already viewed
  • No back to top
  • Can't hide map
  • No live chat
  • No thumbnail previews
Competitor: Breather
  • Strengths
  • Option to toggle map
  • Save search
  • Ratings available
  • Sort by price
  • Extensive filtering
  • Live chat available
  • Clean minimalist design
  • Neutral color palette
  • Weaknesses
  • Limited to a handful of major cities
  • No option to hide listings already viewed
  • Inconsistent grid and margins
User Interview Findings:

Each interview was insightful and some offered information that would be helpful in the overall research process. Participants were 75% male and 25% female between the ages of 36 - 47.

  • Pain Points
  • Overall frustrations with customer service
  • Loud common areas at shared workspaces
  • Working from home lacks human interaction
  • Commercial buildings were much more archaic in the process of booking a tour
  • Commercial buildings need a lot more hands on work to set up the offices than a move in ready space
  • Delights
  • 24/7 access with no strings attached
  • Good work culture
  • Clearly listed parking availability
  • Co-working is great for networking
  • Move in ready spaces made the process of moving the team simple
/ / / / / / / / / /
Define
User Persona, Empathy Map, Problem Statement, User Flow Timeline: One Week

After research was conducted, we moved into synthesizing our findings. A user persona and empathy map was created to help tell the user's story.

The user persona was created based on the user interviews and surveys that were conducted. Our objective was to explore a persona that would best represent a typical user of this type of marketplace. The information heard and key findings from our interviews and surveys was used to craft our persona.

The empathy map further explored our persona's thoughts, feelings, actions, pains, and gains. We used direct quotes gathered from the interviews, and noted actions that our users described to us as typical behavior and reasons for using this type of service

Once we understood the user, we were able to define the problem we were trying to solve. Our problem statement was crafted through understanding of our user and our research.

Our user flow was crafted to establish a baseline of how our user would book a tour or book an on demand space using this product.

User Persona:
Josh Goodwin

“The convenience of having a collaborative environment opens up networking and communication. We all want to connect with somebody.”

Persona Bio: Josh is a marketing manager at a midsize e-mail marketing software company. His current lease at a smaller commercial space is coming to an end, and he needs to find a larger workspace that encourages collaboration and creativity for his growing team. Josh’s team works in a fast paced industry and he is ideally looking for a move in ready space with ample amenities, and office basics ready to go.

Age: 46 Occupation: Marketing manager Location: Seattle, WA Archetype: The Explorer
Goals & Needs:
  • Schedule tours online from any device
  • Simple booking process
  • E-mail Confirmation/appointment reminder
  • Real time tour availability

Frustrations & Fears:
  • Not enough filtering for specifications
  • No or few user reviews
  • Unclear or archaic way of scheduling tours

Associated Brands:
  • Skype
  • Amazon
  • Uber
  • Open Table
Motivations:
  • Collaboration
  • Networking
  • Convenience
  • Amenities

Tech Knowledge:
  • IT & Internet
  • Software
  • Mobile Apps
  • Social Networks

Personality:
  • ExtrovertIntrovert
  • SensingIntuition
  • ThinkingFeeling
  • JudgingPerceiving
Empathy Map:
  • Hearing
  • User reviews
  • Conversations at work about improving collaboration and creativity
  • Business podcasts
  • Thinking & Feeling
  • “What will appeal to my team?”
  • “Can I find something within budget?”
  • “I don’t want this to be time consuming.”
  • Excited
  • Overwhelmed
  • Seeing
  • Retargeting ads from visited sites
  • E-mail newsletters for business managers
  • Employees working in shared offices
  • Doing
  • Compares prices
  • Visits multiple websites, multiple times
  • Creates lists
  • Discusses with colleagues
  • Reads relevant articles
  • Pains
  • Budget constraints
  • Time constraints
  • Gains
  • Better communication between employees
  • Better collaboration and creativity
  • Improved moral
  • Room to grow
Problem Statement:

How might we make finding a new office space easier for users?

User Flow:
User task flow
/ / / / / / / / / /
Design
Low Fidelity Wireframes, Logo Design, Style Tile, UI Design, UI Kit Timeline: One Week

After defining, we moved into design. Wireframes were built out in Sketch, and prototypes were built on Invision to help map out the user flow, as well as provide a starting point for our usability testing.

After wireframing and prototyping we moved into branding and identity. This included logo design, typography choice, photography style, and color palette.

The key adjectives established for the Workery brand: Community, Innovation, Creativity, and Collaboration.

The logo design features a modern look and feel with a cityscape skyline icon.

The color palette created incorporated cooler tones with a pop of warmer accents.

Mobile Wireframes:
Hover over the device to view the design
Home mobile wireframe
iPhone iPhone
Home mobile wireframe
iPhone iPhone
Home mobile wireframe
iPhone iPhone
Logo Design:
Workery Logo Design
Style Tile:
Workery Style Tile
UI Design:
Workery Homepage
UI Kit:
Workery UI Kit
/ / / / / / / / / /
Test
High Fidelity Prototype, Usability Testing, Affinity Map, Priority Revisions Timeline: One Week

A high fidelity prototype was built on Invision using our UI design. We conducted usability testing in person, remote via Skype, and remote via maze.design

Some of the findings from our usability testing indicated some of the users were a bit confused as to where to click to enter a single item listing. Another common finding was that some of buttons and form field inputs were not easily distinguishable between disabled, active, and hovered states.

We used our findings from the usability testing to iterate over our design and prioritize revisions that would enhance the users experience.

Affinity Map:
Workery Affinity Map
/ / / / / / / / / /
Final Thoughts
Reflection, Next Steps, Lessons Learned

There were many takeaways from the Workery project. Finding participants for interviews was a bit difficult, as we had established a very specific criteria for users we wanted to speak to. Overall, our interviews led to very insightful information and helped us determine a clear path to creating our persona, empathy map, and user flows.

This project was approached mobile first in terms of wireframing and UI design, which presented both a challenge and an advantage. It made us consider how to best lay out our content and elements to a user that is consuming this content on a smaller screen. Information was presented in a way that didn't require a lot of scrolling or searching to get to.

Next Steps: Fully flushing out the high fidelity prototype. There are a few different flows of navigation that need to be built out, including the flow for booking an on demand workspace.