Irene Kyuhee Noh
 
Hero-Image.jpg
 

checkdocs SMART FOLDER

 

Project: E-Folder SaaS Web Design

My Role: UX/UI Designer

Timeframe: 1 month

Tools: Pen/Papers, Adobe XD, Illustrator, Box, Google Drive, GoToMeeting

Project Overview:

CheckDocs can help users share contents seamlessly. When people share content-heavy documents, such as leasing, legal, or audit working papers, it is difficult to keep track and be organized. Statistics also show people use an average of three different content repositories, which can be problematic when sharing documents. My target objective is to create a web-based application where users can share and manage documents efficiently.

 

 
DISCOVER.gif
 

I. DISCOVER : Look for meaning

Client Recap

C&C Analysis

 
 

Client Recap

IMG_8951 2.jpg

My client and I had an initial meeting to understand their business goal and create a scope of work. The required pages from my client were:

  • Dashboard: Users can get quick updates on projects

  • My Checklist: Users can create a checklist to view all past and ongoing projects in detail

  • My Places: Users can store their Cloud Data Services (Box, Google Drive, Dropbox, etc.)

From the provided scope, I was able to briefly map out the site and start to brainstorm the design. I decided to perform a quick competitive and comparative analysis between two different features:

  1. A checklist manifest platform
    (Microsoft To-Do vs. Process Street)

  2. A shared file service platform
    (Google Drive vs. Box)

 

 
DEFINE.gif
 
 

II. DEFINE : Edit insight

User Persona

 
 

User Persona

Based on the research, I came up with two different types of user persona: Requester and Participants. 

When creating the second user persona “Participants”, I realized we needed a place to store all the received requests from “Requestor”.
So I decided to add another page on the navigation panel titled “Requests” to separate the received projects from current projects, which are stored under “My Checklists.”

 

 
DEFINE.gif
 

III. DEVELOP : Explore Possibilities

Lo-Fi Sketches

Site Mapping

 
 

Lo-Fi Sketches

First basic sketches from the research

 
 

Site Mapping

I transferred my lo-fi sketches into lo-fi wireframes and combined with the site map. 

 
 

 
DELIVER.gif
 

IllI. DELIVER : Prototype, Test, Revise and Repeat

Style Guide

Final Product: Hi-Fi Wireframes

Next Steps

 
 
 

Style Guide

CheckDocs was designed for many types of users. It was meant to be versatile from users such as a college student to a Senior Case Manager. Taking this into consideration, I wanted the color scheme to be straightforward but yet vibrant.

 
 

Final Product: Hi-Fi Wireframes

Some of the key screens of this project

1. Create New Checklist View

 

2. My Checklist View

3. Request View

View Full Prototype

 
 
 

 Next Steps >

  • Create a built-in checklist template for users to quickly jump-start a project.

  • Mobile Friendly

iPhone X Template.jpg
 
 
 
 

Say Hello!

 

kinoh91@gmail.com
irenenoh.com
https://www.linkedin.com/in/irene-noh/