PASSION PROJECT // CASE STUDY

enveloop application

A FRESH APPROACH TO SAAS CLOUD STORAGE & INSPIRATION BOARDS

VIEW DASHBOARD

OVERVIEW

Bookmark bars in any browser get unruly. Links might save well in Pinterest, but how will those integrate with files in Google Drive? Enveloop solves a major flaw from which most cloud storage systems suffer, instead empowering users to store and organize content seamlessly. Cataloging inspiration from any source, right alongside the working files they inspire, is essential for any creative endeavor.

As my solution, I defined the design and brand for this SaaS web app, allowing users to store files, save links, create simple text documents, and collaborate. All in one place. Read on to see how I’d like to “loop” people into a new way of accessing everything that’s most important to them.

THE PROBLEM

Users were looking for a cloud storage option that offered them more control.

PROJECT REQUIREMENTS

  • Users should register via a marketing landing page.
  • Users should navigate their account content within an organized dashboard experience.
  • Users need the ability to share any content seamlessly with collaborators.
  • Users need the ability to choose between three subscription levels.

USER RESEARCH: FINDING A UNICORN SOLUTION

COMPETITIVE ANALYSIS

SURVEY

PERSONAS

USER STORIES / TASKS

User stories helped me determine and prioritize MVP features for both new and returning users. I also developed a wishlist of features for future sprints—a browser bookmarklet, the ability to toggle between multiple accounts, a desktop widget, etc.

VIEW STORIES

USER FLOWS

User flows defined the true scope of what I needed to build for the first testable version of the application. To fully launch this project, I would need to work closely with a developer to analyze these flows based on the platform’s database.

VIEW SELECTED FLOWS

UPDATING THE LOOK

LOGO

JUST MY TYPE

ITERATING THE ISSUES

FIRST PROTOTYPE

I wanted to test the landing page design to see which features potential users would most react to, at which price points. I also knew I wanted to see how an entirely horizontal navigation design would fare against users’ familiarity with the leading Google Drive. I recruited participants to be recorded in a moderated usability test, using a clickable InVision prototype and a tailored testing script based on best practices from Steve Krug.

After seven usability tests with the first prototype, I gathered many takeaways. My main action items were to refactor the titles of main navigation items to better communicate action, tweak some of my branded terms (“tag,” “envelope” v. “folder”) for clarity, and streamline sharing options on the share modal.

VIEW FIRST PROTOTYPE

MOCKUPS

NEW DASHBOARD NAVIGATION

KEY LEARNINGS

I was challenged by the scope of the web app and by time constraints that only allowed me capacity to build the landing page and one dashboard view. This project taught me the hard way not to think of mockups at just one size—design mobile first!

I also learned the importance of deciding buttons’ hover, clicked, and active states in the mockup stage so I don’t have to make those decisions on the fly in development. Also, so that when working with a full-time developer, I’d be able to provide accurate documentation.

With more time, I’d like to continue updating. First, based on my five-second tests of the landing page on Usability Hub, I’d revisit the hero image/copy to better communicate user goals. On the landing page, I’d also add a “tour the features” button that leads to a page with a video demo of the app.

Within a user’s account, I’d want to further explore the way content is displayed in the dashboard list view. Since visual recall is important to the user base, I want to ensure that visual display isn’t compromised just to save space.

like what you see?