Online Cloud Storage: Updating an unsuccessful application

Online Cloud Storage

Updating an unsuccessful application

Duration

June 10th, 2022 to June 28th 2022

My Role

Sole UI/UX Designer

Problem

The application has not been entirely successful and has major accessibility issues.

Solution

The goal is to make the following three improvements to the current file upload task flows:

Make the current upload form easier to comprehend by taking advantage of conventional user interface patterns.
Improve the accessibility of the current design.
Create microinteractions to keep users informed of the current system status, let them know the results of their actions and help them prevent, identify and correct errors.

Overview

For this project, I was provided with a number of screens representing a 2 task flows within a cloud storage application.

Steps to complete

Review and analyze quantitative and qualitative data provided
Conduct market research
Apply UI patterns
Create microinteractions

Data (Usability Testing Results)

Task #1: Add three photos of “Waves” using the built in Google image results, then upload an image from the folder on your desktop.

Participants took longer/more clicks than expected to complete the first task

Only 1 of 6 participants clicked “Upload more” to return to the Select Source screen to complete the second part of the task.

5 of 6 clicked “Upload” and finalized the first set of photos, then restarted the upload process for the last photo
Conclusion: Participants don’t seem to realize they can add files from multiple sources before reviewing and finalizing the upload process.

Task #2: Add a description of one of the photos in the interface.

Participants took longer than expected to complete the second task
Conclusion: This is likely due to the fact that there is a character limit (200) on the description field, but it isn’t validated until after the user clicks the Edit button.

Additional Insights

3 participants stated they found the upload process to be too long.
All participants stated they could use more guidance in the interface about how to add files from multiple sources.
Participants were unsure what was happening in the Selected Files modal after clicking “upload.” While the photos were uploading, there was just a blank screen therefore, users were not sure if they are successfully uploading or if they did something wrong.
One participants was observed squinting at the screen and stated they had some color-blindness and could not see the red colors for the error states.

Applying UI

Colors

For the new UI, I decided to keep a similar color scheme because most players in this space utilized a blue/monochrome palette. However, I decided to make the primary blue color stronger and darker to create more of a contrast with the light purple. I also made all the buttons the dark blue color to make them stand out more. The old UI used the light purple for most of the buttons which made them look disabled because of it looks grayed out.

Typography

The old UI used only Lato as its font but I decided to incorporate Karla for headers, buttons, links and labels to give the product a more modern feel.

Overall Style/Design

I changed a lot of the design to make the product more user friendly. For example, the old homepage is just a list of files. For the new homepage I added several items including a logo, pictures/previews of files, option to change to list view, option to filter the files, an easy way to create/add a new file and an infinite scroll to view additional files.

OLD

  Homepage

Select files

View selected files

Edit file

NEW

  Homepage

Select files

View selected files

Edit file

Creating Microinteractions

Next, I added microinteractions to the design in order to improve the user experience and to keep the user informed throughout the process.

Interaction 1: Let the user know a result of an action

After the user clicks “upload all” to upload all selected files, if one file doesn’t upload they will be informed by a red X and a prompt saying “retry". The user will click the retry button and they will be notified that the file uploaded when the red X changes to the green check.

Interaction 2: Keep the user informed of system status

After the user has all their files uploaded, they will click done. A loader will appear on their screen to inform them that the system is working on uploading the files. In the old design, instead of the loader there was just a blank screen so users stated that they were unsure what was happening after they up

Interaction 3: Help the user prevent, identify, or correct an error

When the user tries to edit the description of a file, they will be informed of the character limit, how many characters they have inputted and when they have inputted their information correctly/incorrectly. I implemented some color in this interaction (i.e. green for correct and red for error) and also included a warning icon when the user goes above the character limit so this error state is accessible to users that are color impaired.

Additional Screens (Final Deliverable)

Choose Files from Computer

Choose Files from Web Search

Select Source Drop Down Menu

Conclusion & Takeaways

The Online Cloud Storage project was one of my earlier projects in the Flatiron School Product Design Program. It was challenging because I had to learn how to create animations, microinteractions and prototypes in Figma. Additionally, I mastered aligning components in a screen, creating standardized buttons using frame and linking screens to create a prototype through this project.

Since this was one of my earlier projects, there were several takeaways including:

Organizing and creating text styles for a project streamlines the process
Be selective with the use of strokes and/or drop shadow effect
Be intentional about every aspect of your design

Overall, this project was a great experience because I had to find my own resources to figure out how different functions in Figma work which in turn, strengthened my ability to learn new platforms independently.