top of page

Cloud Storage SaaS Application

Overview
Overview
Role

odrive is a Silicon Valley-based startup that has been operating for ten years. The company offers a SaaS file management platform that consolidates all cloud-based drives into one place, facilitating easy access, protection,

and sharing.

​​

Due to a non-disclosure agreement with the company, certain information must remain confidential throughout this project.

UX Leader

User Research. Interface Design, Web Design, Prototyping

November 2022 - March 2023

Background

Initially, the project aimed to create an MVP for their collaborative file-sharing application across corporations. As the project progressed, a new goal emerged: redesigning their official website. I joined a team of three designers as an external consultant, working closely with the CEO, the development team, and other key stakeholders.


This project was a significant milestone for the company, as it marked the shift from a consumer-focused product to a business-oriented application.

Teaser.png
Challenges

While pursuing the project's main goals, our team encountered several challenges that provided opportunities for growth and innovation. Some of the key challenges were:

  • Limited User Research: Due to time constraints, we relied on internal insights from the CEO and other stakeholders instead of conducting comprehensive user research. This encouraged us to be creative in leveraging available information effectively.

  • Resource Constraints: Without access to extensive data or tools like user testing and interviews, we had to find alternative methods to gather valuable feedback and insights.

  • Tight Deadlines: The demanding deadlines pushed us to streamline our processes and prioritize essential elements, fostering a more efficient design strategy.

  • Evolving Objectives: Frequent changes in objectives require us to stay adaptable and flexible, honing our ability to manage shifting priorities and keep focus on delivering value.

Project Scope

For the initial objective of the project, we needed to design the MVP with the following considerations:

  • Straightforward, Intuitive Platform: Design a platform that consolidates multiple cloud storage services (Google Drive, Dropbox, OneDrive, etc.) in an easy-to-use manner.

  • Responsive Interface: Create a responsive interface that works effectively across desktop and mobile devices.

  • User-Friendly Onboarding: Ensure a smooth onboarding and sign-up process that offers users immediate value.

  • Conversion User Flow: Develop a user flow that encourages free users to transition to paid plans (freemium model).

UX-Process

Due to time constraints, we chose Lean UX as the strategy for this project. Although we typically use Design Thinking, our three-designer team opted for a faster approach to meet the goals and avoid missing deadlines.

​

Unlike Design Thinking, Lean UX is a three-phase methodology that works best when development is conducted in rapid bursts and there isn’t enough time to deliver UX traditionally.

UX-Process │ Think Phase
User Research

Despite constraints limiting us to secondary research and insights from the CEO and sales team, we gathered valuable internal insights for the project. This internal source helped identify three key user groups for the SaaS application:

  • IT Managers

  • Business Managers

  • Power Users

IT and Business Managers, being decision-makers in the purchasing process, expected compelling features tailored to their needs. Their approval was crucial for adopting Drive within their organizations. In contrast, Power Users encompassed all employees who regularly share files via cloud platforms.

User Journey Maps

The next step to gain a better understanding of the industry was mapping a User Journey to outline all the steps involved. We aimed to comprehend how users navigate sharing files between different cloud storages (e.g., from Google Drive to OneDrive).

For instance, imagine you're a supervisor in a company using Google Drive and need to share a file with a client using OneDrive. This cross-platform file sharing involves numerous steps due to the different cloud storage systems.

 

Our findings revealed an intricate process of approximately 20 steps to share a single file between providers, emphasizing its complexity. These insights highlight the demand for a more streamlined solution, showcasing the potential value that Drive could provide to users.

UX-Process │ Make Phase
Tailwind UI

For this project, we used Tailwind UI as our design framework. It was my first experience with Tailwind, and we quickly discovered several key advantages:

  1. Rapid Prototyping: Pre-built responsive components accelerated the design process.

  2. Consistency: Ensured a uniform and professional appearance across all pages.

  3. Customization: Allowed easy adjustment of styles to align with our brand guidelines.

  4. Responsive Design: Components were designed to deliver an optimal user experience on any device.

  5. Excellent Documentation: Comprehensive guides and examples facilitated seamless integration and use.

Tailwind greatly facilitated clear communication and collaboration with the development team, which was essential for meeting the project’s goals.

Figma

Figma was our primary tool for designing low-fidelity wireframes and high-resolution designs. We used Figma to present design iterations to stakeholders and the development team.​ Additionally, we leveraged FigJam by Figma for brainstorming sessions, creating user journeys, and conducting workshops involving multiple participants.

Wireframes

Here are some of the high-resolution wireframes that we designed for the MVP.

BG.png

Website Design – A New Objective Arises

While working on the initial project objective of enhancing the cloud-based application, the stakeholders shifted the team's efforts toward a complete website redesign. ​Due to my experience designing websites, I led the team to tackle this new, unexpected goal. As before, we faced tight deadlines and limited resources, so we needed to develop a quick action plan to design the new website.

Brand Voice

One of our initial steps was to define Drive’s brand voice, establishing a clear strategy for communication across the website and other digital channels.

Through workshops with the CEO and stakeholders, we determined that "Drive is about simplifying cloud storage and empowering teams. We are leading the market to the next paradigm." This tagline guided us in identifying Drive’s brand voice.

 

For this exercise, we utilized Stephanie Schwab’s Brand Voice tool to identify:

  • Character/Persona

  • Tone

  • Language

  • Purpose

 

Here’s the tool with the selected brand voice:​

As you can see, we aimed for an inspiring character, a direct tone of voice, simple language, and an engaging purpose. This helped us establish guidelines for effectively and consistently communicating on the website.

Current Website

Let's take a look at Drive’s current website. The website is straightforward but lacks a cohesive narrative. While it may suffice for existing users, first-time visitors might find it confusing. There is certainly room for improvement, motivating us to begin iterating quickly.

odrive-old.png
Information Architecture

Similar to our previous objective, we employed Lean UX to expedite progress. Following a few days of benchmarking and brainstorming sessions, we promptly initiated the design phase due to tight deadlines.

 

Our first step involved creating the information architecture of the site. We collaborated closely with key stakeholders and developed the following site organization:

  • Homepage

  • Features

  • Pricing

  • Developers

  • About

  • Help

After gathering feedback and collaborating closely with stakeholders, we created the following MVP sitemap, outlining all the website's pages and their respective sections.

UX Trends

Before diving into the design phase, I prioritized defining the trends we would focus on for developing the site. ​As with fashion, music, and art, staying updated with trends is crucial in UX/UI design. We identified three key trends that guided our approach:

Storytelling

We aimed to craft a narrative. While graphic assets are essential for capturing user attention, we emphasized the importance of text. Using our Brand Voice tool, we ensured our communication followed specific guidelines.

Minimalist.png

Minimalism

Minimalist design has become popular in recent years and was expected to remain so in 2022. This approach helps keep users focused on content by reducing distractions.

Scrollytelling

Scrolling itself becomes an experience with this trend. It involves guiding users through a narrative or content journey as they scroll. Elements dynamically reveal and engage users in exploring what the website offers.

Scrollytelling.png
Design Iterations

Once we defined the UX trends and design system, we began the design phase. Time constraints required swift action to meet the criteria set by the CEO and stakeholders. Despite facing challenges such as multiple interventions, directional changes, and feedback loops, we successfully navigated through them.

This is the project's sandbox. As you can see, we went through several iterations during the ideation phase. Workshops and feedback collection were integral to the design process to ensure we met the deadlines.

Final Handoff

After numerous iterations, we reached the final handoff, which was shared with the CEO and stakeholders and received initial approval. ​Here are some of the website's final designs.

Key Takeaways
Project Closure

I believe it's important to highlight that not all projects are successful. Many portfolios showcase the good side of things, but there is also a bad side, even an ugly side. Projects often come with numerous challenges and hurdles, with internal and external factors significantly impacting the outcome.

​

In this case, the project faced multiple internal challenges. Despite these obstacles, it provided me with valuable lessons for future endeavors. Here are three key takeaways learned from this project:

1. Lack of User Research

Despite our requests for a dedicated time window for research, the stakeholders were not receptive, limiting our user research to secondary sources and internal insights from the sales team. We didn’t have the opportunity to conduct proper research, meet with customers, or conduct user interviews. User research is a fundamental pillar of a project's success, and we completely lacked it.

2. The importance of UX Strategy

A solid UX strategy, design principles, and the proper UX tools are essential for a successful project. Allocating time to set up a UX strategy at the beginning of the project is crucial, and it should not be changed mid-course. Therefore, taking the time to create and solidify these elements should be non-negotiable.

3. Changing Objectives

Changing objectives is common in projects; it's normal to experience some shifting goals. However, it becomes challenging when objectives change rapidly. In this project, we went from designing a SaaS platform to redesigning the website, which required distinct strategies, approaches, and design phases. Sudden changes can significantly impact the project's outcome.

bottom of page