Introducing new document management tool

Overview

An innovative tool was developed to streamline internal operations and enhance technical documentation, significantly improving overall efficiency within the company. In response to this development, stakeholders wanted to establish a comprehensive landing page to showcase the tool’s impact, objectives, and ongoing enhancements.


Project Duration

4 weeks

Role

UI/UX Designer, Web Developer

Tools

Figma, Adobe Illustrator

Problem/Challenges

Due to the absence of accompanying imagery, the visual design had to rely primarily on the integration of the company’s primary brand color. Additionally, as the tool was newly introduced, it became essential to establish direct communication with users, effectively conveying the purpose of the tool and its envisioned role in the company’s future.

Objectives

  • Develop a centralized web presence within the company, serving as the go-to resource for accurate and up-to-date information.
  • Craft a visually engaging design that incorporates the company’s primary brand color to reinforce brand identity.
  • Showcase the tool’s ability to enhance efficiency and address common file management challenges faced by employees.

Sarah, Technical Operations Manager

Sarah has been working in the data center industry for over 15 years. She is responsible for overseeing the operations of multiple data centers and ensuring efficient management of technical documentation. Sarah values streamlined processes and seeks innovative solutions to enhance productivity.

Mark, Data Center Technician

Mark is a skilled technician responsible for maintaining and troubleshooting equipment in the data center. He often needs to access technical documentation to perform his tasks efficiently. Mark is detail-oriented and seeks user-friendly tools that simplify his work processes.

Visual Design Elements

Drawing inspiration from the primary company color, I crafted a captivating and welcoming ambiance by skillfully incorporating an array of vibrant shades of blue and green. These carefully selected colors were applied to create lively and impactful illustrations, showcasing individuals engaged in seamless interactions with technology, documents, and collaborative teamwork. To ensure scalability and consistency across future expansions, I meticulously developed a comprehensive pattern library. I also built reusable components using HTML and CSS, streamlining the process of constructing additional pages and enhancing overall efficiency in design implementation.

Usability and Accessibility

Unmoderated usability testing was conducted with the stakeholders’ team, collecting feedback and integrating it into design refinements. During the initial prototype stage, the stakeholders recognized the significance of including information regarding tracked metrics to ensure an optimal user experience within the Fileworks tool. To address this requirement, I strategically incorporated a dedicated section following the current priorities section, aligning it seamlessly within the flow of the page. By structuring the content in this manner, users are able to gain valuable insights into the ongoing developments and enhancements of the tool after being introduced to its current functionalities and objectives. We also conducted color contrast and font size checks across the entire site to ensure optimal readability and accessibility of the text.

8.34

contrast

★★★

small text


★★★

large text

Outcomes

01

The Fileworks team has established a centralized and reliable resource for internal employees, enabling them to discover how the tool significantly enhances workflows across diverse teams.

02

Refining the “what are we solving?” section of the site proved to be an invaluable experience, further honing my design expertise and pushing the boundaries of my creative capabilities.

03

By developing a comprehensive pattern library, the Fileworks team now possesses a valuable asset that can be leveraged for future expansions of their site, ensuring consistency and efficiency in design implementation.

Back

This is a unique website which will require a more modern browser to work!

Please upgrade today!

Share