PROJECT DETAILS

BRIEF: Established in 1983, Charlotte Bay Trading Company is a small U.S. Customs Bonded Warehouse and trucking company located in Charlotte, NC. They wanted a more polished and reputable website that allowed customers more transparency regarding the storage and movement of the goods.

CHALLENGE: Design an intuitive website that incorporates tools that will allow customers to track shipments, view real-time inventory information and request drayage rates online 24/7.

CLIENT: Charlotte Bay Trading Company

ROLE: UX Researcher & UX/UI Designer

CONTRIBUTION: User Research (Survey), Persona Development, Site Map, Wireframes, User Flow Chart, Low & Mid Fidelity Prototypes, Mood Board, Style Tiles, High Fidelity Mockups

TOOLS USED: Pen, Pencil & Paper, Adobe Illustrator, Adobe Photoshop, Google Docs, InvisionApp, iPhone 6+, MacBook Pro

MY PROCESS

USER RESEARCH & STRATEGY

USER RESEARCH PLAN 

I began this process by thinking about my research goals and then, I laid out my plan based on those goals and in conjunction with which research methods would help me to achieve those goals. 

COMPETITOR'S ANALYSIS 

I began this process by researching Charlotte Bay’s competitor’s, noting what tools and services they were currently using. Since Charlotte Bay Trading Company would one day like to be a logistics company comparable to FedEx, UPS and DHL, I considered these companies as CBTC's competitors. In the design of the website, I chose to incorporate one of the items from the "Expensive High Values" and all of the items in the "Easy Wins" quadrant. 

RESEARCH FINDINGS 

After going through my survey answers, I complied my research findings into a report. Current and former customers were asked to take the survey; the results revealed that some of the features Charlotte Bay's customer's were interested in seeing, were online inventory and shipment tracking, along with rate quotes, just to name a few items.

UX STRATEGY BLUEPRINT

I created a UX Strategy Blueprint to serve as a checklist of questions to ask, using the elements as my guide to create my UX strategy. I considered what problems the redesigned website needed to solve and what I hoped it would achieve. I also examined what I would focus on for the most impact and how I would overcome challenges.

PERSONAS 

Pradeep and Eva are both a combination of the various former and current Charlotte Bay Trading Company customers. Pradeep in particular has a lot of characteristics of one of their customers that has specific requirements about his shipments (inbound and outbound) and requires a lot of special attention.

EMPATHY MAP 

In creating this Empathy Map for Eva, I thought about what a typical day would look like for her; noting her environment, emotions, influences, etc. I listed the things I felt were important to her, the challenges she would face, and what she hopes to achieve.

INTERACTION DESIGN

SITE MAP 

To help clarify the redesigned website’s purpose, I created the flow based on the research findings and Product Roadmap.

DESKTOP/BROWSER WIREFRAMES

I created a user flow chart of the desktop/browser wireframes and included annotations. The chart shows the process a user would go through when scheduling a pick-up and delivery of goods.  

USER INTERFACE DESIGN

STYLE TILES

I began this process using the template that I was provided to me from my UX Academy course, but decided to try my own designs; Option #2 and Option #3 are the results. The client and I both like the color scheme of option #3 and felt the typography conveys a mature, professional feel.

FINAL HANDOFF

I was pretty pleased with the final results and so was the client, I'm still iterating and I'm going to attempt to code the basic site, the client will have a developer do the rest of the heavy lifting such as implementing the online inventory and shipment tracking.