Before you start, I’d advise you to be on your PC for the best experience reading this case study.
The challenge was to simplify the user experience of an incredibly complex data management tool and enhance its adoption without compromising its advanced functionalities.
We needed to rebuild value to data-intensive industries and re-solidify our market position.
Imagine a super-efficient librarian, but for the digital world. Ngenea not only stores a vast amount of data (our digital books), but also knows exactly where each piece is and can fetch it for you in a snap! The icing on the cake is they also make these digital books available to anyone, anywhere in the world. So if a company has offices in different locations, Ngenea helps them all work together on the same digital files, no matter where they are. It’s like having a global library that’s open 24/7!
Ngenea operates in the data management and storage industry, providing solutions for data-intensive workloads and global collaboration. The software manages and stores large volumes of unstructured data, enabling better insights and accelerated workflows across various industries.
This tool though powerful, faced a significant challenge: its intricacy hindered efficient utilization of its extensive data capabilities. This complexity left Ngenea’s potential for streamlining workflows and enhancing global collaboration largely untapped. The tool’s intimidating nature for users hampered its adoption and limited its business efficiency impact.
Addressing this challenge required a nuanced approach: we needed to simplify the user experience while ensuring the tool’s advanced functionalities remained accessible and not overly simplified. But confident in our expertise, we embarked on a complete overhaul to make Ngenea more user-friendly in a bid to enhance its value for data-intensive industries and solidify its market position.
In this collaborative project that took approximately 7 months, I served as a hands-on designer on a two-person team, focusing on research, design execution and testing. Alongside Jonathan, the lead designer, I conducted 40% of our user research sessions, then led the documentation process to capture user insights and problems, setting the stage for our ideation.
Working closely with Jonathan, who managed the overall design strategy and stakeholder communications, we jointly engaged in deep ideation to develop new features and modifications. My role further evolved to include conducting testing sessions, using feedback to iterate and refine our design prototypes. Additionally, I worked to ship Pixit’s first design system, ensuring its practicality and relevance in collaboration with developers.
Besides developers, we collaborated closely with several key stakeholders, including the Head of Development at Pixit Media and Kalray DMS, the Head of Research and Development at Pixit Media, the Head of Development Services at Pixit Media, the VP of Product at Pixit Media, and the CEO.
Unlike other case studies you might have read in the past, this one will be a bit different. First, I will be showing you the solutions and interfaces we ideated. Then, I will walk you through how we derived these solutions from the extensive research I and my partner conducted over many hours.
BUT If you are more interested in the research and ideation phases of this project, please click the button below to skip the visuals and go directly to the discussion about the design process for this project.
How could we give users the ability to sift through thousands of files with the highest accuracy? How could we align the functionality of our search mechanism with the thought processes of our users?
It’s a Monday morning, and Charles the animator resumes work, brimming with enthusiasm. He executes his first task smoothly, but when it’s time for his second task, he encounters a problem.
The assets he needs for this project are scattered throughout the file storage system. He needs to find files that contain specific prefixes and exclude those with certain phrases, all while filtering for a specific filetype. Accomplishing this seems impossible with the existing, limited search functionality, leaving him frustrated.
Situations like this and more are what we wanted to solve, we wanted to give users a search tool that allowed them specify exactly what they wanted to see and not see in their search results.
*Click on any image to expand it for a clearer view.
Users can replicate their search thought process by combining rules, including or excluding specific words, phrases, or word parts. For example, a search might be: Show files that contain “rand” but do not contain “car.” Also, show files that contain the exact word “range” or the phrase “red hot lava.”
Build your search and execute.
Explore search results.
Edit your search setup on the fly.
The search process begins by building search queries, then applying filters to refine the results.
If you lack a specific search term, click "Next" to proceed to the next screen.
Setup filters to accompany the search query. You can either use the "basic" or "advanced" filters.
You have the option to save your search parametersbefore executing.
If you have previously saved searches, you can select and execute them.
Edit the filters too on the fly
After executing the search, search results are shown detailedly.
Search results view
You can edit your search on the fly
Edit basic filters
Edit advanced filters
Media files can be previewed directly from the search results page.
Image file selected
Image file preview
Video file select
Video file preview
Here’s a user flow diagram of the high-fidelity screens, illustrating how they connect.
How do we optimize the file browser interface to intuitively align with the user’s natural browsing habits and expectations? How do we integrate advanced but user-friendly tools in the file browser to handle large-scale file management efficiently?
The seasoned project manager at XY media, Jane, knows exactly where the files she needs are in the storage system. However, the outdated, inefficient user interface constantly slows her down. She needs to quickly select and send specific files for jobs or sync them with other sites for her team’s urgent projects.
But despite knowing the file locations, the old UI complicates her task, making it a frustrating, time-consuming challenge due to poor navigation, limited file visibility, and a tedious selection process. The absence of user-friendly features leads to a clumsy, inefficient workflow.
*Click on any image to expand it for a clearer view.
Here’s a user flow diagram of the high-fidelity screens, illustrating how they connect.
How can we enable users to efficiently and in real-time manage Pixtor storage devices at various global sites? How can we prevent mistakes in the modification of mission critical settings?
*Click on any image to expand it for a clearer view.
Below are some screens from before the redesign
And these are screens from after the redesign:
Create site flow
Here’s a user flow diagram of the high-fidelity screens, illustrating how they connect.
How can we enable users to efficiently and in real-time manage Pixtor storage devices at various global sites?
*Click on any image to expand it for a clearer view.
Here’s a user flow diagram of the high-fidelity screens, illustrating how they connect.
How can we intelligently simplify user creation and profile management in Ngenea Hub?
In the bustling tech hub of Silicon Valley, Jordan, the Head of IT at Dynamic Tech Solutions, grapples with the challenges of managing user profiles and access controls within the company’s proprietary platform, QuantumNet. Despite his vast experience, the task of creating user profiles, assigning roles, and managing the groups these profiles belong to is a herculean effort. The platform’s interface is not as intuitive as he’d like, turning what should be simple administrative tasks into complex puzzles.
Each day, Jordan finds himself navigating a labyrinth of menus and options just to onboard new employees, assign them to the correct roles, and ensure they have access to the necessary resources. The manual process is time-consuming and prone to errors, often requiring repeated adjustments to get everything just right. This inefficiency is a thorn in the side of productivity, as Jordan and his team are frequently pulled away from their primary responsibilities to address user management issues.
*Click on any image to expand it for a clearer view.
User groups | creation & editing
User profiles | creation & editing
User profiles | creation & editing
Here’s a user flow diagram of the high-fidelity screens, illustrating how they connect.
How can we enable users to efficiently and in real-time manage Pixtor users at various global sites?
*Click on any image to expand it for a clearer view.
Policies
Here’s a user flow diagram of the high-fidelity screens, illustrating how they connect.
How can we enable users to efficiently and in real-time manage Pixtor users at various global sites?
*Click on any image to expand it for a clearer view.
Ngenea target | Add, Edit, Explore
Identity management
Profile
Edit SMB & NFS Advanced settings
Shares | Add, Edit, Explore
Here’s a user flow diagram of the high-fidelity screens, illustrating how they connect.
My design process, consisting of four distinct parts, reflects a comprehensive approach to problem-solving and innovation. Below is an articulated description of each stage:
1. Research:
In this initial phase, I immerse myself in understanding the company’s context, delving deeply into the problem space and the business environment in which it operates. This involves gathering extensive information and insights about the company’s goals, challenges, market dynamics, and user needs, laying a robust foundation for the subsequent stages.
2. Ideate:
Building upon the findings from the research, this stage is where I synthesize the gathered data into actionable design insights. It involves brainstorming, conceptualizing, and formulating design recommendations and solutions. This creative process transforms theoretical knowledge from the research phase into practical, innovative ideas that can address the identified challenges.
3. Create:
I start with crafting low-fidelity wireframes, which serve as the initial visual representation of the ideas. These wireframes gradually evolve into high-fidelity designs and eventually into interactive prototypes. This step-by-step enhancement allows for a detailed exploration of the design’s functionality and aesthetics, ensuring that the final product is both user-friendly and visually appealing.
In our Pixit Design Project, understanding Pixitmedia’s target audience was key. The goal of this phase was to align Pixitmedia’s solutions with its users’ needs, crucial for enhancing user experience and satisfaction.
Pixitmedia aims to reach a wide range of users, including experts and groups in media processes, data handling, visual effects and animation, post-production, broadcasting and media services, and design firms. These users need specific solutions for managing data and content. They look for systems that are advanced, can grow with their needs, and are efficient.
Key Learnings
- Diverse Audience: Catering to a wide range, from media companies to individual creative professionals.
- Data Management Needs: Emphasis on security and efficiency, underlining the need for robust data platforms.
- Global Audience and Varied Sizes: Solutions must be scalable and adaptable for a global market.
- Technology Trends: Adaptation to emerging trends like AI is vital for staying relevant.
- Effective Marketing Channels: Identified as industry events, digital presence, and content marketing.
The development of Key Performance Indicators (KPIs) for this project involved thorough analysis and cross-team collaboration. These KPIs, addressing user satisfaction, workflow efficiency, and system reliability, were integral to evaluating the success of the redesigned interface. This process highlighted the importance of aligning technical development with user needs, engaging stakeholders effectively, and remaining adaptable to market feedback. Ultimately, creating these KPIs not only guided the project’s success but also enhanced our strategies in project management and user-centric design.
These KPIs provide a comprehensive framework to measure the success and impact of the software redesign, focusing on user experience, operational efficiency, and market engagement.
You can find the KPIs in the document below.
As we delved deeper into the project, I realized that there were terms that came up often which I was not familiar with, but which were essential to how the entire system works. To help both myself and my co-designer, I started documenting these terms and their meanings. Then, with a bit of personal research online and from the company’s internal development document base, I made simpler definitions of these terms to help me think about these terms more flexibly, in ways that would promote ideation.
Documenting these terms was crucial because it provided a clear understanding of essential concepts, fostering effective communication and collaboration within the team, and aiding in more creative and informed decision-making throughout the project.
You can view it in the document below
We also analyzed the interfaces of other companies in the space.
We also analyzed our own interfaces over a number of meetings. For privacy reasons i have scribbled out certain details.
This then informed the features comparison phase.
In essence, all of these analysis underscores the need for Ngenea Hub to focus on user-centric innovations, expand its cloud capabilities, and strategically market its unique strengths in the competitive data management sector.
The user recruitment screener for Pixitmedia’s software redesign is key for selecting diverse participants, ensuring the research addresses a wide range of user needs. It collects data on participants’ experience with Pixitmedia products, technical proficiency, industry background, and specific challenges with current software, alongside their availability for research activities.
This screener is crucial for a few reasons: it helps in choosing a representative sample of users, aligns research with real-world user issues, streamlines scheduling for interviews and tests, and establishes trust through upfront consent and privacy acknowledgments. These aspects are essential for a user-centric redesign and ethical research conduct.
You can find some of the recruitment questionsin the document below.
Below are examples research reports, scroll left to see them all.
Creating personas for the Pixit Ngenea redesign project was essential because it helped us better understand and represent our users. After conducting research sessions, we developed these personas to encapsulate the diverse needs, behaviors, and goals of our users. This approach allowed us to visualize and empathize with our target audience more effectively, making it easier to tailor the redesign to suit their specific requirements and enhance their overall experience with the product.
To see all this in practice, below is a part of our feature prioritization doc
Below are some wireframes we made, explore the figma file to view them all.
–
Use the +,- buttons to zoom in and drag with your mouse to move around
I also created interactive prototypes to begin testing assumptions and ideas as early as possible.
After months of designing, testing, and iterating, the wireframes underwent numerous changes. We realized the need to modify, remove, and add various elements. Below, you can see the initial wireframes compared to the final designs of a few screens that were ultimately shipped.
Three weeks into the high-fidelity design phase, two stakeholders with veto power intervened, influenced by the company’s recent acquisition by Kalray. They advocated for a palette shift towards green and greenish-gray to align with the parent company’s branding. This led to a complete overhaul of the existing style guide, now developed collaboratively with all stakeholders, including the developers and my co-designer.
After some debate on visual elements like font choice, we transitioned from Gilroy to Circular Std, considering its legibility at various sizes, especially smaller ones. Below is the final style guide.
Early in the design process, I recognized the importance of developing a design system in parallel with the high-fidelity designs to ensure utility and immediate value upon handoff.
This approach involved identifying frequently reused elements, naming them appropriately, and documenting them with descriptions and variants. After additional weeks post-project to refine the system, I delivered a highly useful design system tailored to the company’s specific needs and workflows, adhering to the principle that design systems should be created only when necessary and designed to be maximally beneficial.
To showcase this system, we launched a design system website, featuring various screens I designed to illustrate its components and usage.
Foundations—
Components—
Screen index—
At Pixit, my work on redesigning the flagship product Ngeneahub significantly enhanced user adoption by 20%, directly contributing to the company’s growth in the competitive media and entertainment technology sector.
The reduction of support queries by 38% and errors by 31% not only improved operational efficiency but also strengthened Pixit’s market position by elevating customer satisfaction and trust in our solutions.