Case Study : M-Work
Final project
For my last weeks in Ironhack bootcamp, I had the pleasure to work with Amalia on the project we wanted the most 🙌🏻
Project brief and context
Our client, M-Work, is a young start up that was created last December (2020), by Édouard et Josephine.
They observed a rise in isolation and real estate prices, long and painful transports to go to work and a development of remote working, which define their mission : make remote work fair and accessible to everyone, in the best conditions near their home.
Our job for that two weeks project was to redesign their native web application and remodel the end user flow (the employee or freelancer who wants to book a place to work).
We spend the first week on the user experience design and the last one on the user interface design, applying the design thinking method. We used retro-planning to give deliverables on time to the client (and have their validation) to keep up with our schedule.
To start the project, we defined our mission in a workshop meeting with M-Work, where we learned a lot of insight on the company and remote work market. Then we made a wire flow out of the existing application.
User experience design
Empathize
We empathize with the user, using several design thinking tools.
Feature analysis
We started with a feature analysis to study six competitors to see what the current market is proposing. While going through these proposals, we understood the importance of certains features, (such as a listing of assets present in space listings, or highlighting eventual events) which help us to see what users are used to and expect for that kind of services.
Secondary research
To precise our findings we did some secondary research on remote work, and found out that 86% of workers like and want to keep working remotely because they feel more responsible. 72% felt less tired which provoked a decrease of work absences and also 26% felt down or alone, which made people rethink the interaction to avoid isolation. All this data validated the client assumptions.
User research
Then we made a survey and five user interviews on people used to work remotely (a freelancer, and 4 employees, one of them managing an all team of remote workers), to add qualitative data to our research.
We made an affinity map and an empathy map to gather all the insight, understand gain and pain and see remote work through the user’s eyes. Those tools highlight that the job to be done here is giving users flexibility.
To synthesize all this data, we create a user from all the collected data quantitative (the survey) and qualitative (the interviews): Laetitia, our primary user persona.
And create a user journey map, in order to see all the touch points that she could have on her day to develop the best user flow (and content) as possible.
DEFINE
The empathize stage helped us to define the following problem statement:
Our suburban employee that has the flexibility to work remotely needs to find a way to reserve a custom work space near her home because she needs a clear separation between her private and professional environnement without wasting time to get there.
Hypothesis statement
We believe offering a dedicated place to work, comfortable, dynamic and studious for remote workers will improve workers focus, efficiency, wellbeing and feeling of freedom and therefore increase work enjoyment, which is beneficial to their company. We will know we are right when the employee gives us positive feedback and when the number of companies paying for their employee’s remote work space increases.
How might we
Those illustrated our focus point: gain of time, flexibility and validation of the employer to finance the space cost.
- help her gain time by finding a space tailored to her needs near her home
- help her find a space that is flexible and available on a day to day basis
- help her get approval and financing for this space by her employer
Our Minimum viable product being allow end users to book a space to work remotely near their home on the M-Work native web application. We prioritize different features using the Moscow method.
Sitemap to-be
We made a sitemap to-be, gathering, organizing and creating all M-Work content and develop two parts; work space and worker profile, in order to complete our MVP.
User flow
To facilitate the user path and have a clear direction to gather the team, we redefine the user flow with a happy path.
The user here is downloading the app for the first time, setting up his profile with payment information, going to the home page to look for a place and book it. At the end of the M-Worked day the user receives a push notification to rate the experience and fill the feedback page.
User Interface design
IDEATE
Wireframe & testing
With client validation we started the wireframe.
We made some concept sketching that we tested with three users. The users feedback where implemented on the mid-fidelity prototype. We iterate and test a few times, to implement the necessary changements.
Visual competitive analysis
While conducting the visual competitive analysis, we saw that competitors mostly used a combination of blue and white with a small accent of warm colors, except for Offeaze that use a peach color (with blue) as brand color.
We can see that Offeaze, Deskapad and Neo-nomade used darker colors which make them feel more serious than Cowop and Codi who seem more fresh, dynamic, young, this is also because of the illustrations present on the web-sites.
M-Work visual analysis
M-Work uses a combination of orange and blue to differentiate the B2C and. B2B sides of their services.
This is a smart choice because orange color is dynamic, stimulating for the senses and intellect and expresses creativity. The blue color is often associated with reliability and seriousness which is why it’s largely used in corporations. However in this case, the two colors have a harsh contrast, and inspire a clear rupture which was not the idea. Same for the illustrations are supposed to give a friendly touch to the website, but the choice of that particular drawings miss the point as the people have no faces, and their shape made them look stuck. They do not inspire flexibility nor dynamism.
Mood-board
During the kick off meeting, we brainstormed on the values important to M-Work and made a mood-board to illustrate them. This work defines the brand attributes: freedom, conviviality, sharing, success and efficiency that guided our user interface design choices all the way through the end of the project.
Style tiles
After our visual analysis of M-work, we wanted to create a bigger sense of humanity so we changed the existing color palette. We used the logo gradient to warm up the application and slightly changed the orange and blue tone to have a smoother contrats. We kept the original font, Montserrat, that has clear and rounded shapes giving a smart and friendly touch. We changed the illustrations, for more joyful, dynamic and human figures.
Atomic design
To build a high fidelity prototype as consistent as possible we use an atomic design methodology to organize our library of components and variants. We design for iOS and as we used gradient as the brand color, we choose to go for flat design, and remove the shadows from our components.
PROTOTYPE & TESTING
High-fidelity prototype
We built an interactive prototype using Figma, and conduct three desirability test before having our final result :
Prototype storytelling
Laetitia, the autonomous suburban employee, uses M-Work native web application for the first time.
She inputs her email and password, and creates an account. She filled her profile information and selected the payment method. Her company gave her a code so she doesn’t have to pay herself. She allows notification and save.
Now on the home page, she starts looking for a nice place to work remotely near her home because she needs a clear separation of her private and professional life.
She inputs the address, sees the selection, then the date, the selection has narrowed and finally she selects a filter “ergonomic chair”, which gives her four results.
She watches two listings, the first seems nice, she adds it to favorite to find it easily next time and selects the second to try on. She booked the place the company payment is on, great! She received a confirmation informing that a receipt has been sent by email to her and her employer.
Then she can check her booking and edit or cancel, the one she has if needed.
Laetitia is intrigued by Hosting in the navigation bar, she taps on it and understands that she can propose a place for people to come M-Work into by reaching out to the company by email.
The day of remote work arrived, she went to the booked place and in the evening, she received a push notification. She can now rate the place and give feedback on her experience there. That information is saved in the “My Journaling” section in her profile, so she can see the changement remote work has on her daily life.
This project was in the top 3 best final projects of the Ironhack april cohort. And was presented during the Hackshow a Eventribe event.
Next Steps & learnings
As a next step we would have conducted accessibility tests more in depth, for the colors, particularly with gradients where it could be tricky, and would have liked to work on the website to make it match the application design.
For this project I was very happy to work with a real client and discuss our project mission with them. I learned that good communication is key to success and efficiency in work and also in life!
Thank you Joséphine & Edouard for making us part of your adventure for two weeks!
