FileSender UI & UX: time for a refresh (update)

view the previous blog post about this project.

As FileSender users will know, the platform is ship-shape when it comes to performance. What we haven’t paid much attention to however is look and feel. In all honesty, the interface looks a little dated. The FileSender community realised we were underselling a perfectly good product, and so we started a project to improve the user interface (UI) and user experience (UX). The good people of the NLnet Foundation were willing to help fund part of the journey, for which we are immensely grateful!

The first phase of this journey consisted of a research and usage data collecting phase; part of this phase was a broad questionnaire based survey conducted among the users of three large FileSender sites. This outcome and other research served as a basis for an updated user journey. In the second phase, which has now be completed – we created a wireframe prototype based on the renewed user journey and user feedback. Wireframes contain only the internal structure of pages and the placing of elements; it lacks color and other design elements. The way it visually looks is not in focus yet for this phase – it’s all about the structure and user flow.

The prototype can be accessed by clicking here. The prototype won’t act like a real website, because it is technical non-functional. So no files can be transferred, but the prototype does allow you to click on certain elements and view interactions between elements and pages. It contains interactive (i.e., clickable) elements, but not everything that looks clickable is indeed clickable. If you click on a non-clickable part, don’t worry – the prototype will highlight all clickable items for you.

The purpose of this wireframe prototype is to allow users to test first-handedly the modified user flow through FileSender. We have asked users of multiple FileSender sites to test the created wireframes and the renewed internal structure portrayed in the prototype. The users were asked to complete a few tasks within the prototype and answer some follow-up questions after completion.

For the interested reader, the tasks users had to (try and complete) were as follows:

  • Upload a file and transfer it to an email address.
  • Find out how many times your most recent transfer was downloaded.
  • You want some people to send you files via FileSender, so you want to create an invitation link. You also want to make sure that you get an email when a guest enters the upload page.
  • Transfer a file with a download link, but make sure the transfer is protected with a password.

We then asked users if they completed the task, how easy or difficult they found the process of completion, their thoughts on the task completion process and if they had any other comments.

At the time of writing, we are busy processing this feedback. The outcome will influence the final design: the wireframes will be adjusted to given feedback, points of improvement will be implemented into the wireframes. Right now, a general point of improvement seems to be that the flow can get even more simple. If this is still the case at the end of reviewing all feedback, the wireframes will be adjusted accordingly.

For the third and final phase, we will be creating a Design System for FileSender, and form the final visual design based on the design system and the modified wireframes. This final design will then be implemented into the working code of FileSender — thus generating a functional prototype that has an entirely refreshed UX & UI. By that stage, we’ll certainly be back with you to look for installation evaluators for the new UX!