Company: Metaiss
Type: Design System | UX Pattern | User Interface.
Project Time: 3 Weeks
Role: UXUI Designer | Wireframe Design | Branding
Team: Lola Falana (UX Designer) | Josh Yu (UX Researcher) | Xavier Cuadrado (UX Designer)
Summary
Metaiss is a privately owned software development company that creates enterprise content management, provides collaborative online content management, and project management. The earlier parts of this project involved a detailed briefing on the product vision, key functionalities, and features. We wanted to better understand the full extent of features and technicalities of the product, as well as determine those of similar platforms. In our research, we were analyzing every facet of value in Metaiss business and its key value proposition. Who are we creating value for? Who are your most important customers?
How might we help users integrate their project information seamlessly on content management platforms to improve collaborative efficiency?
UX Challenge
Enterprise Content Management (ECM) software isn’t normally known to be “user-friendly”. Many ECM companies have struggled for years to provide an intuitive user interface, with a complex architecture in the backend. Metaiss definitely wasn’t founded with ease-of-use in mind. The Challenge would be to create an end-to-end experience that improves and enhances the current design. Our challenges were to:
- Define missing UX fundamentals
- Correct existing UX Issues
- Design Intuitive interface
Deliverables
Strategy Brainstorm
We started with the client interview where we had a detailed discussion on the future and progression of the product. The key points of the product are a content management platform combined with project management tools, client relations management tools, and assets hosting. In our interview, the client suggested points of interest where she believes the product lacked and needed development. Her primary criteria for the project was on creating an intuitive interface. After the interview process, our team researched similar products by applying a competitive feature analysis to inform ourselves with industry practices for designing familiar UI interfaces. The main thing to note from our research was the use of dynamic menu elements and global search bars with extensive filtering options.
The Design Process
01. Discovery: “Understanding the product”
01. Heuristic Evaluation: Evaluate the existing product
Our team wanted to evaluate the existing build of the current state of the product at the time it was presented to us by the client. We proceeded with a heuristic evaluation of the main pages of the web interface. We wanted to locate pain points for our product and to find any problems in a variety of heuristic categories as mentioned below. Early on, we established that the pages presented to us by the client weren’t ready for usability testing. The pages weren’t fully operational and missing key features that the client was looking for. We then came up with the unanimous idea that we should create a mid-fidelity prototype, instead of a simple redesign. This way we make sure that user insight would influence the final design of the product.
02. COMPETITIVE FEATURE ANALYSIS: What other companies do?
Soon thereafter, we researched comparable products that would grant us insight into how our proposed features would compare with what is currently available on the market. This research would also help us in creating a more intuitive platform by avoiding the pain points that competitors had while capitalizing on their efficient and intuitive features. Our key finds were that an intuitive UI is critical for top performers. Incorporating drag-and-drop functionality is a must-have feature and critical for users. Searching should be something familiar with similar interfaces akin to Google or Bing with placeholder text emphasizing that. Filters and metadata must be easily modified by users and just as easily searched for. Narrowing massive search results using filters must be clear and concise. Metaiss features combine ECM, DAM, CRP with native integration. Metaiss CCPA and GDPR compliance is a pivotal selling point.
We learned that:
- Excellent UI is appreciated by Users and characteristic of top performers. Having Drag and Drop functionality is a standard feature and expected from users.
- Search functionality should match Google for intuitive results and placeholder text must reflect that “Type to search”
- Filters and metadata must be easily customized by users. Narrowing search results using filters must be clear and fast.
03. User Interview: Understanding the users
Goals
“Our goal is to find the pain points of a users experience when it comes to using a content management platform.”
User interviews were conducted to collect information about ECM users’ needs and factors that influence their decisions. Our objective is to understand how users who work in teams engage with software that helps manage content and projects. Our scope of research is to understand the contexts of platform use, as well as gaining behavioral, ethnographic, and sociocultural insights into our users.
Through our findings, we were able to pivot and revise our design problem. Rather than focusing on collaborative functionalities, our users guided us towards a new design problem centered around improving the search and filter functions. This showed us a disconnect between users' needs and clients' wants. However, to create a user-centric design strategy, we chose to act upon the insights gathered from users to further hone our understanding of the design problem. This will help us design a product that users will find useful and valuable
04. User Interview Finding
02. User Research & Analysis
01. Meet Lauren
Based on the user interview respondents and after identifying Metaiss’s potential users, we interviewed 10 of them to know more about their ECM experiences. We then combined similar users into one bucket and created one unique user persona to summarize their goals, needs, and their frustrations. Below personal is a representation of the audience that we are solving for.
02. User Journey
The next step in the design process was to organize everything and give a structure to the site. Hence, we created the journey map for our persona Lauren, to understand her weekly workflow experience and where Metaiss can fit in. This lays out steps & actions in a particular order and sequence that the user needs to undertake to complete the task to the end. This map visualizes how Metaiss can meet Lauren’s needs and avoiding pain points, thus improving her workweek. We learned that Lauren’s workflow generally involved searching and managing assets.
03. User Flow
User Flow is a flowchart diagram that involves different processes to complete a task from your landing page. This lays out the user’s movement through the product. Before we move into our next design process, we need to know exactly how our users navigate through the site.
Re-Define
REVISED PROBLEM STATEMENT
User research helped guide our design decisions by giving us insights on key functionalities of a Content Management platform that we could improve. These functions were search, filter, and a modern easy to use design. How might we provide Lauren with a content management platform whose interface allows her to search, filter and manage content seamlessly?
03. Ideation & Design
Design Studio: Building the structure
Low-Fidelity Wireframe sketching is the first step where we translate research results into a visual layout. They are low fidelity and do not contain any colors or images. They simply help us to decide the visual layout by placing appropriate UI elements and sizing them accordingly. We then explore different solutions and sketch out the wire flows, following the design requirement and design problems as our central focus. We’re then ready to ideate UI solutions into a Mid-fidelity wireframe.
04. Design Evaluate
01. Usability Tests: Evaluate the Mid-Fidelity prototypes
After paper prototyping adjustments, we quickly mocked up the product from low-fidelity into mid-fidelity, which allow us to create a clickable prototype using software InVision. We then moved on to evaluate that.
Test, Learn, Revise and Repeat
A digital product should evolve to suit the people using it. it should account for user behavior, to give the best user experience. This is critical in product design; we learn from people using the product.
We recruited 5 individuals who are ECM users to test our mid-fi prototype created in software Sketch and InVision. During the usability test, we asked them to interact with the Metaiss platform based on given scenarios and tasks. We recorded their responses and asked them follow-up questions about their experiences with the platform.
Our goals for testing were to:
- Test the findability of new design components such as “Add New Project” and “Import a File”
- Test the discoverability and usability of new interaction flow.
- Learn about users’ behavior, especially how they use the data filter search
Key Finding & Solution:
#1 Finding: Call to Action Button
The “Add” button is the most essential, it allows users to add a project from an external source, such as a hard drive, dropbox, and google drive. It should be way easier to imagine the possibilities, without requiring extra effort from the users. However, some users seem to have trouble finding the right button to import files.
Solution: This made us reconsider changing the trigger “Add” to “Import” so that users don’t misinterpret the meaning of the action.
#2 Finding: Users were confused about the “Search bar” as hiding “Metadata filter when search database
Filtering is where the number of options is reduced to contain only those match criteria that a user has selected. these are usually based on the characteristic of the files. A search bar allows users to sort out the files that they see at the top of a long listing. “However, through evaluation, we found that users’ initial experiences were confused when it came to the ”search bar” and “data filter search”.
Solution: Therefore, we make data filter as a static button and keep it at the top of the page to help users find it.
#3 Finding: Users want quick, intuitive task completion
In the usability test, users mentioned that they would like to complete their job tasks in simple steps and they want to find their target file(s) quickly.
Solution: Therefore, we lower the number of clicks required for the general tasks to complete tasks faster.
05. Final Design: User interface and Branding
01. High-Fidelity Mockups
Hi-Fidelity Mockups are the most exciting part of the design process. They integrate designing the logo, detailed mockups of the site, choosing an appropriate color scheme, Typography, and setting up the style guide to position the brand’s direction. It’s up to the designer to create a heuristic layout that encompasses all of these elements together.
02. Style Guide
01. Color Palette
Our primary color palette scheme is made up of cold colors consisting of classic blue, black, light gray, and white. The secondary color paltering consisting of a mix of colors each one suiting a specific purpose in the content. We are also committed to complying with AA standard contrast ratios.
04. UI Annotation
Conclusion
Enterprise content management (ECM) software systems aren’t normally known to be “user-friendly”. Many ECM companies have struggled for years to provide an intuitive user interface with a complex architecture in the backend. Metaiss is a privately-owned software development company that creates enterprise content management, provides collaborative online content management, and project management. Metaiss definitely wasn’t founded with ease-of-use in mind. With that information and our knowledge of UX/UI design, we were able to improve the functionality of the product while making the interface more intuitive for the user via our prototype and analytic processes.
Thus far, this project was the most UX/UI intensive project I have ever undertaken. We spent about 3 weeks working on this project starting from understanding Metaiss’s value proposition and synthesizing all research data into visual platforms. Finally documenting each process in this case study.
Our next step would be to retest our final design once more to finalize that it is truly intuitive and see if further improvement can be found or made while keeping users' pain points down to zero.
