cube cloud
overview

What is Cube Cloud?

For my first project as a UX Design Apprentice at Bloc , I was tasked to design a cloud storage application and brand that would rethink the cloud storage market by targeting the problems people face today. According to the report, the group of people over sixty is growing more rapidly than any other demographic. As the population ages, though, more “seniors” will be comfortable with technology and only need compensation for actual physiological and cognitive changes. We need to understand these changes in order to effectively master interface design for older adults. I designed Cube Cloud specifically, for this reason, to serve as a new kind of workspace that helps users of all ages animate their ideas seamlessly and share them with a robust community.

View Desktop Prototype | View Mobile Prototype

Role: UX Design, Visual Design, Brand Identity
Deliverables: User Surveys, Competitive Analysis, User Personas, User Stories & Flows, Wireframes, Usability Testing, High Fidelity Mockups, Prototype
Tools: Figma, InVision, Photoshop, Illustrator, Maze, UsabilityHub

problem solving

Problem Solving

CHAPTER #1 — Problems and Solutions

For this project, I was challenged to rethink cloud storage by targeting real-world problems that the competition hadn’t yet addressed. At first, I thought that users wanted a more intuitive, easily navigable dashboard, but my research proved that they wanted much more than that. Designers should make additional compensations for older adults in applications specifically geared toward them, —things like larger fonts, more intuitive interface elements, clear wording, and helpful tips for functionality—it will only improve their user experience.

visual

Visual Elements for Users with Impaired Senses

Vision loss is the most common disability reported in adults in the United States. Many older adults use reading glasses or opt for much larger font sizes when given the option. Text and button sizes should be kept large. Basically, anything that’s meant to be read or clicked should be scaled up.

interaction

Improving Interaction for Older Adults

Interaction is fundamental to the user experience. Visual cues are often vital to those interactions. For older adults, especially, visual cues need to be clear, easy to decipher, and easy to interact with. But it goes beyond just making sure visual cues are clear. Every part of the interaction needs to be kept easy to understand and complete.

cc3
Larger buttons and other clickable targets are important for senior users.
Brain

Issues with Memory and Concentration

Older adults need a bit more time to absorb the information they’re presented with and take appropriate action. Where this becomes a real problem is when presented with complex tasks that require quick intake and processing of information in order to make decisions. Minimalist design—can help prevent cognitive overload from slower mental processing speeds in older adults. Designers should also ensure that older people’s attention isn’t being divided by multiple tasks or parts of a screen.

motivation

Motivation

While younger generations often integrate technology seamlessly into their lives, older adults use technology a bit differently. Applications that aren’t useful are generally neglected by seniors. If an older adult doesn’t find an application to be useful, they’re likely to ignore it for days, weeks, or even months. However, if they see the benefits of using an app, they’ll be motivated to use it regularly.

discovery

Discovery phase

CHAPTER #2 — The Power of Research

In order to understand how I arrived at the solutions to the problems at hand, I had to go back to the beginning — starting with user research. What were my users’ top frustrations and what did they want the most from cloud storage? I’d had a hunch, but to really know the answers to these questions, I had to turn to the responses gathered from my user research survey targeting existing cloud storage senior users creating and sharing on a frequent basis.

cc4

My initial assumptions were that users wanted an overhaul to the user experience. But what I’d found to be most informative from this survey was the desire for additional community, collaboration and saving features that would enhance user creativity.

users

Understanding the users


According to my survey , there were three types of people using cloud storage apps:

1. People who want to create and store information in a well-organized manner

2. People who want to ideate, create content, get feedback, and/or save content for new ideas and inspiration

3. People who want to get in sync with their friends and family

I’d found that these survey respondents best aligned with my primary audience as they were the big curious-minded thinkers and doers. They were the designers, freelancers, illustrators, etc. between the ages of 30–55 in the creative tech industries who were constantly brainstorming and seeking perspective from industry professionals.

analysis

Competitive Analysis

cc19 cc20 cc21

Three of the main suppliers are Google Drive, Dropbox, and Box. They give similar basic features and are very comparable. Dropbox has been available many years before Google Drive so it has a bigger piece of the overall industry, anyway Google Drive still is a nearby contender. Lastly, Box places a strong emphasis on security, especially as it pertains to collaboration. There are different approaches to file management that pose unique challenges to each vendor. Platforms and pricing, security and administrative control and collaboration.

persona

User Personas

Personas are helpful throughout the entire product development phase: from deciding on which features to have in a prototype, to evaluating the end product. When combined with additional user experiences design methods, such as usability testing and task analyses, personas are vital to launching a useful and usable solution. Enter Gina, Tim and Jason, three vastly different personas to embody the full range of Cube Cloud’s target audience.

personas
personas
personas
map

Mapping the MVP with user stories & flows

Keeping these personas in mind, I compiled a list of user stories focusing on the highest and medium priority tasks to reach the minimum viable product. I then converted the user stories into user flows to show how the user can accomplish the primary tasks.

flow1
Create and upload photos user flow.
flow2
Collaborate and share a document user flow.
branding

Branding & Identity

CHAPTER # 3 — The story behind Cube Cloud

In order to understand how I arrived at the solutions to the problems at hand, I had to go back to the beginning — starting with user research. What were my users’ top frustrations and what did they want the most from cloud storage? I’d had a hunch, but to really know the answers to these questions, I had to turn to the responses gathered from my user research survey targeting existing cloud storage senior users creating and sharing on a frequent basis.

cc5

Designing the logo

After selecting the brand name, the logo underwent a plethora of sketch iterations before arriving at its final design. I began the brainstorm by using a mind-mapping exercise to curate a concept that communicated the formation of an idea when many people come together.

cc6

To maintain consistency with the Mathematical theme, I focused on using square and boxes planetary shapes. Why the blue logo? “Blue is associated with the sky and the ocean, which both evoke feelings of tranquility and security.” According to the “Color Associations” report, Blue got the most votes for trust, security, and reliability and finished second in high quality and high technology.

cc7 cc8

I chose to use Zila Slab as the primary typeface mainly because of its legibility, but also because its rounded appearance was reminiscent of the shapes displayed within the brand’s logo design.

drawing

Drawing Board

CHAPTER # 4 — To build the skeletal structure

The best way I’ve found to quickly, easily, and comprehensively communicate with is to share sketches and user flows throughout the whole project. Not only does this help me articulate how I plan to tackle a problem, but by thinking out loud on paper, it allows everyone—myself, designers, or even clients—to see how ideas begin, evolve, and finally crystallize into the solution we’ve all been working toward.

cc9 cc10

Referring back to the problem objectives, I knew I had to address the issue of low discoverability in cloud storage interfaces. Because of this, I chose to display top-level navigation to promote exploration and allows users to easily access the broad categories within the primary navigation before drilling down more specific pages. This top-level approach eliminated unnecessary clicking and the reliance on the search box to find files.

cc11
Wireframes: Upload Photos and Videos
testing

Round 1: Testing the wireframe prototype

If I had moved onto wireframe testing at this point in the process I would have overlooked some of the most glaring issues living within my wireframes. Before moving onto high fidelity mockups, I needed to validate my design decisions through testing. To do this, I used Maze to test mission-based tasks and InVision to conduct in-person usability tests using a wireframe clickable prototype and a test script. Both served as key tools to gather feedback that informed revisions to key action items.

rescue

Wireframe iterations to the rescue


Based on the commentary from these tests, I was armed with the knowledge needed to make the following revisions:

● Adding a new label “Account” to the bottom navigation. To better access the Account and setting page.

● Adding Usage bar to the Dash board. To maintain high discoverability, I placed it within usage info on the display.

cc12
Mobile App Dashboard Progress
skin

Layering on the skin

Keeping the branding and user flows in mind, I transformed my wireframes into high fidelity mockups by weaving in the branding to build the final prototype.

cc13
Prototype: Upload Photos and Videos
testing2

Round 2: Testing the high-fidelity prototype


Case 1: 86% of the participants prefer the files in blue over yellow. Hypothesis: Matching the company color blue to the files will lead to an increase in the number of people to feel consistency. Result: 86% of the participants prefer the files in blue. Conclusion: I decided to use the blue file and make the folder a little bit smaller for the mobile version.

cc14

Case 2: 71% of the participants prefer version B. Hypothesis: Using a clear and bigger font size will lead to more downloads than the smaller font size. Result: 71% of the participants prefer version B, hierarchical placement, simple, cleaner look and better readability. Conclusion: I remake the price plan, combined both together, to make it a better version. See below the new version.

cc15 cc16 prototype

Prototypes

Seniors (ages 55 and older) are one of the fastest-growing demographics on the web. However, lots of usability studies show that many websites and apps are hard to use for seniors. For example, UI elements like dropdowns and sliders are more difficult for users with declining motor skills, particularly on touch interfaces. Older adults don’t need a ton of compensation to feel comfortable using an application. Following best practices and usability guidelines, in general, will go a long way toward making products accessible to all users, regardless of age or any physical or cognitive impairments.

VIEW PROTOTYPE results

User Testing Results


Finding 1. Users had difficulty and didn’t have confidence using the search bar. Upon being prompted to find a specific item, users were immediately unsure of how best to begin a search. Users commonly first chose to use a more standard filtering method like the “Search by Recents” tool. They commented that “the search feels so small,” and typing is not the best way to search.


Recommendation 1. Incorporate voice comment on a search bar.

Finding 2. Most Users Do Not Scroll There are study shows that only 23% of visitors scroll on their first visit to a website or app. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit.

cc17

Recommendation 2. This data highlights just how important it is to place your key content on a prominent position, especially on landing pages.

final

The Final Product

CHAPTER # 5— THE GRAND FINALE

For this project, I think about the problems people encounter in everyday life and how a simple app product could solve those problems. Design a simple onboarding flow, as well as the in-app screens and user dashboard. What worked in this project? User flows, page layout, and visual design. User flows help determine how many screens are needed, what order they should appear in, and what components need to be present. This should lead to better user experiences as it places the user at the heart of the design process. What didn’t? Navigation considerations for the elderly, are our biggest challenge. First of all, they don’t understand what “cloud storage” and what is for and what does it do or help. What were my doubts about going into the project? My target audience was seniors, but when I start working on the project, I want all ages to use my app. But the target audience can not be “everyone.” The more clearly I define my target group, the better I can understand how and where to reach my best prospects. I can’t target everyone, but I can sell to everyone. What surprised me the most? I think the most basic definition of surprise and delight is designing for moments. It’s about establishing an emotional connection with your users and reminding them that the product they’re interacting with is human. What would I have done differently if given more time? None, I’m very confident in my design and app. What did I learn while doing this project? 3 things I learned from doing my project. To successfully design something that solves users’ problems and meets their needs, UX professionals must be able to get out of their own heads, interact with a cross-section of users, empathize with them, and apply what they’ve shared to the product development process.

⦁ Empathy: Put the users in front of everyone! Personas and empathy maps are one way to deeply understand user needs.
⦁ Alignment: The research findings are very important. The users and their pain points need to be considered when making any decisions.
⦁ Iteration: Anything that is deve loped from scratch will be an assumption. It’s essential to keep iterating to understand the users and their needs while they evolve. If a test fails, test again.

conclusion

Conclusion: Looking back and beyond

Creating this application challenged me to learn the importance of understanding user objectives. Instead of amplifying existing features and enhancing dashboard navigability within cloud storage, I had to restructure my approach to identify 1) the goals of my target audience, 2) the steps users were undergoing to meet those goals, 3) a solution that would optimize their current process. My problem objective of solely enhancing the discoverability of existing cloud storage products had immediately shifted when I found that users also wanted to improve their creative processes by exposing their work to a community of creative people. This realization was the key turning point that I wasn’t expecting. In addition to this, I also learned the importance of user testing as early and as often as possible. If I could give my former self one piece of advice, it would be to design less user flows early on in the design process so that I could spend that time focusing on testing just a few primary flows. You can design a solution as meticulously as possible, but there’s nothing quite like experiencing your users frustratingly fail at accomplishing tasks or insightfully delight at a key interaction to reiterate the importance and inevitability of testing. If I had more time, I would integrate three key features — notes, chat and advanced search capabilities to allow users to create more types of content quickly, engage even further with their community, and find information through visual and suggested search terms. Finally, designing this solution taught me so much about people, their expectations, and how small changes to even smaller interactions matter. I learned how to empathize and understand the impact that a product can have on a person’s mood when you focus on solving their problems. And in return, it’s amazing how helping my users gleaned a new, humbling perspective on my own goal — designing products that positively impact and serve the greater good. I came to the conclusion that if I can set out to help a person come up with an idea that has the potential to make a tiny fragment of our world a better place, then I have set out to help accomplish something magical and momentous indeed.

The final Cube Cloud prototype after both rounds of user testing and iterations can be viewed here.

Back to Top