Overview

AND CO is a web and mobile app that aims to streamline and minimize the mundane tasks that are required of running a freelance business. Contracts, time tracking, invoicing, bookkeeping, and everything else you need can be found in one place. There's even a Chief Operator to help you out when you need it. 

I'm a big fan of AND CO, and have been using their product for quite a few months now. However, I always find that my experience becomes a bit frustrating, due to the interface and the information architecture. So, I used this frustration as an opportunity to sharpen my skills in refining an existing product.

 

Why Redesign My Desk?

This is AND CO's current version of My Desk. When you login into the web app, this is where you land. From here, you can use the navigation on the left to look at clients, projects, etc. 

In redesigning the My Desk feature, my main goal was to provide the user with an overview of their workload, as well as a feeling of having a launchpad or home base from which to operate. I wanted to give the feeling of...a desk!

 

Before

After

AND CO.'s Current Version of My Desk

 

My Redesign of AND CO's My Desk

 

The Process

Define

The goal of this project was to transform AND CO's My Desk into more of a launchpad, from which users can view and access information related to their various clients, projects, tasks, etc.  Moreover, to do so in a way that naturally fits with the existing brand, rather than designing some futuristic version of the app.

Explore

I like to handwrite the core problems, features, and needs of the project, and quickly jot down my initial thoughts on what the possible solutions would be.

Then, I visualize what I've written by sketching. Here, you can see an initial sketch, as well as one of the many post-its I used to outline some key points. This was followed by a more cleaned up sketch and wireframes, pictured below.

To achieve the "desk" feeling, I felt the best approach would be to convert My Desk into a dashboard, changing the list of sections in the side navigation into cards that note the number of items within. I also wanted to remove the task list and income/expense information from the home screen, to reduce the amount of private information that shows up upon first click. 

My Redesign of AND Co.'s My Desk - Initial Sketch

My Redesign of AND CO.'s My Desk - Final Sketch

My Redesign of AND CO.'s My Desk - Final Sketch

Wireframes

Refine

Although I was making a shift to a dashboard, which was very different from the current layout of My Desk, I didn't want to stray too far from the minimalist look AND CO has achieved. So, while I started out with a darker design, I continued to iterate, resulting in increasingly lighter designs, inspired more and more by Google's material design guidelines.

 

First Iteration

Second Iteration

Third Iteration

The Final Iteration

In the final design, the entire sidebar navigation was eliminated and transformed into cards, making up a dashboard. In AND CO's current version, the sidebar navigation does have the ability to slide to the left, however, it simply changes the words to icons. This only reduces the navigation to about half its size. Additionally, settings, self-help (which would be a new feature), and log out functionality were moved to a menu on the upper right hand side. Rather than a hamburger button, a profile picture is used to add a element of personalization. A search function was also added.

In the original version of AND CO's web app, the Chief Operator, who acts as a personal administrative assistant and also customer support, was found on the sidebar navigation right along with everything else. In the redesigned version, I have moved that into a chat messenger lower right hand side of the screen, into a familiar place with a familiar chat icon. This places the Chief Operator in a more prominent position, placing it higher in the visual hierarchy. 

Currently, you are unable to reach any self-help options from within the web app. Furthermore, you can not go directly from within the app to back to AND CO's home (or any other) page. So, to resolve this, I added a link to "Help" in the profile Menu, and in this version, the logo would link back to the homepage where the user could easily access the blog and other relevant content found there. 

 

Final Iteration

@2xMy Desk Redesign - Profile Menu.png
@2xMy Desk Redesign - Quick Add Menu.png

Measure

If implemented, I would seek the feedback of existing users via survey and incentivized requests for anecdotal feedback. Additionally, I would utilize analytics software, such as Hotjar, to obtain heatmaps and mouse tracking/recordings, in order to quantify the effectiveness and usability of the interface changes. 

Specifically related to customer support, I would also want to compare and contrast the number of tickets and support interactions with the Chief Operator, given the new access to self-help options directly from the dashboard. 

An ultimate sign of success of the new interface would be an increase in premium subscriptions. It would be a logical assumption that better usability would translate to increased sales, so I'd specifically measure and look for a sudden increase in conversions among long-term users with free subscriptions.

 

Role: UX/UI Design