whitektlogo.png
iphonexsfolio.png

SUMMARY

User Experience Design & Branding

Folio seeks to create a cloud storage solution so easy to use that 

instructors and students will never want to return to hard drive 

storage. Folio needed an identity with a modern, user friendly 

appearance. These goals guided the design decisions throughout the project.

Stay organized

at school, home, or anywhere 

in between.

Stay organized

at school, home, or

anywhere in between.

Folio seeks to create a cloud storage solution so easy to use that instructors and students will never want to return to hard drive storage. Folio needed an identity with a modern, user friendly appearance. These goals guided the design decisions throughout the project.

ktlogodarkpurple.png
whitektlogo.png
  1. A saturated market of cloud-based
    storage applications. 

  2. Didn’t know what features were
    most important to our specific user base.

  3. Teachers and students have a lot of
    documents to create and organize.
    Keeping it all in one place can be 
    cumbersome.

imacfolio.png

SOLUTION & PROTOTYPE

  1. A saturated market of cloud-based storage
    applications. 

  2. Didn’t know what features were most important to
    our 
    specific user base.

  3. Teachers and students have a lot of documents
    to create 
    and organize. Keeping it all in one 
    place can be 
    cumbersome.

PROBLEM

  1. Identified the education market as a niche and created a unique identity and brand full of energy with modern flare.

  2. Through user research identified file upload, content creation, and content sharing were most important to users. 

  3. Focused on a easy to use interface that allow teachers and students to easily navigate the application and manage files. 

BRANDING

Logo & Design

Sketches helped establish the overall look of the logo 

design. Sharp edges and clean lines gave us the clear 

and structured appearance necessary to fit the brand.

Sketches helped establish the overall look

of the logo design. Sharp edges and clean

lines gave us the clear and structured

appearance necessary to fit the brand.

foliosketches.jpg

Color Palette

The colors used create a sense of energy and

 productivity. A style guide was created as

 part of the branding process.

folorcolors.png

#65EEB7

#F4F4F4

#FF5722

#0F3645

laptop.jpg

RESEARCH

Goal of the Research

It was important to find the right combination of features to meet the needs of teachers and students. 

infographic.png

71%

FILE UPLOAD

57%

CONTENT CREATION

71%

CONTENT SHARING

Surveys

Our research identified the most important features: 

71% thought file upload was important.  57% felt content creation was  essential.  71% highly valued content sharing.

Personas

persona1.png

BIO

Emily Hall, 25

Graduate Student, Photographer, Artist

Bloomingdale, IN

GOALS

- Upload Files

- Organize photos for school

- Share photos

- Create content for class

- Access files from any device

“Being able to organize and share 

files with teachers, friends, and clients 

motivates me to use cloud storage.”

Users personas were created  to learn more

about our users and ask questions that might

begin to identify why users value certain features.

persona2.png

BIO

Sebastian Mateo, 32

Sales Manager, Dad, Biking Enthusiast

Sacramento, CA

GOALS

- Access files from anywhere

- Upload documents

- Create documents

- Share work with colleagues

- Platform that’s easy to use

“Staying organized and keeping

files in one place is important to me.

I also have to be able to access

documents from anywhere.”

USER FLOWS

The Design

User flows were created as a way to map out the design of the application by identifying screens the user will encounter for each primary feature.

userflow.png

WIREFRAMES

The Design

Wireframes were roughly sketched to begin the 

design process. Screens such as the dash and the 

add files pages underwent many iterations before 

and after testing. 

Wireframes were roughly sketched to

begin the design process. Screens such

as the dash and the add files pages

underwent many iterations before 

and after testing. 

wireframes.png
lowfi.png

USER TESTING

The Design

hifi.png

Each feature was tested through low fidelity and

high fidelity mockups. Changes were made to the homepage to include more information about the product. Changes were also made to the dash as

the navigation items were clarified. 

Each feature was tested through low

fidelity and high fidelity mockups.

Changes were made to the homepage

to include more information about the

product. Changes were also made to the

dash as the navigation items were clarified. 

The original design of the Drag and Drop screen was problematic because users could not see files

unless they scrolled to the bottom of the page. Users wanted to be able to see what already

existed in the Folder & Files storage space so they

could better organize files. 

The height of the drag and drop box was adjusted

in the HiFi mock up so users could easily locate files within their account. New buttons were added so teachers and students could create a new document or add a new folder from the Files and Folders page. Additional features were also made accessible from the top navigation menu.  

The original design of the Drag and Drop screen was problematic because users could not see files unless they scrolled to the bottom of the page. Users wanted to be able to see what already existed in the Folder & Files storage space so they

could better organize files. 

The height of the drag and drop box

was adjusted in the HiFi mock up so

users could easily locate files within

their account. New buttons were added

so teachers and students could create a

new document or add a new folder from

the Files and Folders page. Additional

features were also made accessible from

the top navigation menu.  

Low & Hi Fidelity Wireframes

hiandlowfi.png

PREFERENCE TESTING

Usability Hub was utilized to preference test several broad and specific features. Based on user preference, the test lead to color changes that fit the brand and increased readability.  

lowfidraganddrop.png
filesandfolderspic.png

Conclusion

ktlogodarkpurple.png
noun_Email_1208045.png
noun_linkedin_2386251.png

When we began this project we didn’t have clear idea of what features users really cared about having in the application. Through our surveys we were able to identify exactly what mattered most. Many iterations of wireframes and testing help us to understand the importance of the test conducted as positive changes and improvements continued throughout the project. From the homepage, to overall navigation, color and layout changes led to revisions imperative to an easy to use application. I learned that when in doubt, test it! 

ktlogodarkpurple.png
noun_Email_1208045.png
noun_linkedin_2386251.png