Creating a Back Office for employees
Role: UX/UI Designer
Company: UnderPinned
Duration: 3 weeks, June 2022
Tools:
Figma, Jira, Loom & Whimsical
Overview
Objective
To create from scratch an easy and intuitive back office system for UnderPinned’s employees to easily access according to their needs and their department without having to call in the help of the developers.
Stage 01
Research:
User Interviews
Who we interviewed
As this was an internal company project we interviewed the heads of departments within Marketing, Sales and Finance to see what they needed from the Back Office.
Key findings
- Some departments needed to share data.
- It needed to be straight forward and intuitive to use otherwise the employees would continue to reach out to the
developer team.
Wants
1. Customer Service feature
An area to access customers records in order to review data and troubleshoot customer issues.
2. Password protected areas
Specifically for the finance department.
Desires
- A dashboard for company wide announcements.
- A modern and inviting interface (employees noted they had experienced in previous companies a lot of clunky and outdated systems that were difficult to navigate).
Stage 01
Research:
The marketplace
Testing the
early stage
Wireframes
Test Objectives
- On first impression, is the site easy to use and can the employees easily access what they need?
- Does anything feel complicated or too overwhelming?
- Is there anything we have missed that the users need?
Improvements before building
- We decided to focus on creating a basic MVP initially and then review how the employees used the Back Office on a daily and weekly basis. Before inputting more complex systems such as finance and the heat tracking components.
Areas to improve:
- The users wanted to view data quickly at a glance rather than have more generic company announcements on the dashboard, which are usually communicated through weekly meetings instead.
- The developer team felt that the heat maps may be too complicated to input and added a plug in could be used for this feature within the back office.
- Finance feature: the Finance team felt that potentially their excel set up could still provide for them what they need and their existing online tools.
Conclusion
- Researching back office interface designs that not only conveyed
data in an organised and intuitive way but in a way that was visually appealing for the user.
- Segmenting data into easy to access areas for the users.
- Reviewing colour palettes and fonts that were dyslexia friendly
and not overwhelming for the user when needing to access specific
information at speed.
UnderPinned needed a back office to help their employees access customer records, customer data and make small changes to a Saas site without having to disrupt the engineering team during a sprint.
The back office was to support the ‘Virtual Office’ which iis an educational and business management software tool aimed at early stage freelancers.
The aim of this project was to reduce the time taken away from developers on sprints to do admin tasks for the marketing and sales team such as renew users passwords and update event calendars.
The engineers had reported a reduction in requests. And for the next steps of the Back Office, the plan would be to further review the needs across teams, through user interviews and testing especially finance and user research to see if more data could be reported using the Back Office.
Taking a good look at products out there which specialised in user reporting and gathering large amounts of user data, whilst making it presentable and understandable to non (super)
technical users.
Dividing up the plan for the Back Office site navigation into four distinct features blow; for each department with an overarching Dashboard for the entire team to view company announcements and access the shared data on the platform.
Stage 02: Early stage wireframes & testing
Stage 03
High Fidelity
Designs, handover
& launch
- As this was an internal project we did our usability testing with those who’d be actually using the software (the team!)
- Here we showed them mid level
fidelity wireframes in order to
get an overall visual understanding
of what product we’d actually be
building for them.
- The product team held a final check in meeting with the
engineering team to see what was feasible to build and meet
within the deadlines of the sprints ahead.
- The final designs were presenting in Figma with all notes and annotations created in Jira for the engineers to work through.
Looking at ‘UX Sniff’ a company
specialising in heatmaps and reporting
user data for companies in the form of this platform and a browser plug-in.
Liked for it’s clean and easy to use
registration/log in page.
With a strong UI Layout in terms
of grouping and displaying
a lot of customer data at once.