Redesign of a Web App | UX/UI
About
This project focuses on redesigning the web application of a SaaS company. Continue scrolling to learn more about it!🔍
UX/UI design | Usability
SaSS company
Copyright © All rights reserved
Roles
UX | UI design & Prototyping
Monserrath Abarca Weber
About the company
Publifix Network provides a cloud-based service that allows businesses to upload and share their promotional and public relations content with journalists, editors, and other media members. The goal is to facilitate the exchange of information and digital materials between businesses and the media in an efficient and effective manner.
About the project
Publifix Network recognized deficiencies in the navigation of its web app and decided to improve its press release distribution service platform. In order to optimize the usability of the interface, the company decided to follow a user-centered design methodology in the development of the redesign project. However, the project results are confidential, so specific details about the outcomes are unavailable.
Design process
For this project, a methodology focused on Design Thinking, User-Centered design and the process recommended in the Usability Cookbook was implemented. The improvement of usability was the central focus of the design, so different techniques were used to validate the design decisions taken at each stage.
Some of the methods used to clarify user requirements and verify proposed solutions were as follows:
- Interviews
- Content inventory
- Benchmarking
- User personas
- Customer Journey Map
- Analysis of the needs
- Information Architecture
- Card sorting
- Navigation paths
- Wireframes
- Heuristic Evaluation
Some tools used in the design process were as follows:
- Figma | Design, Prototyping, Testing
- Optimal workshop | Card sorting
- Adobe Premiere Pro | Project Presentation
- Microsoft Excel | Calculo de Estadísticas
- Zoom | Interviews, Testing
More about the process
Empathize and Define
In order to understand the problem present in the current platform, first a meeting was held with stakeholders where they described the deficiencies they had noticed when a user used their platform. The following is a summary of the client's main concerns:
-
For many new users, it is difficult to understand the flow of uploading material to the platform.
-
As the web app is not intuitive, it is necessary to resort to user manuals or training by the company's team.
-
As described in the previous point, this increases the tasks that employees must fulfil.
-
A bad user experience may cause the client not to want to purchase the service.
Summary of the problem
After performing an exhaustive exploration of the different navigation flows of the app, the problem was determined as:
"The content creator interface of the Publifix.net platform has usability deficiencies, inadequate terminology and is unintuitive for novice users."
The users
For the user analysis, the user personas method and the development of a customer journey map were used. The customer journey map was particularly useful in providing a clearer view of the pain points in a new user's experience, it was a valuable tool for identifying areas where the platform could be improved.
Customer Journey Map of a new user. Results blurred to protect privacy.
In the definition phase, benchmarking was also conducted on the service's direct competitors and other platforms that allow uploading multimedia files, to observe and analyze the solutions to common tasks shared with the company's platform.
The requirements were also ranked according to the most common user flows for users. This analysis is convenient to be able to propose an initial information architecture.
Card sorting tests were performed to check that the chosen terms were understandable and the information segmentation was accepted. After analyzing the main navigation flows and the card sorting results, the corresponding changes were made to obtain an improved information architecture of the app.
Last version of the information architecture. Results blurred to protect privacy.
Ideate, Prototype and Test
Then, the first sketches of the wireframes were made. Subsequently, they were digitally produced in the Figma tool and finally, the visual design was applied following the characteristics of the brand.
Low fidelity wireframes. Results blurred to protect privacy.
After completing the final prototype, heuristic tests were scheduled with real users of the platform to obtain more accurate results and thus iterate the design one last time before delivering the specifications to the development team.
Results
The results of the heuristic tests showed that users were highly satisfied with the proposed changes and were excited to learn that the company was working to improve the graphical interface and overall user experience. Additionally, the card sorting tests confirmed that the proposed changes to the terminology used in the platform and the segmentation of information were understandable and appropriate.
In summary:
-
The user interface was improved by utilizing clear and consistent terminology and graphics, resulting in a more intuitive navigation experience for users.
-
By restructuring the information architecture, the platform's most valuable functionalities were highlighted, allowing clients to more easily access and utilize them.
-
Additional support features were implemented to provide users with helpful guidance and assistance while navigating the platform.
What did I learn?
This project allowed me to improve my communication skills. To convey to stakeholders the importance of verifying through user testing the decisions made during the UX design process.
It was a project that required a lot of iteration and some modifications in the methodology proposed at the beginning. This led me to use other soft skills such as problem-solving, adaptability, empathy, etc.
Being able to participate in this project encouraged me to grow as a professional, so I feel grateful for the opportunity provided by Publifix Network.