Ofis Product design screens

Ofis - Branding and UI/UX

MY ROLE

Identity Design
Product Strategy
User Research
Visual Design

credit

Illustrations from Open Peeps Library

the brief

Ofis is a remote working space solution developed to cater for the recent shift in the workforce due to the pandemic. Ofis consists of a mobile application designed to simplify the process of browsing, booking and reviewing remote workspace. 
Ofis was created as part of a University project with the objective of simplifying work from home in this new post covid world.

The problem

The problems with work from home culture: 

  • Being indoors for long periods of time, an increasingly number of people have been trying to spend more time outdoors

  • People don't have proper working conditions in their personal outdoor space.

  • There's greater number of distractions at home eg roommates, children, parents etc.

Product vision

Design a product and brand that has a long lasting impact on the society and environment.

The rise of work from home culture has presented many advantages as well as many challenges, thus we started pondering how we can create long term solutions for these pain points and not just create another short term fix. The initial focus was to build the design foundation  that allows future growth for both branding and product development.

Approach

After observing the presented problems I conducted a brainstorming session to ideate solutions for the pain points which were refined and narrowed down to a single idea, prototyped and implemented as the final product. The project took on the lean UX method with the help of a multi functional team and constant communication for quick feedback and reduced bottlenecks.

Lean UX method

Initial Research

Lack of viable productive outdoor working spaces.

We conducted secondary research and interviews to gain a better understanding of the problem and competitors in this market. The results from this helped us create personas for our targeted and potential users. 

The current options for outdoor workspaces are backyard pods that come fitted with power, desk space, lighting and other amenities at a cost of $600 - $900/month or taking your device to a park/outdoor space which has many disadvantages like lack of power supply, uncomfortable working conditions and distractions. This led to a conclusion that currently there are no viable options for affordable productive outdoor workspace.

persona

Name - Ronny Chen
Urban creative
Demographic
  • 22 years old

  • Lives in Sydney

  • University student who works at Canva as a product designer

  • Not married

  • Annual salary of 60k

Story
  • Busy university student has a part time job who stays with his parents

  • Has young siblings who always distract him

  • Craves being outdoor from time to time

  • CEO of balancing university and work

  • Looking for opportunities to further his career

Needs
  • Refreshing space to escape from his siblings

  • To be inspired

  • Safe space where he can concentrate on his work and studies

  • Be able to network with industry experts

  • To be convenient

Solution
  • Open & clear yet safe and quite outdoor space

  • Open learning spaces that facilitates conversation

  • Application that makes booking and paying process convenient

Name -Sandra Smith
Hard working parent
Demographic
  • 36 years old

  • Lives in Parramatta

  • Works for the Parramatta Council as the depot manager

  • Married for nine years with two children aged 5 and 7

  • Annual salary of 80k

Story
  • Big job responsibility

  • Kids around the house are distracting when working from home or after work

  • She want to work outside as she’s usually are at her desk all day at work and home

  • Working inside is having a negative effect on her life since being promoted into a management position after working outside on building sites most of her career

Needs
  • A quiet space to go and finish work when not at home or the office

  • Outdoor environment to help improve her mental health

  • Ability to hold meetings in a new environment rather than an indoor boardroom

Solution
  • Open and quite outdoor space to potentially hold meetings in so she can have some time outdoors

  • Open learning spaces that facilitates conversation

  • Application that makes booking and paying process convenient

ideation

We started brainstorming ideas to address one of our main two insights identified. Displayed below are some concepts that fulfil these insights.

Idea A

A solar Panel case that charges your laptop and provides protection outdoors. Also consists of anti glare technology.

Idea B

A portable lap desk that can be used indoors or outdoors, which includes cooling fans to prevent your device from overheating and solar based charger to charge yours device.

Idea C

A multi purpose Solar powered folding railing bar table that allows people to work outdoors on their balcony. Solar powered for charging devices and the height can be adjusted per customers need.

Idea D

Shared outdoor work pods targeted towards councils of suburb with large work from home population as well a big corporations that encourages people to work outdoors. The space comes with basic amenities of an office, solar panel roof for energy, sound proof space with clear view of the outdoors. The space is accompanied by an app that allows users to browse nearby space, opening times and make bookings.

Idea E

Outdoor ergonomically designed solar chair with waterproof pop up outlet to charge devices, cushioned seats for comfort, solar panel roof acts as sun shade as well as power source and wheel base to move the product around.

concept evaluation

To narrow down the concepts we used concept evaluation framework the weighting for each criteria was derived from user feedbacks.

Concept evaluation template

conceptboard

After conducting research it was visualized as a concept board to showcase potential UI/UX for the application and features for the office spaces.

Higher resolution can be viewed here
Ofis - concept board

branding and positioning

With the ideation process and the target market determined the next step was to create a brand that resonates with the target market and is relatable. To do this we started off with a brand attribute exercise, which allowed us to determine characteristics that describe our brand as a whole. We started off with listing all possible adjectives that describe our brand, then narrowing down to 4 then to 1. This allows us to create messaging that is creative yet aligned with our brand. Through the strategy session we discovered a clear brand story and encouraging voice that goes beyond the office space and focuses on the impact we have on the customers lives.

Ofis Brand attribute exercise
Mission Statement
“Ofis provides an outdoor learning/working hub for customers seeking to recharge in a vibrant innovative culture with an encouraging voice. Helping them feel connected and inspired.”

Now with the creative tone set I went to work to create an identity system that captured the "Refreshing productivity" aesthetic. The result was a minimal type based identity design that reflects the brand mission.

Ofis branding
Ofis website and App design
Mockup designs

Solution - Apps screens and Design Justifications

User flow and information architecture

The user flow and information architecture was created to determine the correct flow of the users, in this instance we focused on the users journey of finding and booking an office space since this is the main functionality of the application.

User Flow

Ofis - User flow

Information Architecture

Ofis - Information Architecture

Design System

The design system for Ofis was built on figma to make the process of designing new screens and updating design efficient. It consists of Typography and type scale, color pallets and various UI components with the use of variant's. It makes the design and development process a lot faster and creates a unified design language between cross functional teams.

Ofis - design system

Office space booking screens

The core function of the application is to make booking office spaces painless, the home screen will provide a personalized list of spaces around the user as well as the most popular spaces. The users are able to filter their search based on type of office, location and time.

Ofis app screen designsOfis app screen designsOfis app screen designsOfis app screen designsOfis app screen designs

booking page

The booking page provides a quick access to all their current and upcoming office bookings as well as the confirmation code that allows users to access the office space.

Ofis app screen designsOfis app screen designs

dark mode

A study conducted by Android authority showed that more than 90% of users use dark mode. Dark mode also provides other benefits like saving energy, caters for some people with visual impairment as well as increases readability. Thus we decided to implement darkmode capabilities within the app that turns on or off based on the device settings.

Ofis - dark mode screen designs
Fueled by 🤍 & passion.