Finding and organising personal files on laptops

Responsibilities

• Collaborated with international stakeholders and project manager to understand requirements.
• Conducted a user interview to gain insights about the user's behaviour.
• Conducted a competitive analysis to assess competitor solutions.
• Designed wireframes and user flows for the application's structure and interactions.
• Developed visual design aligned with the brand style guide.
• Documented accessibility specifications for high contrast, screen reader compatibility, and tab navigation.
• Implemented responsive design principles for seamless functionality across different screen sizes.

This project was initiated with a collaboration between me and two other designers who received the challenge of proposing a design concept for an application with the goal of solving the problem of files not being found on computers.

We had two other challenges from the start: the deadline was very tight and our client was in South Korea and we were in Brazil, meaning we had a twelve-hour time difference to contend with.

Therefore decisions needed to be made very quickly and the expectations needed to be as clear as possible. To minimise the effects caused by such a large time difference, we had an initial online meeting with our client to understand the main goals and establish their expectations. After this, we started to update them with our progress as promptly as possible. Our goal was to receive feedback to quickly move the product in the right direction early on.

File management can be daunting

After the meeting, we found out that the goal was to address a common issue faced by people: getting overwhelmed by file management.

Losing files on personal laptops due to various sources of file acquisition, such as downloads from the cloud, copying from other devices, or receiving files from friends is a common issue. After downloading a file, it is not always given an easily-recognisable name which leads to difficulty in finding files later as people struggle to remember those seemingly-random file names.

Also, files can have duplicates which makes people unsure which is the correct one to work on, leading them to rely on the date and time last used.

With this problematic scenario in mind, we started to ask ourselves the following question:

How can we create an intuitive and efficient solution to help users easily find their files, minimising frustration and enhancing their overall experience?

Digging into needs and issues

Firstly, we needed to better understand what the pain points of having to find files on laptops were. For this, an internal user interview was conducted with eight participants to understand how people typically organised their computer files, the problems they encountered, and the actions they took to address these issues.

Interview goals

• Understand how they categorise their files;
• Identify how they look for a file;
• Know how often they lose files;
• Identify the hardest thing about searching for a file;
• Gain insights into their needs to find a file.

The survey responses were then categorised based on user behaviour, pain points, needs, goals, and insights.

Getting inspired with competitors

After gaining insights from the user interviews, it became necessary to better understand how competitors were solving the same or similar issues. To analyse competitors, we evaluated them into three categories: what worked well, what didn't work well, and interesting features. This helped us compile a list of potential features for our solution.

Afterward, we conducted a competitive analysis to compare the most common features among competitors, determine which ones were essential for users, and deprioritize those that were less important at the moment. This process led to the discovery of shared features that could enhance our application.

For this stage, we used a table and filled a column with all the features that were found, categorising them as follows: required by our client, essential, low priority, and interesting to have (labelled as 'suggested by the design team').

Refining interface concepts

After gathering data from user interviews and competitors analysis, we needed to sketch some ideas for the product. Our goal was to promptly establish expectations with our client by suggesting and refining the application's layout and interaction as frequently as possible to provide the optimal solution for users and stakeholders. To achieve this, medium-fidelity prototypes were created to share with stakeholders, gather feedback, and then rework the interface accordingly.

This process was performed several times. Firstly, the concept was to create an interface thinking about finding files by date which made our proposals look similar to a calendar. Over time, the concept was refined highlighting the files and using the date as a filter.

Getting approval

After a massive iterative process, the concept was finally approved by the stakeholders. We had the main features planned, the layout and interaction accepted and a good direction to start the delivery stage.

For the delivery phase, I started to work as the only designer of the project. I had to take the concept previously created and detail how all the features would actually work. For this, I had to work on the main steps: create user flows, detail how interaction would work for the development team, create visual design and deliver assets to developers, and work on accessibility and responsiveness.

This made me lead and own the end-to-end design process of the project. I had to face many challenges such as having to deal with complex features and project planning redirection with tight deadlines.

Understanding error scenarios

Initially, user flows were created to map the happy user journeys. The goal was to deliver these flows to the developer team to ensure they knew exactly how the application features would work. As I started to show these flows for the development team and testers, they helped me to identify possible error scenarios that could be encountered.

The presentation of the flows to the development team also helped them identify which features and components would be feasible to develop within the available time frame. This collaborative work improved the user flows by getting people to talk about additional possibilities for specific components or actions.

Working on visuals

To work on the visuals of the app, the brand had already established guidelines that I could use as a reference. I followed the main rules for spacing, font size and main components and built a detailed specification document for developers. Button states, lists, sidebar colours, typography, and meaningful colour schemes were defined to create a cohesive interface.

One of the visual challenges I encountered was the need to translate the application into different languages. As a result, I had to adapt the interface to accommodate both long and short words, as well as determine how dates would be displayed on the screen.

Making the application accessible

Applying accessibility to Windows applications involves three main categories: high-contrast, Narrator, and tab navigation.

The high-contrast consists of four primary themes provided by Windows, each with eight main colours that can be used in the project. Due to the limited colour palette, adjustments were necessary to ensure adequate contrast between components.

One of the challenges I faced was identifying the types of files people had on their computers. A solution was implemented by adding small colour-coded dots to the calendar for both light and dark mode. While this approach worked well, it revealed an accessibility issue when users enabled high-contrast mode, as all colours were converted to a single colour. To address this, the problem was resolved by implementing tooltips. Now, when users hover their mouse over a day in the calendar, a tooltip displays the quantity and types of files for that specific day.

I also had to work on tab navigation and Narrator which are closely connected because the way users navigate with the tab key affects how the Narrator reads the screen. Therefore, I designed a navigation system to follow the logic of left-to-right reading standards, providing audio feedback to help users understand the type of component they were interacting with.

Solving screen size challenges

When designing Windows applications, it's important to consider that users can adjust the screen size at any time. Sometimes, they need to work with multiple applications simultaneously, which is why application screen sizes can range from full screen to a minimum size of 500px.

Faced with this challenge, I had to ensure that an application loaded with features, originally designed for larger screens, remained usable on smaller screens. To accomplish this, I designed the interaction and implemented different screen breakpoints. I also maintained constant communication with developers to test and evaluate how the expected screen breakpoints were functioning. Consequently, the entire team collaborated to develop an effective solution that allowed essential screen elements to remain working even on smaller screens.

The outcome of this effort had a significant impact, not only on the application itself but also served as a valuable reference for other applications developed for the same client.

Lessons learned

This project helped me grow as a designer because I faced many challenges in a fast-paced environment. It taught me some important things:

• Working closely with design, development, and other teams is crucial for making an application successful.
• I learned how to manage projects effectively, meeting the high expectations of global clients even when we had tight deadlines.
• Recognizing the complexities of localization, which involve translating content and adapting the user interface to different languages.
• Dealing with a limited set of colours was tricky, especially when designing for high-contrast themes.
• I figured out how to design a complex interface that works well on screens of all sizes.