Express Quote Final Screens

brief

Express Quote is a communication tool designed for electrical contractors to purchase building materials from electrical suppliers. Kidwell contracted me to work on site to design and help build the web application.

logo by play creative

Typography

  • Titles Quote: Electrical Supplies

  • Headlines Administration Dashboard

  • Notes Please drop off the order behind the house...

  • Chat I would like to add can lighting to order #1nu98

Verdana — Sans Serif

Weights — 400, 600

abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

Kameron — Serif

Weights — 300, 400

abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

mood board

Based on who we believed our user base was we selected a few websites and web applications to draw user experience and visual inspiration from.

  • — Flud
  • — Gmail
  • — Facebook

user experience

Solving a Problem

My task was to deliver an effective user experience for contractors and suppliers. Over the course of a six month period with Kidwell, we created a visual design for the application where we:

  • Engaged with subject matter experts through our design thinking process
  • Validated our assumptions with contractors and suppliers

persona's

We indentified groups of users from within both user groups. Each captured their behavoirs and needs which impacted the visual design outcomes.

  • Males 26-54 in Contractors
  • Males and Females 25-45 in Suppliers
Express Quote UX

Wireframe & Conceptualization

We started with a low-fi prototype. From that, I created a new conceptual mockup which lead to combining features and finding new opportunities through an agile iterative process.

Navigation

The navigation presented a problem because of the way it was structured. Sketching and quick tests revealed a better approach.

Flow

Lacking a uniformed aesthetic the user immersion was never realized and any empowerment was lost. A new User Interface was sketched, tested, and conceptualized.

Express Quote UX

User Controls

Small improvements like easy access to your account via a name or cog icon can help clear up the navigation.

Need Help?

Being able to help customers in an easy and quick way was at the top of my list. I thought that a tab would be the most accessible.

Alerts

Alerting the user in a non-distractive way but subtle enough was needed and I thought a notepad with a number it in united the brand identity and accomplished the goal.

Express Quote Final Screens

design iteration

After getting feedback from the stakeholders, we quickly iterated using a process of build, measure, learn. Each stage changes based on the feedback we received through our process.

Concept

From a pure UI perspective, I felt the design needed an overhaul. Lots of small issues became apparent fast and in the next steps we worked out those issues through sketching and testing.

Express Quote Final Screens

Iteration One

Visuals were updated to reflect actual HTML elements. A priority list was drafted to identify section importance. We also tested these changes:

  • A Menu at the top
  • Active and Shared projects in the main section
  • Sidebar elements Drafted and Expired
  • List and Column view selectors
Express Quote Final Screens

Iteration Two

After testing a few ideas, we moved most of the menu into a dropdown under the users name. This change allowed for a cleaner interface which helped users focus on their tasks. Immersion and cognitive load principles were applied to:

  • Closing and opening dropdowns
  • Tabs
  • Main Navigation
  • Button Importance
Express Quote Final Screens

Final Iteration

Now that we had the final logo I could finish the branding guideline which unified the interface.

Next we worked to realize this concept in HTML using Bootstrap 2.3 as the front-end framework, JSP as the application layer and Java as the backend layer.

Kidwell launched an official beta in 2013 to further test and iterate the idea and my part in the process came to a conclusion.

Express Quote Final Screens
Express Quote Final Screens

my contribution

Beta

Status Realized

Concept

Validation

Branding

Elements

Express Quote was my first web application and I am extremely thankful for Todd Long giving me a chance to work on it with his team.

Iterative testing was crucial to producing the end result and I fell in love with the process. Kidwell ended up getting their product into the hands of their customer base.

Project

2013
  • Name Express Quote
  • Client Kidwell
  • Deliverables Conceptual Designs, Web Application, and Branding Elements
  • Disciplines Art Direction, Visual Design, Coding, and UX
  • Team Nate Chapman, Todd Long, Ryan Theil, and Naren Parimi
  • Technology Java, JSP, Bootstrap 2
  • Location Lincoln, NE
nachapman, chpmn © 2015