Directo: Redesign of enterprise software interface
summary
Employer: Directo • Timeline: 2016–2019 • Role: Sole UI designer
Directo is a business-to-business software as a service (B2B SaaS) for companies who want an all-in-one solution to organise everything regarding their business from invoices to project management. It is widely used in Estonia and has also branched out to Latvia, Lithuania and Finland.
They needed a redesign for their user interface to look more professional and appealing for new potential clients and also for the design to be responsive on smartphones and tablets.
I was hired to work on that, so I created a new visual style and a design system to document it and redesigned some of the most important views of the software. I also did user research, made wireframes and mockups. My CSS was used in the end product and the rest of the design was implemented by developers following my HTML prototypes.
Project included:
UI design
Coding
User research
Wireframing
Mockups
Prototypes
Component Library
Technologies used:
HTML
CSS
Sketch app
Git
Airtable
Typeform
User interface
Here are some of the views I redesigned inside the app. Most clients were using the app on a laptop or big standalone screens, but the design was made responsive so that some quicker things could be done on a smartphone and some specific sections of the app could be used on an iPad.
Process
After getting acquaintanced with the app and coming up with a new visual language, I developed a process that I could use for every new page I was assigned to redesign.
1# Research
In this stage I tried to understand the functionality, users and pain points. The questions I asked were:
What does this page do?
Who is using this page the most? How does this help them with their work?
Any existing pain points I could improve with the redesign?
2# Wireframes + MOCKUPS
I started with brainstorming possible layouts on paper. After having decided on the direction, moved to Sketch app to put together high-fidelity mockups.
3# Feedback
I gathered feedback from people in the company that were experts on that particular functionality or part of the app, sometimes presented the new design to stakeholders and developers in our weekly meetings. Based on the feedback I would iterate and do necessary changes.
4# Prototype
When the mockups were approved, I created a responsive HTML + CSS prototype.
5# Handoff
I forwarded my prototype to the developer who was assigned to implement the new design in the app, so that he could start working on it.
User research
I tried to gather as much information as possible about the requirements and any user pain points I could help resolve with the redesign. During my time working there I used the following research methods:
User interviews
User testing
Field observations
“Biggest Issue Bucket” survey
Regular survey
Stakeholder meetings
“20 second gut test”
Design system
Since the software has a huge number of views and I was the only designer at the company, I developed a small design system of the new style. This way engineers could make smaller style updates without my help and it would be easier to onboard more designers in the future.
color themes
Many app users were logged into different company accounts at the same time with multiple windows open. I developed multiple color themes so that users could personalise their experience and see under which account they were working on based on the color themes. There were also themes to celebrate Estonian, Latvian and Lithuanian 100th anniversaries.
