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
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
Kameron — Serif
Weights — 300, 400
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
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
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
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.
The navigation presented a problem because of the way it was structured. Sketching and quick tests revealed a better approach.
Lacking a uniformed aesthetic the user immersion was never realized and any empowerment was lost. A new User Interface was sketched, tested, and conceptualized.
Small improvements like easy access to your account via a name or cog icon can help clear up the navigation.
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.
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.
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.
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.
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
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
- Main Navigation
- Button Importance
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.
- 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