My Blueprint
My Blueprint is a productivity app designed to simplify and improve the process of accomplishing large tasks and goals. As a developer/designer and the technical lead, I was responsible for bringing to life Realitiy's first software product. I created sketches/wireframes outlining the app's user-centered interface, and I handled both the front and back-end development responsibilities. I also helped in finalizing the technical requirements and foundational concepts of the app.

Wireframes

Site Analysis

Your Blueprint

An important part of My Blueprint, from a user experience standpoint, is the displaying of a user's current goal scaled all the way down to the current month's task to be completed. We wanted users to always have an overview of their progress coupled with feedback pertaining to each task. We also streamlined users' progress towards a goal through the ability to complete tasks from their blueprint pages along with their home one.

Welcome Home

Created to be used as a hub, this page contains everything a user may need to go forth along their journey towards accomplishing a goal. A core feature here is our custom-built "task manager". As shown within the interface, it provides feedback regarding one's progress towards the completion of a given task and offers a recommended number of tasks to complete depending on the goal. It also prioritizes and focuses on users' most important tasks, making sure they are completed by their respective due dates.

Assisting the User

A large part of My Blueprint involves creating tasks and setting up a "blueprint" from which to work on and accomplish a goal. In an attempt to simplify this process, we added card elements or simply "cards" with tips on each form page. These tips aid in helping users better format their tasks, and contain important info regarding each type including its purpose within a blueprint. Our forms also contain helpful info for when users create invalid tasks.

Staying Consistent

With the aim of providing a consistent UI, I took on the challenge of creating a custom file upload button. We gave the it a slightly different appearance from the other form fields by excluding the insetted shadowing to give it a more raised traditional button feel. We gave it the same helper icon treatment as with all of the fields and kept the same feedback text pertaining to which file has been chosen if any. In wanting to enhance the button we decided to add a "remove profile photo" option that becomes available once users have uploaded one for their profile. When using this added functionality an AJAX request is sent and their photo is seemlessly removed.

File Upload Button

In customizing the file upload button, I focused on two tasks. First, maintaining the presence of the original button (needs to exist in the DOM without being visible). Second, have our new button mimic the text feedback functionality for when a file is chosen. The first task was accomplished by lowering the opacity of the targeted field to 0 rendering it invisible to users. I also expanded its porportions to 100% the width and height of its applicable ascendants. This all allows our new button's styling to exist in place with the original one layered over top.

To mimic the text feedback feature, I combined JavaScript and Regex. First, I removed the "fakepath" path name provided by the original button when users choose a file and stored the remaining path in the filename variable. I then captured a truncated version of filename that mimics the format of the original text feedback feature. Afterwards, I captured the appropriate filename extension that will later be appended to our truncated_filename variable. Finally, I replaced the default text for the new button with our truncated filename giving users the same helpful functionality they're used to.