Designing a Simple Interface for a Complex Business Tool

A simple and sophisticated business tool, specifically designed for small businesses.

The Power of Simplicity

There are hundreds of online tools available which aid businesses with a wide variety of tasks, from sales to, human resource, to task management, helping them to streamline process, reducing cost and and increasing efficiency. But integrating all these services within one product to provide a one stop shop for all business related tools can cause unnecessary complexity, especially for smaller businesses. This is the story of how I designed a simple yet sophisticated online business tool to meet the specific needs of small businesses.

My role

I was part of the UX team and responsible for the experience strategy and design of the the website for desktop, specifically focusing on increasing the usability of the leave management module within the platform. I worked with the UX team to produce all the major deliverables and presented these to the client.

The challenge

Reduce the Complexity and Increase Usability

The brief from the client was this: improve access to the existing modules and features within the platform and improve the on-boarding process for new users.

Our challenge was to increase the usability of the site, while maintaining its functionality. We had to ensure the needs of the customer (small businesses owners and their employees) were being met by striking the right balance between designing a powerful tool, while keeping it simple; competitors offered a plethora of features, but with that came added complexity.

The Approach

Prioritising the Feature List

We had under three weeks to deliver our UX recommendation strategy to the client, so our approach was to identify the areas of the site that needed to most attention and focus our attention there first. Just like building a house, you have to build the walls before you can start painting them.

In order to identify what the fundamental problems were, we planned to conduct interviews and usability testing with real users of the site.

Work Flow

Feature design and development was broken into parallel work streams for the on-boarding flow, the dashboard and individual modules with the platform. The research and design for each stream was split across the team. I lead the design for all aspects related to the leave management module. In hindsight it was a bad idea to split the features among the team as it reduced collaboration, limiting our understanding of the nature, opportunities and constraints of the ‘problem space’ for the other features our teammates were leading.

The combination of having an undefined scope combined with a fixed end date made sticking to a fixed project plan crucial, creating a high pressured environment with many prioritisation and time challenges.

UX Design Process

The Discovery

Customer Insights

We originally planned to conduct a series of interviews with current users of Zenintranet, but due to the site being so new, and location constraints (customers were based all over Asia) we only managed to recruit two customers for interviews. We then conducted a screener survey to recruit small business owners who would be the target audience for Zen Intranet. Due to the demanding time constraints of small business owners we only managed to recruit one small business owner to interview and find out about their behaviour, pain point and needs in relation to business tools and services.

We then conducted a heuristic evaluation of the site and market research to drive our planning phase. These are the key insights that defined which features of the site to prioritise.

Learn by Jumping Straight In

Small business owners did not have the time or resource to refer to training manuals in order to use the platform. They need tools which are simple to use and intuitive so they could start using it immediately and learn as they went, without the need for in-depth training.

Customisation is Key

All the business owners cited the need for customisation to fit their specific business needs, operations and structure. They did not believe in a ‘one style fits all’ approach. They use a variety of different tools, each one tailored towards their specific business needs.

Reactive rather than Exploratory

Users were unlikely to make changes to their existing processes and correspondingly explore or implement additional tools. If they already have systems in place that were working well for them, they are unlikely to switch. Any new tools adopted must have very clear benefits to their business, usually in terms of ROI or time saving.

The Vision

Our vision for Zenintranet was to be a gateway tool for small businesses wanting to streamline their processes.

We did not want to offer an exhaustive catalogue of business tools that would benefit every type of company, rather we wanted to focus on the common needs of small businesses, from a selection of tools that they would actually use.

We envisaged Zenintranet to be the initial stepping stone from manual, paper processes, to online business tools for small business.

The Requirements

Designing for What Users Want

Synthesising insights from our research, we realised there were too many modules within the site to tackle within our timelines. In line with our vision to be the stepping stone into online tools for small businesses, we decided to focus our attention on the leave management module of the site as our research highlighted this was the module most used by small businesses. We would also addressed the on boarding process as this was integral to attracting customers and ensuring their initial experience of the site was a positive one. Thirdly we would focus on the dashboard, which was key to addressing the existing navigation problems within the site and moving from one module to another.

Stepping into the User’s Shoes

Knowing exactly who I was designing for allowed me to see exactly where this service would fit into a small business and what circumstances would bring them to using the product.

I began by focusing on the needs and problems highlighted during our research. For each problem I imagined the ideal experience for the user, creating a set of scenarios which would help the team and the client to empathise with the user’s experience. Exploring these scenarios also allowed me to identify what of the existing functionality was useful, what should be removed and opportunities for innovation.

The Framework

How we created it

We explored opportunities and generated ideas through design studio sessions where we sketched out as many ideas as we could think of to explore the problem and allow ideas from the whole team to form and grow. We had planned to collaborate on the design for all the features, but due to time constraints we were forced to split the features up among the group, each member individually working on a specific feature. I was responsible for the design of the leave module.

Structuring the Experience

Having already envisioned the various scenarios in which a customer would use the app and identified the main problem points in the current flow of the leave management module, I began to map out user flows to define the various pathways our personas would navigate through the module. Doing so helped me to identify a number of cases and scenarios which were not currently catered for in the existing site. This presented the challenge of incorporating additional functionality without adding additional complexity. Referring back to the primary needs of our personas I was able to rule out several edge cases, thus avoiding adding unnecessary complexity.

Scenario 3: Amending Leave Allowance for Employees on an Ad Hoc basis

One of Anthony’s team called in sick, so Amanda came in on her day off to cover their shift. Anthony needs to apply an additional day to Amanda’s annual leave allowance for her additional days work.

The Interaction Framework

I sketched all my ideas on paper first, this allowed me to work rapidly and explore multiple ideas.

Once I’d finalised the paper sketches of the leave management module, I started work on creating an interactive prototype of my design in Axure. I purposefully created low fidelity wireframes so as not to distract from the usability of the site, rather than focusing on the visual design aspects such as colour and font.

The team used Axure Share to individually work on the respective features so that we could easily merge them into one interactive prototype. Or that was the plan at least. Trying to integrate flows across features where I had minimal involvement in the design process was not easy and it cost me a lot of time while I worked on filling in the gaps.

Detailed Design

Introducing Zenintranet

The gallery below shows the final designs presented to the client.

Overview of Important Information at a glance

The main screen of the Leave Management module has been designed to allow users to quickly review information and stats relating to leave requests within the team.

Filter Function

Ability to filter information across a number of categories including employee, leave type and status in order to quickly find the specific details they’re looking for.

Clear Distinction Between Administrator and Employee Tasks

All employee functions are bundled under “My Account”, and all admin functions under “Manage Leaves”. The leave module settings therefore can only be found under the admin section. Both sections provide a glance-able overview of system status.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.