MyDoc Organizer thought process
By: Margaret Eze
Tags: UX Design, Design Process, UI Design, Product Design

Organize and label your documents according to different categories.

Introduction

On a busy day, one of the challenges encountered is scrolling through mixed documents online. It is exhausting and time-consuming. This has affected me, especially when I am making applications online involving document upload. After filling the form, then comes document upload. This is where the real work begins. I will scroll and scroll until I find the document from its hiding place and I know you experience this too.

MyDoc Organizer is here to tackle this challenge. It will organize your documents according to different categories of documents, for example, you can create a folder for your projects, resume/CV or your confidential documents e.t.c. Instead of strolling through many documents searching for one document, Doc organizer helps you to categorize and label your documents into folders for easy access.

The features include search document, folders, categorize document, sort files, rename & delete.

Design process

I follow this design process,

Research

User flow,

Mood board,

Wireframe,

The UI and

The prototype.

Research

I didn’t carry out in-depth research for this app because it is a simple app and also because it was a personal project. Although an app like this exists in the App stores. But they are not still helpful as it cannot categorize your document into folders, for example, Doc organizer, Doc manager e.t.c.

Next step

Information User flow

Before I started, I created an information architecture on how the users will navigate through the app.

User flow

Moodboard

Just like every start of any project, I went online to find inspirational designs similar to my mine from other designers. I visited dribble & Pinterest as usual. From the inspirational designs I gathered, I created a mood board to draw inspiration for my design.

Wireframe

Before I start any design, I love sketching on paper first before creating the wireframe. With paper sketching, I can easily determine whether or not my ideation make sense at all.

From the paper sketch, I created the wireframe, which serves as a reference while creating the UI design.

We are gradually approaching the real deal.

wireframe

Style guide

I created a style guide for consistency and easy workflow. I used warm colours for the UI design because they are calm colours. For the typography, I choose Roboto for mobile apps.

Style guide

The UI (The final design)

Using the wireframe as a reference designed the UI.

The introductory screens

The home screen

The home screen

The prototype

To wrap it up, I created the prototype of the MyDoc organizer.

The prototype

Final thought

I enjoyed each process in creating this App. Except for prototype which was a bit challenging. But with constant practice, I will master it. I want to use this medium to thank She Code Africa and the team behind it, for this opportunity. I am much better now than I was, before joining the She Code Africa Mentoring program. I also want to thank my mentor Adeyemi Deborah for her patience and mentorship. May God bless you all. corrections and criticism will be highly welcomed by me. Thanks for reading.