Workwell Members Portal

— Problem

Coworking space startup needs a digital solution for their team and members to come into the digital age.

Set out to help a couple of entupuenures, me and 4 other designers work to create a seamless product integration that eliminated unnecessary interactions.

With this solution the owners and members can focus on building their business instead of manually book keep members subscriptions, and managing conference room bookings.

See Master Doc

 
Workwell_Hero_Photo.png
 

Team Roles

Frank Cademarti | Project Manager
Angelica Mae Ignacio | Research Lead
Lauren House | UX Lead
Mady Jiang | UI Lead
Jasmine Gao | Designer

Date

Oct- Dec 2018

 

Methods

Time Management
Design Management
Agile Feedback Loop

Practices

Information Architecture
Usability Patterns
Inspiration Boards
User Survey
Infinity Map
A/B Testing
Prototypes
Wireframes

 

Tools

Pen & Paper
Adobe XD
Sketch
Adobe Photoshop
Adobe Illustrator


 

Scope & Planning

As the PM for this project, I set out and created a proposal and timeline to create transparency with the client as well as getting the team working with in their respective divisions ASAP.

See The Plan Here

Discovery

To gain a better understanding of the coworking members behaviors we started by interviewing the Workwell founders. In addition to gaining a better sense of their company, they also gave us insights into the issues their current members faced in their current members. This helped us identify the questions we could use to conduct interviews coworking spaces closer to home to help develop and validate pain points of the Workwell members.

 
 

Memberships Overview

Group 28.png
Group 30.png
Group 29.png
Group 31.png

Workwell offers 4 different memberships that grant different address to physical areas, but also complementary credits for conference room rental or useage on a monthly bases.

  • Virtual Office (No Credits)

  • Hot Desk (2 Credits)

  • Dedicated Desk (4 Credits)

  • Suite (6 Credits)

  • Lrg Suite (8 Credits)

 

Parallel Tracks

This is where I started to send the team down various tracks, to ensure movement in many directions keeping the project on track.


Research

With the whole team green in the coworking space, the industrial designer in me knew I would have to make it to check out the physical space. Gaining a sense and feel for they type of environment people who utilized these kinds of spaces were like. In a two prong approach we placed surveys flyers leave behind with QR codes a quick scan to link to our survey.

 
 

Investigative

Angelica and I contacted various coworking spaces, large establishments WeWork, Industrious and small establishments Phoenix (Alameda) and Vanguard (Walnut Creek) that were more inline with the size of Workwell. We did some onsite visits (Phoenix/Vanguard), as well as virtual tours.

Screen Shot 2018-08-29 at 11.54.25 AM.png

*QR Code no longer active

 
main.jpg
 

Onsite Findings

Phoenix was more inline with the clients set up, smaller, and had a less corporate feel. Two of the most interesting findings we saw were a digitized booking system for the conference rooms, while their events calendars was still analog. This misalignment made us dive deeper into the booking SaaS, but also sparked ideas about color dilination that we reported back to the team.

 
IMG_4972.jpg

Analog Public Calendar

IMG_4973.jpg

Digital Conference Booking Calendar (Cobot)

 
 

Competitive Analysis

Screen+Shot+2020-03-15+at+6.26.44+PM.jpg
 

Software Analysis

cobot-logo-medium.png

Cobot offers extraneous features that may cause Workwell users to be disoriented or get lost.

Nexudus_Logo.png

Nexudus requires payment for each booking, no credit system.

WeWork-Logo_copy.jpg

WeWork utilizes proprietary software, with credit card inauguration.

 

Key Takeaways

Cobot was a current API (seen in photo) that could have been utilized, but lacked certain tool the Workwell team identified. Nexus was another booking SaaS, but did not accept payment, a key feature that the Workwell team wanted implemented. Large coworking spaces, Wework, Industrious had proprietary software installed ruling them out as an option.

We would need to develop a lightweight solution to ensure streamlined processes focused on the pain points of current Workwell users, but what were they?


 

Qualitative Research

Survey / User Interviews

The team started by crafting an initial survey for anyone who utilized coworking spaces. Simultaneously brainstorming questions for potential users interviews. Together we devised as strong script for user interviews, which would be a mix of friends that used coworking spaces, Workwell users as well as a couple of people who anonymous responded via google forms.

 

Interviewee Roles

  • Suite Member

  • Hot Desk User

  • Suite Account Manager

  • Dedicated Desk

  • Suite Member

 

Key Findings

  • 5/5 users enjoy attending social events at their co-working spaces

  • 4/5 primarily use their membership management tools to book meeting rooms

  • 1/5 primarily uses their membership management tool for payment management

  • 2/5 don’t receive complimentary booking credits and always have to pay to use meeting rooms

  • 3/5 interviewees have trouble tracking both how many credits they receive and use each month.

 

Personas

With the research completed the and knowledge of the current Workwell user base, the team created personas to represent each of the users we identified earlier.

 
  • Carousel Click to move >>>


Refinement

Brooding over all our research and data collected, we plotted needs in a 2X2 matrix with User Needs and Client needs to ensure we focused on the most important aspects.

 
Workwell_Matrix.jpg
 

Results

This exercise helped prioritize possible features that addresses the user’s most critical needs.

Complimentary Credit Tracker would be designed from the ground up, keeping in mind all policies handed down from Workwell team.

While the Events Calendar, did not make the top three, the design team determined the overlap with the Conference Room Booking Calendar could pose a potential issue for bookings as well as the number of users interviewed enjoyed this additive feature.

We also decided as a team we would suggest Stripe as a API plugin for the Payments Management Tool for the site.

 
  • Conference Room Booking Calendar

  • Complimentary Credit Tracker

  • Payment Management Tool

  • Events Calendar


UX Design

UX_Cover_Photo.jpg
 

Lauren headed out to tackle the flows for the flows we had identified as a team, as well as starting to develop a dashboard and calendar. Leading this part of the project, Lauren did a great job leading the team though the flows as well as taking feedback to enhance and take the project to the next level.

User Flows


- Set Up Monthly Membership
- Book a Conference Room
- Sign Up for a Day Pass

Booking Conference Room Flow.jpg
Monthly Membership Flow.jpg
User Flow Day Pass.jpg

Lauren and I worked on User Flows to help screens that we needed for the front end site.

Ideation, Iteration, Present, Refactor

The whole team came together to bring countless ideas to the table. Some good, some bad, but all important in some facet. We then used A/B testing to weed though designs to present the best to the Workwell team for feedback.

IMG_5213.jpg
Image from iOS (3).jpg
IMG_5268.jpg
 

Using an agile feedback loop with the Workwell team we completed this cycle in a two weeks gaining key insights from classmates and instructors. Landing on a overall design for the dashboard and calendar we moved into digitizing for testing.

Wireframes

Dashboard

 
Workwell_Dashboard_1.png

Version 1

Users felt, cramped and confused by the amount of information on the screen.

Workwell_Dashboard_2.png

Version 2

Doubling up the CTA to book a room, provided a confusing decision that the user would have to make. This duplication was simplified in the final version.

Workwell_Dashboard_3.jpg

Version 3

Keeping things simple and removing the fat lead us to a clean and simple dashboard with one direct CTA. All pertinent information was on screen including a snapshot of upcoming events.

Book A Room

Workwell_Book_1.jpg

Users got visibly frustrated with the guess and check of this flow. Some even increasing the intensity of their clicks the second time though.

Workwell_Booking_3.jpg

Private events and public events would share the same calendar, data suggest that visibility to this information was split.

Adding an overview of the rooms booking (2) while collapsing, not removing other information like photo of the room, made the user experience more streamlined.

Workwell_Book_Color.jpg

To resolve this issue, we added a toggle feature allowing the user with one simple click to hide public events. We also added color to start telling the story to the Workwell team.

 

High Fidelity

Initial research and initial site visits gave me a good idea of the look and feel that the site should have. We took 3 distinctive approaches Arty (monochromatic), Eclectic and Techy so tasked Mandy and Jasmine with to make inspiration boards that included items that I knew the site would need. Assets included colors, textures or patterns, existing sites as well as icon inspiration

Autumn Colors.jpg
 
Royal.jpg
 
Forest.jpg
Screen_Shot_2018-08-24_at_1.33.11_PM.png
Screen_Shot_2018-08-24_at_1.33.18_PM.png
Natural Green.jpg
 
Tech Aqua.jpg
Screen_Shot_2018-08-24_at_1.39.01_PM.png

**Jasmine did not participate

Resetting Designs

Unfortunately as we worked though some of the final designs, the Workwell team had a change of heart. This put the UI team under a crunch time, working tirelessly to ensure the final screens were completed for the deadline.

Final Solution

Mandy and the team reworked the design settling on a simple clean design with incorporating some

Typography and color story can be seen below.

 
Workwell_Text.png
Heading_Text.png
 
 

Primary Colors

 
Group 3.png
Group 4.png
Group 5.png
 
 

Secondary Colors

 
Group 7.png
Group 8.png
Group 9.png
 
 

Tertiary Colors

 
Group 14.png
Group 13.png
Group 12.png
 
 

Final UI Implementation

Dashboard.png
 

Home Page Dashboard

The final designs stayed with an overall clean designs with a card system that allowed for ease of booking and management of your credits.

 

Book a Conference Room

Implementing design patterns from past experiences, rooms would be delineated by color for easy viewing, and each having a icon and name that help distinguish them from one another. This also supports cognitive memory growth through association for the Workwell team when scaling.

Additionally including a visual key including the amenities for each of the at the top of the page, while also including the same information in the confirmation overlay. Other key features allow the user to view the Booking Calendar by week, or by day to help narrow their search with a simple toggle.

Calendar overview allowed a snapshot at weekly or daily bookings.

Book+Cactus.png

Simple overlay for booking confirmation

 
Events+Calendar.png

Events Calendar

Through the dashboard users can view the different types of events occurring in the space and plan accordingly

 

Payments

To keep track of their finances, users can view their upcoming bill and past invoices. They also have the ability to edit their payment method if need be. On the backend, after research we recommended Stripe as a SaaS best option.

 
blue@2x.png
 

Reflection

We delivered all assets from the final design recommendations to the WorkWell Team who were ecstatic with what we provided. They were not only happy with the visual design but also the final design recommendations solved problems they hadn’t thought of. The WorkWell team is in the process of implementing our design recommendations.

Learnings

Throughout this process many design and management challenges were uncovered. We had two teams and one client to keep on the same page. Informing the client of the process remained a challenge throughout the process, but knowing this would be a challenge from the onset. While disseminating information from client to team seemed to be going smoothly, changes were made to the design in late stages, we had to realign the team and reallocate resources to ensure the project timeline was met.

Future Steps

As Workwell scales, running usability test with new users, as well as existing users gaining more feedback and data to refactor the UX and UI. These next steps will allow to the team to identify KPI success metrics and any missing must have features.

View Master Doc

More Projects