Fabien Sevestre
July 11, 2023
The redesign project
Cloud technology has revolutionized the way we store, share and access our data. However, with ever-changing user needs and rapid technological advances, it’s essential to regularly review existing applications to ensure a fluid and intuitive user experience.
Redesigning cloud software goes far beyond simply rewriting the code. It requires careful attention to the user interface (UI) and user experience (UX). Indeed, even the most powerful and functional software can quickly be rejected by users if it fails to deliver a pleasant and intuitive experience.
Redesigning cloud software offers a unique opportunity to innovate and make significant improvements to the way users interact with their data. Discover our redesign process, exploring the key steps, important considerations and tangible benefits of an optimized user interface and enhanced user experience in the cloud.
A user-centric approach
At present, the software is essentially focused on the functional aspect of the application, in other words, it is necessary for each function to be correctly developed while respecting a certain number of criteria from a security point of view.
In this new version of Parsec Cloud, we’ve focused on the user experience and interface, while maintaining the highest levels of security.
UX and UI
These two terms have become commonplace in the design of applications, websites and products in general. User experience puts the user at the heart of a project. We’re concerned with their needs and expectations, and how they interact with the product. It’s essential to take this aspect into account. At Parsec Cloud, we have put in place several methods to refocus on the user.
As its name suggests, User Interface (UI) concerns the graphic design of the interface. Like UX, the interface is adapted to the user. This means knowing the user’s profile, the tools they use, their age range and many other criteria.
The UI will be based on the application’s graphic charter to create harmony between the different products. The same goes for the responsive tablet and mobile versions.
The essence of creation
The redesign of an application also involves its textual content. You have to think about how you address the user, and whether the language is adapted to their knowledge of the subject. On the other hand, at Parsec Cloud, we use the Zero Trust model to benefit from a level of security where we can only trust the end-user. To achieve this level of security, we have revised the words and phrases used to make them easier to understand. A feature may be very intuitive in its execution, but if the user doesn’t understand it, he’ll probably find another way of dealing with it, or simply move on to something else. That’s why the choice of language will be crucial, and even more so in our case with the application’s level of security.
Creating user paths
As a product designer, it’s imperative to fully understand the functionalities and their implementation within the application. That’s why we developed several user paths to identify the key aspects to be improved in the future interface.
One such feature requiring a thorough understanding of the product concerns the addition of a new user to a workspace. In this process, the guest and the space owner need to exchange codes via various modes of communication such as calls, messages or face-to-face meetings, to ensure correct identification of the parties involved.
To successfully complete this redesign project, it was essential to begin with an in-depth analysis of existing interactions and interfaces. This step is intended to facilitate understanding of existing mechanisms, while paving the way for significant improvements as part of the redesign.
User scenarios
User scenarios represent a sequence of actions describing how users interact with the product in various contexts. They play a crucial role in understanding how users will use a product, and in identifying potential problems they may encounter.
During the design phase, these scenarios proved particularly useful for testing prototypes with users. This enabled our development teams to focus more on the technical aspects, using user feedback to guide improvements.
To illustrate this, we have chosen two sets of scenarios. The first concerns the user’s initial introduction to the application, also known as the “onboarding” process. The second scenario concerns the user who already has documents in their workspace. For this latter example, we were able to discover how the user interacts to :
- create a workspace
- Add items (files/folders)
- Add users to join a space
- …
Using these scenarios, we were able to explore users’ journeys and needs in depth, ensuring that our design effectively met their expectations and resolved potential problems encountered during these key stages of the user experience. All these user scenarios were particularly useful during the user testing phase, to validate (or not) our hypotheses about the application’s ease of use.
Creating a design system
A design system is made up of a set of rules and tools (UI kit, graphic charter, interface/code components, etc.) designed to reinforce consistency between our interfaces, maintain the application and ensure an ecosystem and a better user experience.
Another special feature of the design system is its ability to rapidly upgrade an application for future pages/features. Modifications can be made throughout the entire ecosystem. Thanks to its modularity, the color of action buttons, for example, can be changed and updated wherever this element is used, without having to modify the entire content.
With the Parsec design system, we want to ensure a consistent experience, so that we can later design new functionalities such as the integration of a collaborative suite.
We used atomic design to conceive the redesign of the application. This principle, originally created by Brad Frost, puts forward an atomic vision based on science to adapt to design.
To be more precise, atomic design will enable us to create interfaces (in our case) using multiple components that will be nested within one another (atoms, molecules, organisms, templates and pages). Moreover, these components have the advantage of being easily reusable and adaptable to our needs.
In our case, we based ourselves on the existing application to define the list of components needed to create all the interfaces (form, toggle, call-to-action buttons – CAT, …).
Application mock-ups
The design of the mock-ups took place in several stages. We began by organizing ideation workshops within our team, based in particular on feedback from users of the existing application. These workshops generated numerous ideas for functionalities and improvements.
Once we had worked out the basic structure of the interface using wireframes, we could move on to the mock-up creation stage. We used all the components of the UI kit, which brings together all the visual and functional elements required for design. This enabled us to design interfaces integrating specific functionalities for each screen.
To better illustrate the importance of creating components, we present a preview of the home interface when a user is logged in.
On the left, we’ve divided the page into zones to highlight the various components that make it up.
As you can see, the interface is made up entirely of these components.
As a result, any modification made to the UI kit is automatically reflected in all interfaces, ensuring overall consistency.
In creating a consistent graphic identity for the Parsec Cloud application, our aim was to enable users to recognize it easily and use it intuitively. We paid particular attention to data security and ergonomics, two fundamental aspects that we wanted to place at the heart of the project.
Special features of mobile interface design
Designing a mobile-friendly interface is important. That’s why every aspect of our app has been carefully designed through extensive research. We completely redesigned our existing application available on Android, adopting an atomic design approach. This process enabled us to create an optimized interface, perfectly adapted to users’ needs.
Whether you’re using our application for the first time or you’re an experienced user, our intuitive onboarding process will guide you effortlessly through your experience. We’ve taken into account feedback from our users to design exceptional features, giving you secure, streamlined access to all your documents.
We’ve also made sure that our application adapts to your preferred operating system, whether Android or iOS. At Parsec Cloud, our aim is to make it easy for you to use us, by offering you a smooth, personalized experience in line with your habits.
Scenario prototyping
Prototyping is an essential stage in the design of an application, as it enables you to visualize and test all the application’s scenarios interactively.
By prototyping the application, we were able to gain a better understanding of the application’s functionality, as well as feedback from potential users. In addition, prototyping facilitated collaboration between members of the development team, enabling them to work together on a product under development. In short, prototyping was a valuable tool for optimizing the quality and user-friendliness of the application’s testing, while reducing development costs and timescales.
Atomic design also has advantages in terms of prototyping. It allows you to create interface components that are linked to buttons, pages or simply interactions. This means that all components used in the application will inherit the interaction of the parent component.
User tests
Once the prototypes were completed, we set up user tests. In order to create attractive scenarios, the user must feel involved in the scenarios and have the impression of carrying out the task in a real way (importance of creating high fidelity mock-ups). To achieve this, we recommend starting the scenario with “Imagine that…”, and being fairly specific about the user’s immersion in the task. All scenarios were carried out on the prototype desktop version. The tests were used to determine whether the paths we had designed during the user path creation phase were coherent and appropriate.
These tests were carried out in two parts. The first part is the 5-second test, designed to gather the user’s first impressions of the interface with which he will be confronted in the rest of the user tests. The second part is the set of user scenarios for which it will be necessary to verify correct operation. The feedback we received during these tests enabled us to improve sticking points and add new functionalities to facilitate interaction.
Creating dark mode
Dark mode has become essential in applications.
Nowadays, our devices automatically adjust according to the time of day to maintain a visual experience consistent with the interfaces we use, such as TV, computer, smartphone, connected watch, etc.
This is why, when designing applications, it is generally necessary to take dark mode into account in the same way as responsive design.
In our approach, for each variation of our base color, we add or reduce a layer of white color with an opacity level for the light mode, and vice versa with black for the dark mode. The result is consistent color levels that can be used across all our interfaces.
We understand the importance of allowing you to discover and get to grips with this new version as soon as it is released. In the meantime, we invite you to visit Parsec.cloud, where you can now download our Parsec Cloud application. This application enables you to secure your sensitive data and enjoy efficient file management with complete confidence.
Stay tuned for our next communications so you don’t miss out on the latest news on the release of the new version.
Fabien Sevestre
UX Designer PARSEC
