Pocket Office
A smart app for an optimized home office
Briefing:
MIT Media Lab. Startup - robotic furniture.
Boost Pocket Office purchase in Spain for 2022.
The App should facilitate pocket office customization
Solution outcome
The clients briefing brought us this challenge, they needed it a solution to make their number one product, pocket office, a modular desk, design to fit in small spaces for people who are working from home, more approachable to possible clients and also to the ones who already had the product. That is why we decided to create an app capable of giving the clients almost full control over the most important functions of the pocket office desk.
This was certainly a challenge, but a great learning experience.
The app had four main flows 1. On-boarding, 2. Set up shift start, 3. Set up Breaks, 4. Light set up
Research Process
-
Defining the challenge
Briefing
We started analyzing client/business needs.
Client, Oriliving MIT Media Lab., needed it a solution to make the pocket office, more approachable to possible clients and also to the ones who already had the product.
-
Research process
Quantitative and qualitative techniques
The research strategy chosen was: qualitative with interviews to a sample of 8 individuals: 5 women 3 men age ranges 25 to 55 years old. We also used quantitative technique, surveys to measure viability
-
Defining the possible user
User Persona
Of our 8 people sample we created this user persona, Martina, 29, Senior Art director, Lives in Madrid center. Engaged. Nowadays working from home.
-
Defining design strategy, getting to the value proposal
Catching Value
Get inputs (externals or internals), Analyse (research technics, rational focus), get outputs.
Insights: key ideas from the users which help us validate or design alternatives.
-
Getting to the MVP (Minimum Viable Product)
Mindset for digital products
Design thinking / Lean Startup / Agile
Ideation process, product validation to start testing phase
-
Sketch - Wireframes - Usability
User journey, Interaction, Testing
This phase gave us a lot of inputs and we were able to realize on possible failures and weaknesses.
Sketches and Framework
A sketch is a distinctive, basic, fast form of drawing used to propose, explore, refine and communicate ideas.
A wire frame is a basic digital sketch, is made in a very structural level, is represented in grey scale and is mostly to test functionality rather visual look, it is mostly used to set down a concept or idea.
MODES
ERGONOMICS
OFFICE
LEISURE MODE / OFFICE MODE
In this screen the user would be able to set up the pocket office in one of the two modes available, leisure mode or office mode, allowing to also set up shifts, breaks, times and automatize the furniture opening and closing.
ERGONOMICS
In this screen the user would find metrics, graphics and data related with his/her posture, good practices, advice, recommendations and everything related with posture and maximize productivity habits.
OFFICE
This screen would give the user the possibility of set up and ambient for his/her work space, increasing comfort, visibility, and optimizing and making more pleasant the time the person need to stay sited working
Wire framing - elements and process.
This was the phase were we started to think about design system, the possibility of built a component library, since we found necessary to have elements and components organized in order to have them available and made easier the design process.
We define we define categories and hierarchies and sine it was decided that the digital product were going to an app, we started to think about the app structure: navigation bar, buttons, cards, slides, fonts, headings, interactions and also we started to considered the Android and IOS Guidelines.
Putting all together.
We started to think about the app architecture: structure, design components (buttons, menus), information hierarchy, simulated content.
The wire framing process started looking for inspiration and defining the main tasks and the flows, followed by resolution and grid in this case on figma, we defined layouts and started to built pocket office.
Building the UI
Trying colors, shapes and contrasts
First sketches and alternatives before getting to the final one
Mood board - Look and feel
App visual universe, this what the app breads. Help viewers to visualize a style using photos, patterns, textures, colors, fonts, objects.
Design System
At this stage of the process we needed to have everything more organized, that is why we built a component library to all team members get easy access to information and make faster and easier the design process
-
Type Face
Roobert
AaBbCcDdEeFfGgHhIiJjKkLlMmN nÑñOoPpQqRrSsTtUuVvWwXxYy Zz
1234567890 !? .,¨
-
Colors
Visual
Brand Colors from 100 to 700. One error color and one Accent.
-
Components
Library
More than 70 components developed and also a few variations made components.
-
Illustrations
Isometrics
Isometric style, since it was a home office desk, this was a more suitable style.
Interaction
App with home automation functionalities to improve user experience using Pocket Office desk.
-
![]()
1. On-boarding
Once the user has the desk at his/her place and already downloaded the app, the on-boarding will guide the person through the process
-
![]()
2. Set up shift start
Using this functionality, the user will be able to set up when his/her work shift starts
-
![]()
3. Set up Breaks
The person will be able to set up the time and duration of his/her breaks during the 8 hour shift
-
![]()
4. Light set up
Here the user will be able to configure the desk ambient light, intensity, temperature and color
A smart app for an optimized home office
Videos
Those are the videos of the main flows designed for Pocket Office
Conclusions
The Pocket office app is able to provide the user with a friendly, customized and accessible experience to personalize the use of the pocket office device, integrating it to their daily life tasks.
