Part a —
Project Goals

Kidwell, a local electrical contractor, hired me to create the visual design for a web and mobile application to help on-site contractors purchase parts and supplies from local suppliers. I was tasked with using the current industry best practices and user-centered design methods to help achieve the desired results.

We created a visual design for the application by:

  1. Interviewing subject matter experts as part of our design thinking process
  2. Validating our assumptions with users (contractors) and SME (suppliers)
  3. Identifying both groups' motivations, goals, and frustrations
Part b —
Business & User Goals

In the current market there were two other companies that had a similar idea. Part of Express Quote's viability would come from:

  1. Establishing partnerships with local, regional, and national suppliers which would give Kidwell exclusivity in the market.
  2. First to market

There were two groups of users:

  1. Group 1 - Contractors: Males 26-54
  2. Group 2 - Suppliers: Males and Females 25-45

For each group, I created a persona which captured their motivations, goals, and frustrations while using the current method of buying and managing orders.

UXD &
Analysis

Part a —
Wireframes

I was given a low-fi prototype to begin my process. From that, I created a new wireframe mockup which led to combining features and establishing a new information architecture based on the personas.

After I walked the stakeholders through the new process and got approval, I created a conceptual mockup, which we iterated through until we had a visual direction established.

I approached three users, two whom I spoke to while conducting research and a new user. I explained the concept of the application. I had them sit down in front of me and had them complete a couple of tasks to see if our idea was easy to understand and if we solved the problem of easily ordering parts from a supplier while on a customer site.

Afterward, I shared my findings with the stakeholders. I got approval to make some changes to the visual design before we moved into the production phase.

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

User immersion was never realized due to a lack of uniform design direction, and any empowerment was lost. A new User Interface was sketched, tested, and conceptualized.

Express Quote UX
Express Quote Final Screens

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.

Account actions were a part of our system and finding a non-intrusive way to alert users was accomplished by using a post-it note as inspiration for the visual design.

Branding
& Visual

Part A — Branding

Play Creative and I split the branding efforts for Express Quote. Play Creative established the initial Brand Mark and Brand Colors. I then expanded on their work with other similar colors for the application which included Primary and Secondary colors, and colors for different states.

I continued the theme with secondary, primary action, and state colors. Established the typography direction. Created the branding assets based off the Brand Mark.

logo by play creative
#0055B8

RGB(0, 85, 184)

#0066CC

RGB(0, 102, 204)

#99999A

RGB(153, 153, 154)

#A3A3A4

RGB(163, 163, 164)

#0084F2

RGB(0, 132, 242)

#339CF4

RGB(51, 156, 244)

#E0DCD1

RGB(224, 220, 209)

#EDE8DA

RGB(237, 232, 218)

#E8D521

RGB(232, 213, 33)

#FAEC21

RGB(250, 236, 33)

#F2F2F2

RGB(242, 242, 242)

#F5911E

RGB(245, 145, 30)

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

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

Initial
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

2nd
Concept

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:

  1. Closing and opening dropdowns
  2. Tabs
  3. Main Navigation
  4. Button Importance
Express Quote Final Screens

3rd
Concept

Now that we had the final logo I could finish the branding guidelines 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

Conclusion

Express Quote's business proposition resonated with me because while attending college I worked as an HVAC installer. I saw the laborious process a job lead would go through to spec out and order parts for a job.

I learned some career-altering skills when Todd Long gave me a shot to design the Express Quote application. Working with a corporation as a contractor opened up the idea of collaborating with a large group of people from various backgrounds. It set me on a path of being able to communicate with a group and sell ideas to stakeholders.

Results

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.

2013
Client
tech
location
Kidwell
Java, JSP, Bootstrap 2
Lincoln, Nebraska