Futurevault is a small startup that promises bank level security for all your files. The software they have developed is unique in that it has multiple layers of filtering. However the look and feel of the user interface is outdated and unintuitive, although I was hired on as a general graphic designer I took it upon myself to take a spin on what I feel like is a much more modern, user friendly design.
Skills Involved: Art Direction, Branding, Wireframing, UX & UI Design, PrototypingWhat started out with a request to "clean up" their contacts page in their UI for a presentation (by changing colours and names to be relevant for the presentation) turned into a full UI exercise for me. Since I was only exposed to their desktop application I wasn't able to get my hands on the mobile version, everything below shows my thinking for a desktop environment.
Problem 1: Organizational Confusion
The original contacts page split the contacts from "All", "Branded Contacts" and "Trusted Advisors" in the left side bar. This didn't make sense to me as "All" should just contain them all and if a filtering option is needed then it should be filtered in the "Contacts Page" instead of in the side bar. Furthermore once in the page each contact requires an additional screen to display the basic contact information.
Solution: Trim the Fat
In my mockup of their original UI I implemented something I learned from Google Material Design; the card system. First I eliminated the extra filtered options in the left side bar and added the filtering options back in at the top of the page for a more intuitive and cleaner design. Secondly I organized the contacts into collapsed cards that displayed the most basic information to give context to differentiate contacts. Next I put the full contact information into the expanded card element so that the user wouldn't have to load a new page or navigate to a different screen to get said information.
By redoing the contact page it inspired me to take a stab at the rest of the UI on my own.
Problem 2: Dated Looks
The current UI for the app is very stark and basic, this is a problem because visually it is very boring and might detract from the benefits of the app. An old UI look will give the impression that it's not continuously evolving to give the best experience for users.
Solution: Trends Make friends
I started off with shifting it to a modern colour scheme. Dark themes are trending now because not only does it look sleek and modern, but it's also easier on your eyes, allowing better legibility and less strain on a computer screen. Another styling cue I implemented was the gradient backgrounds (another trending style) for both the main screen and both side bars to help modernize the UI. For the interactive elements I added a slight gradient to give a more visual hierarchy to differentiate interactions and content.
Problem 3: Unintuitive Organization
Asides from just visual treatments I also found that the basic folder infrastructure to be flawed. The main problem I saw with how they were used before was that once files started to pile up the folder in question would just take over the entire space pushing folder with less content aside to display the overflowing number of files. This meant it would appear visually unorganized and confusing to users, which defeats the purpose of a file storage system.
Solution: Folder Cards
The solution I came up with involved a card system that comes the Google Materials Design documents. The card system helps to contain content and information in a frame that lives within the layout. By combining both the folders used in Futurevault and the card system I created the "folder cards", which organizes the file contents within frames with pagination to eliminate the overflowing issue mentioned above. The frame also helps to add context to files stored within the folders with snippets of important information such as file names, date modified, number of files within the folders etc. I also added a Quick Actions Button on the right side of each file row allows a user to perform actions without needing to open the file.
Problem 4: Clutter & Redundancy
The other issue I found with the service was that there were many odd naming conventions, too many buttons and just a general unorganized display of interactions and content in the layout.
Solution: Consolidate & Update
I found that the "Upload" button to be an odd size for where it was contained so I moved and it to the left side bar where most of the actions take place. This helps to centralize most of the major navigational interactions that a user might be doing in on area. I also changed the button to be more obvious in its purpose, which also follows the styling done in that left side bar for the other buttons as well.
I moved the notifications button to the top right where it standardly is, renamed and combined both the "All" (misleading because it didn't contain the "Unfiled" files), "Brand Name", "Opened" and "Shared" nav buttons on the left side bar to a single "Filed" button.
The "Unfiled" button is a feature where files uploaded and then be renamed by the user or can be put through the "Smart Rename" process, one of Futurevault's key features. I also renamed the "Actions/Sign" nav button to be "Requests" as the files under that section require the user's input to be sent back to the required party.
I consolidated many of the buttons that were placed in odd places in the main screen. These included the "Entities" filter (persons who have access to files you share), general content display filter buttons, the "Collapse All" button and the button for the external link to the user's CRA account. These all lived in different sections of the screen splitting the user's focus, so I redid the buttons to be a consistent style and lined them up under the section title & description. This allows the user to intuitively know where all the buttons needed for the overall section would be without having to rethink what does what and where it is (see UX Heuristic: Recognition rather than recall).
Lastly I found that the description was missing under the page title, adding this in gives the user context of where they navigated to.