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
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.
Research
I collaborated closely with stakeholders to identify the target audience and define the objectives of the website. Through extensive interviews, I developed user personas and gained insights into their motivations. The majority of users visiting the page are seeking streamlined file maintenance processes and are motivated by the desire to simplify their workflows for improved time management. Leveraging this research, I ensured that the design effectively communicated the tool’s purpose and guided users to explore its functionalities. To create visually compelling elements for the landing page, I conducted research on different visual approaches, drawing inspiration from platforms like Dribbble. Ultimately, I opted to utilize an illustration library featuring individuals working with documents or collaborating as a team. By incorporating these visuals, I aimed to convey efficiency and collaboration, presenting the tool as the ideal solution for their file management challenges.
Ideation
Applying my research findings, I embarked on the ideation process by sketching rough wireframes for the page. I explored different solutions for the “What problem are we solving?” section, recognizing the need for a visually impactful representation of common employee complaints. Experimenting with various illustrations from the library, including users emerging from computers, I ultimately selected an illustration featuring users and chat bubbles. This approach fostered a stronger connection between users and the identified problems, providing a comprehensive overview of the Fileworks tool.
Once the sketches were finalized, I transformed them into a high-fidelity prototype, enabling stakeholders to interact with the design and identify any potential ambiguities in user tasks. Upon approval of the final design, I leveraged HTML and CSS to develop the site, ensuring the creation of a reusable component library for future pages should they be added.
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.