CitizenShipper is an online marketplace that connects people in need of shipping with drivers who are already going the same way. For almost a year, I was re-thinking UX of several large product areas.

Skillset

Insights

I helped CS capture better data in Google Analytics, and I used this data to bring informed design decisions. For specific needs I turned to MySQL and wrote over a dozen queries to extract behavior-focused data.

Conceptual

I completely reimagined driver and shipper dashboards, as well as some tools that haven't yet made it to the site. My primary target was to cut down on time between new shipments and accepted drivers.

Prototype

In Axure RP, I created highly interactive prototypes for various screens. For certain interactions I even created code prototypes -- big part of the code was later used in production.

UI & IA

Beyond wireframes, I designed interfaces for the new app screens. I aimed for clean, functional design that works well on various screen sizes. This required heavy information restructure.

Product Design

Over time, I developed high level of attachment, along with insight into the product, customers and the market. This allowed me to develop product vision and feature ideas beyond my regular UX duties.

Code

As the core team was small, I often took role of UX Developer, working on both PHP and HTML, CSS and Javascript. This dramatically decreased time to deploy small UI changes.

Screenshots & Deliverables

Several areas of my work required early-stage, concept sketches which easily communicated UX direction with the client. Top four sketches are landing page variations, while bottom set is a dashboard screens for finding shipments and creating custome routes.

First round of proto-personas. The idea with proto-personas is to lay out what we think we know about specific customer segments. This way, in the design process, we can visualize the end-user. Are they going to be tolerant to complex forms? How should we communicate to them? Besides these early (unfinished) personas, I created over 25 pages of interactive prototypes in Axure RP. This allowed the client and his development team to give estimates, comments and ideas.

On the left is driver dashboard before the redesign. Issues I attempted to solve were poor information structure, poor accessibility over hand-held devices and low interactivity of the main screen. I envisioned a dashboard that shows shipments right there, allowing you to filter and navigate without the need to load different pages. Endless scroll loads all the shipments, while each item gives you enough information to decide whether you want to open it up for more details. The UI never got a proper visual design round, so what went live was sort of my wireframe with a few touches of color.

Revamped shipper dashboard. Driver quotes expand to show additional info and to reveal chat area.

The insight which lead this design is that shippers (people with packages) usually speak with multiple drivers at the same time. They care about driver profiles, so I included a brief overview right inside the card: Name, rating, recent reviews, number of completed shipment. Another problem shippers sometimes have is that the $ quote doesn't mean much. Is $255 a lot for this route and my package? Section on the left tells you how the quote fairs against our algorithm, helping you compare different quotes and make better choices.

In other words, quote card gives you brief, but useful overview of the driver and his quote, and gives you chat right there, all in one place. Layout is responsive, which was a delicate challenge on its own. Each card also allows a number of additional interactions, depending on the state of the process.

I rewrote entire HTML, CSS and Javascript code for the payment form, to get the pixels exactly as I wanted them. There were no wireframes or .psd mockups – I designed all the elements right in the browser. I also wrote JS code for small interactions, like when you enter 16 digits in the CC number field, it moves focus to the next input, and so on.

Another big project was a complete revamp of the marketing site. Focus was on stressing trust and security – online marketplaces must, above all, put trust before anything – through clear, concise copy, clear explanation of the process and use of trust symbols. Other improvements were with typography, new visual language and clear call to action. On this project, I lead both visual design and web development teams and delivered a number of git commits myself.

Further optimizations were aimed at testing different trust symbols to increase conversions.

I can help you build or fix your product.

Write Me an Email Back to Home Page