Design

In order to guide the development and gain early feedback on the product, we've created a Hi-fi prototype of the application that can can be used for testing.

This prototype is composed out of 4 parts:

• The login & sign up flow
• The file explorer section
• The permissions sidebar
• The 4-step access assignment

Design Principles

The design for LOAMA is built upon a set of fundamental design principles:

• Visibility of System Status: In order to help the user orientate themselves throughout the application, we've made sure that the user knows in which part of the app they are. Some examples of this are:
  • The highlight menu tab
  • The left navigation bar on the file section
• Error Prevention & Recovery: Because Solid is somewhat difficult to understand at certain times, we want to remove any files or settings that can put the user at risk and help them recover from any error prevention. Some examples are:
  • The warning indication for dangerous permissions
  • The warning dialog box and the button to easily remove the mentioned permission
• Help & Documentation: People aren't familiar with some Solid terminology. If we can't replace the Solid term with a more well-known alternative, we explain that term to the user. This is done by placing tooltips with every term that contain an explanation of the term.

Design System

Our in-house design system is based upon the color palette & typography chosen in the branding section. For the project, we've created multiple components with the appropriate states (Like error states, etc...)

Prototype

The Figma design that you see below here is fully prototyped and can be explored. You can use the interface below to visit the file here.

User testing

During the demo day, we've done a wider user test in order to gain more insight on certain flows and if the design could be improved. The report for this can be seen below or accessed by clicking here.