RescueFund iPhone Perspective
Overview

While there exists a multitude of choices for users seeking cloud solutions, many of the services do not offer an intuitive interface or an aesthetic that feels more personal and less business-oriented. Chakra seeks to offer both, while allowing users to upload, share, create content and collaborate.

View Prototype



Roles

UX/UI Design, Branding & Identity

Deliverables

User Survey, Competitive Analysis, User Personas, User Stories, User Flows, Wireframes, Branding, Hi-Fi Mockups, User testing, Prototype

Tools

Figma, Invision, Illustrator, Maze, Google Suite, Usability Hub, Slack

Timeframe

8 weeks

Problem

The market is saturated with cloud services but many do not possess an interface that is intuitive and enjoyable to use. Visual aesthetics tend to be impersonal and limited to a business or corporate vibe.

Solution

chakra is a cloud service that is intuitive, visually appealing, encourages creativity, and provides a streamlined experience in sharing, uploading, creating content and collaboration.

Research & Discovery

User Survey

I created a survey in order to discover user’s interest in features potentially offered by a new cloud storage service. Upon survey analysis I found that free storage space, the ability to upload files from a computer or mobile device, and sharing files or folders were the features of a cloud service that users considered to be of utmost importance. 80% of participants reported that the use cloud services for personal endeavors.

Survey Image
Competitive Analysis

In order to better understand the market, I performed a SWOT analysis of three major competitors:
OneDrive, Dropbox, and GoogleDrive.

Competitor Logos

Based on my analysis I determined that my application would need the following in order to stand out:

  • A robust free plan

  • A modern and intuitive interface

  • The ability to upload and share files, as well as collaborate

  • The option to create notes and documents within the app

I also noticed that all of the companies I researched evoked a very business-like or corporate mood via their websites. Upon making this observation, I did additional research which consisted of viewing other cloud server’s websites. I found most of them to be similar. Taking this into consideration, I decided that an additional way for a new cloud service to enter a highly saturated market would be to focus on a niche audience that would appreciate an interface that nurtures the idea of using a cloud service for creative and personal endeavors, rather than for business matters.

User Personas

Using the findings of my survey and research, I created two user personas to represent my target audience.

User Persona - Jordan. User Persona - Aaron

Information Architecture

User Stories

In order to gain a deeper understanding of the user’s needs, as well as to ensure a minimum viable product, user stories were created for both new and returning users.

High Priority User Stories

  • As a new user, I want to create an account
  • As a new or returning user, I want to upload files from my computer or device
  • As a new or returning user, I want to share files and folders with others
  • As a new or returning user, I want to download files
  • As a new or returning user, I want to access my files from anywhere on any device
User Flows

To optimize workflow organization, I first sketched user flows of my high priority user stories. After completing the sketches, I used Figma to create digital versions.

user flow sketch - signing in and creating a rescue alert
Wireframes

Taking my user flows into consideration, I sketched wireframes of the desktop application. The wireframes helped me to visualize how my research and ideas would be organized into an app. My main goal was to create an intuitive interface that would allow users to perform the high priority tasks in my user stories with ease. After I completed my sketches, I used Figma to create digital wireframes.

Chakra digital wireframes
Chakra digital wireframes
Chakra digital wireframes
Lo-Fi Usability Tests

Upon completion of the wireframes, I exported them to InVision and created a clickable prototype. I then conducted usability tests, assigning specific tasks to the users. The tasks were to sign up for an account, upload a file, rename the file and access account settings. Overall, the users found these tasks simple and intuitive to achieve. The one task that some users struggled with was renaming the file. I made a note to consider this on my next iteration. I also received valuable feedback regarding the navigation content on my dashboard, which I ultimately used to further simplify my design.

Branding & Identity

Inspiration

In order to brainstorm the name and concept for my new cloud service, I went for a jog. By the time I finished, I determined that I would base the branding of my cloud service on the chakra system and simply name it “chakra”. My primary reason for basing my cloud’s brand and concept on the chakra system was the visualization of the cloud service as an “energy center” for creativity. I also liked the idea of finding connections and incorporating the visual and conceptual elements of the chakra system into a cloud service. For further inspiration I searched the internet for images and created a moodboard.

 Chakra Moodboard
Logo

To come up with ideas for the logo, I took to sketching...

Striving for simplicity, I decided to go with a combination of my first idea and another early idea.

I then used Illustrator to create digital refinements of my logo

Typography

For body text, Avenir Next was chosen for its overall warmth and legibility. It also adds a sense of continuity to the design since it was modeled after Futura. Fira Sans, a humanist san-serif font was my choice for titles and headings. This font was chosen for its modern look and easy readability.

Chakra Typography
Colors

Because I desired to incorporate the rainbow of colors associated with the chakra system into my design, a conservative color palette was chosen. I was aware that incorporating the chakra “rainbow” into the design would be challenging to implement in a tasteful manner, but decided to see if I could make it work. For my dominant color I wanted to use a dark shade to complement, yet not interfere or worse yet, clash with the rainbow. I chose a dark purple due to its association with creativity, wisdom, ambition and independence.

RescueFund Color Palette
Additional Visual Content

In order to tell the story of Chakra, I used Illustrator to create a "story spiral". It references each of the seven main chakras with a symbolic word that pertains to the cloud service.

Chakra story spiral
View Complete Styleguide
Hi-Fi Mockups

Referencing my wireframes and branding concepts, I used Figma to create hi-fi mockups for a desktop application. In my mockups I included a homepage and dashboard, as well as screens for sign up, login and account settings.

Chakra HiFi Mockup Landing Page
Chakra HiFi Mockup
Chakra HiFi Mockup
Chakra HiFi Mockup
View all Hi-Fi Mockups

Preference Tests and Alterations

User Testing

In order to make user-based design decisions, I conducted three preference tests for different elements of my cloud server mock up. These tests included placement of a CTA button, text alignment in the plan selection, and the style of the sign out option on the mobile screen. The CTA button test had a very clear user preference, however the other two tests were very close. Because of this, I relied more on the verbal user feedback than the small number differences. This ultimately lead to me changing my design for the Sign Out option and keeping my most current iterations of the CTA button and Plan Selection page.

Prototype & Usability Tests

After making adjustments to my mockups, I exported my work to InVision and created clickable prototypes. I then conducted user testing on my desktop prototype. I had the user perform the tasks of signing up for an account, uploading a file, renaming the file, accessing account settings and signing out. Along with in-person testing, I also exported my prototype to Maze Design order to receive additional remote feedback. In both cases all tasks were completed successfully with the exception of renaming the file. Because of this I decided to change my design to give the user the option of clicking on the actual filename in order to rename the file.

View Usability Test Notes
Conclusion

This project was a major learning experience for me. While I believe that I was successful in creating an intuitive interface with a slightly different aesthetic than most known cloud services, there are some things that I would do differently if I had more time. I think it would have been beneficial for me to conduct additional research after deciding on the concept for my cloud service. Because I decided to target a somewhat niche audience, it would have been nice to survey and perform additional user testing on individuals specifically involved in creative or healing arts. I believe additional feedback from them would have been invaluable to the design of chakra. During the design process, I also had ideas about incorporating some kind of weekly or daily short creative activity, exclusive to chakra, that would encourage members to be connected and share their creations. This, of course is not a function of a typical cloud service, however if chakra was ever to be developed further, this is a concept that I would further consider and research.

View Prototype

Wish to connect?

Please email me anytime at
shanbakdesign@gmail.com