Mariana Manrique

Illustration of a paper plane.

Translating legacy in Fast2

Icon of a goal.

Goal

Fast2 is a software initiative from Service Works Global. SWG’s objective is to be the go-to company for property management. They already have a large presence in Sweden with their native software and multiple mobile apps.

"We want to develop a web app that has all the features of our current software."

- Project manager of Tekniklyftet in SWG.

Icon of a 3 users.

Users

Fast2 has two core users, the building managers, and the people that perform the work orders.

They have different contexts and points of interaction. The managers access the system from a stationary point, usually their office. The inspectors and order workers access the system mostly from the field, but sometimes they might complete and close the order from the office.

image of the users, one is a manager and the other is an inspector.
Icon of a box.

About the product

We developed a web app called Fast2 to replace and combine the native software and mobile apps. This reduced the points of contact and the error input liability.

In the Fast2 web app the users are able to perform all the actions needed for the completion of their job. The user journeys were simplified mostly by identifying and categorising the functions. So the interface presents only whichever functions are relevant for the user’s role. This helped with the optimisation and usability of the user journey, without sacrificing a lot of functions.

The web application also resolved the challenge of managing two distinct user touch-points, mobile and desktop, by providing a unified experience across platforms.


  • Mobile prototype for the dashboard and management of errands.
  • Desktop prototype for the dashboard and management of errands.
Icon four puzzle pieces.

The team

We were a fixed team working exclusively in the Fast2 web application. We worked on-site together for 2 years, so we were completely in sync.

Illustration depicting one character.
  • One Project Owner
Illustration depicting two characters.
  • Two Backend developers
Illustration depicting one character.
  • Three Frontend developers
Illustration depicting one character.
  • One UI/UX designer (Me)
Icon of light bulb circled and being surrounded by circles.

The process

I started with a workshop where we could breakdown the goal and understand the system and its shortcomings. The outcome of this workshop defined the pain points, the users, and the flow of the processes. From this we decided that the solution to be worked on would be a web application with role-based access.

image of four sections, showing the outcomes of the first workshop.

Then I organised a workshop where we established the relationship between the existing software and apps. The result was the identification and documentation of the most important user flows. With this a roadmap of the product was created. We then used this information to create a map of the future Web app so everyone would know the structure and features to be developed.

image of the webapp structure, showing the overall architecture of the flows.
  • Map of the Web application's structure.

Considering there was no existing design system, I started a Figma file and defined a colour palette, fonts (based on the graphic manual), and created the base components, such as buttons, fields, controls, etc.

screenshot of fast 2's DSL on Figma.
  • Snapshot of the DSL created.

We worked with an agile methodology, so most of the design sprint cycles for the features and flows worked like this:

1. Research & sketching: I reviewed existing user research and interviewed some users to begin the design of the flows. I sketched some alternatives to explore different layouts and the impact they could have when considering breaking points. Then I had a discussion with the team about feasibility, time, etc.

2. Alternatives: Work in 3-4 medium fidelity wireframe flows. The wireframes were then showcased to users and stakeholders to get feedback.

3. Refinement: I refined the design into a high fidelity prototype and handed over to the development team through Figma and/or meetings.

If the feature required changes after implementation I would go back to step one and restart the cycle.

screenshot of fast 2's DSL on Figma.
Icon of a magnifying glass with an eye in the middle.

Closer look at the product

Close-up of the filters in the start page.
Filters

Integrating specific filters to the listing of the orders. Users don’t have to know the order ID to find the order they are working on.



Close-up of the accordions where the info of the work orders is found.
Priorities at a glance

The work orders were designed as accordions so the essential information can be seen instantly.



Close-up of the buttons and actions available in the expanded accordion of the work order.
Quick actions

On the order expanded, the client can be contacted, the order finished, among other common actions.



Close-up of the work order specific details, showing some of the actions available to complete it.
All operations in one place

The user can get the information for spaces, protocols and in turn add comments, and confirm the inspections of elements.

Icon of three thought bubbles with different colours.

Main reflections

Number 1

Consider scalability from the start. Consider the possibility of growth from the first flow, using modular components so they are more dynamic and easily changed.

Number 2

The web app structure is agreed upon and well documented. Then the team is in the same page about the features to develop, and can provide timely input on the design and direction of the project. Makes for less surprises during the process.

Number 3

Know the big picture. Map all the known processes to have a strategic approach to the creation of the flows. Avoids a lot of re-working.