Designing a UI resource library for front-end developers to maintain consistent branding throughout the company's enterprise software
UX DESIGN
RESEARCH
DESIGN SYSTEMS
INTERNSHIP
Project background
Descartes Systems Group is a software company that focuses on improving logistics and supply chain productivity, performance, and security.
I joined the Research & Development team to support the Principal Designer in handling day-to-day tasks. I spent the duration of my internship implementing new features and defining interaction rules for the company’s products and worked with a team of software developers to maintain the company-wide design system.
Minimizing confusion allows users to collaborate more effectively
Improving the user experience simplifies the user's task completion process
A consistent brand creates familiar products, which builds trust with users
What is the significance of the OneFace Initiative?
Why do we care about this?
The 'OneFace Initiative' is the company-wide implementation of Descartes' UX standards to create a consistent user brand and seamless user experience for its users
Many of the company's internal tools received negative feedback of poor usability
The R&D team was asked to redesign a feature in an application that is used company-wide to view internal documents. The tool, known as Document Management, received numerous complaints from users about the poor usability, as it was brought it to our attention that it wasn’t as intuitive as they had liked.
The architecture of Document Management didn't make the most sense.
The information that took up the least amount of visual real estate (folder name panel) was allocated the most amount of space, while the information that needed to take up more visual real estate for good readability (thumbnail). The most common frustration reported by users was that the panels were not adjustable. With that said, finding a way to make the panels in Document Management more customizable would help solve all of the issues above.
Entry
Ask: is the information you're looking at readable?
Yes
No
Enter resize mode
Expand/collapse sections based on needs/goals
Save changes to exit edit mode
Read or retrieve documents
Entry
Navigate to file
Open file and view information
The user engagement process was as straightforward as can be. The problem with this was that it did not provide users any option for additional tasks. Users were restricted to viewing information in sections of constrained page dimensions.
Revised user flow
Maintaining a distinct configuration mode is useful in minimizing errors (from unintentional taps) while adjusting sections.
Thus, I created a flow with more consideration for the users' intended tasks and purposes:
During UX testing for Document Management, users tried to perform actions that didn't exist.
1) Users tried to expand the sections of the page, hoping to read the information more easily
2) Users tried to click and drag through the text to see the information that was cut-off
3) Users also attempted to scroll horizontally to see clipped information
The existing user flow was simple, but it lacked a few things
Choosing between three design iterations
Option 2: At the bottom right corner of each section, there's a dotted triangle button that users can click + drag to resize the section.
Upon clicking and dragging the dotted triangle, users have the ability to adjust the section's dimensions both in terms of width and height at the same time
Option 3: Users can click and drag the blue bar to expand/collapse the section horizontally and vertically.
Option 1: Users can resize the section by hovering the cursor over any of the sides of the section (left, right, top, bottom), clicking, and dragging to fit their preferred dimensions.
Users can expand and collapse sections horizontally and vertically by clicking and dragging on the section edge
Section edge before cursor hovers
Section edge after cursor hovers
Cursor state changes to indicate next action
Low effort from development team as they don't need to build "new" features, but sacrifices user experience. I hypothesized that there would be a high chance of users being unaware of the ability to resize sections.
1
2
3
Development team may need moderate effort to implement a new button style, positioned at each section's lower right corner.
Implementing a new button style with dotted sectional borders could require a higher workload for the development team.
Ultimately, the Research and Development group opted for the version with the noticeable blue bars.
Given that the primary demographic (a significant number of the firm's staff are elder) that utilizes Document Management, it was more logical to adopt a design that enhances Document Management's accessibility for this group.
When user enters resize mode, blue bars appear to call-to-action.
As user exits resize mode, a modal pops up to nudge user to save
their changes.
What led to the decision of an "extra step" to the existing process by implementing a separate mode for resizing?
During user tests I observed how users would try to resize sections of Document Management (clicking and dragging section borders) to try and increase visibility of the interface. This proved the need for a tool/feature that would allow users to expand and collapse their workspace.
Enabling users to save their settings after they resize their Document Management workspace makes it easier for them to use Document Management for long-term. Alternatively, there could be users that don't care for saving their workspace dimensions. In those cases, they can exit resize mode without saving their customizations.
Final design of Document Management
If you have any questions or would like to get passionate about skincare 🧴, let’s connect.
Challenges
⏰ Time management becomes difficult when being pulled back and forth with requests from different teams across the globe
🌎 Some long distance relationships tend to face communication issues
For this project, most of the communication related to this work was done with Descartes' Ukraine team. Due to the 7 hour timezone difference, it was difficult to schedule meetings. We were also faced with some language barrier issues.
Many of the firm's employees were interested in the work that was being done for the Document Management tool. As an intern who came to support the company's Principal Designer (despite being a medium-sized company, there was only 1 designer working for everyone). Although my main focus was Document Management, I was still responsible for managing smaller UX and design-related requests.