The Supply Place
Supplying products to professionals and small businesses.
Project Summary
The Supply Place® is a B2B, e-commerce enabled web-app that connects local businesses with local Ace Hardware stores. It differs from the traditional DIY consumer segment by allowing local Ace stores to manage local business relationships and customer pricing models.
Role
Tasks
I was tasked to visually pitch the design direction by way of clickable wireframes and photoshop mockups to Ace executives. Once onboard, I managed a third party agency and assisted in the creation of interactive prototypes while managing the Ace brand and stepping stakeholders through weekly design checkpoints.
Tools
- Paper Prototyping
- Whiteboarding
- Balsamiq
- Photoshop
- Illustrator
- Bootstrap
- HTML
- CSS
- iNet
Company: Epicor Software
Client: Ace Hardware
Project Timeline - Kickoff to GR
4/3/2013 - 1/1/2014
Agency Engagement:
7/18/2013 - 9/30/2013
The Problem: What does a business user need to understand prior to partnering with a Supply Place dealer?
The Solution: Products, Pricing and Proximity.
A list of services as well as a neatly categorized and downloadable product line-card became the solution for business users not yet willing to set-up an account. A Google map pinpointing Supply Place dealers would allow that business to narrow their search by proximity as well as browse that particular dealer's offerings for a better B2B fit. Having selected their local dealer via the map, we could now walk them through a simple account creation process. The full list of services, products, pricing, fullfillment, account balances and user administration would be found on the now logged-in business user's Supply Place site.
Approach & Process
Typically most products I work on follow a set of processes such as Discover, Define, Design and Deliver. For more on this, please see "A bit about my design process..."
Yet sometimes, the approach I take for user centered design isn't so prescriptive. Often times the business prefers flexibility and views UCD methodologies as "academic". When this occurs, I can usually steer internal stakeholders to what I consider the tenets of my design process, while proving their worth:
- question - who (personas) and why (scenarios)
- ideate - sketch, brainstorm, white board
- wireframe (clickable) - user flows, strawman interactions
- mockup - pretty little pictures, color and type trials
- prototype - presentable, not perfect, visual and interactive demos
All of which is done as rapid and iterative as can be expected in an attempt to validate designs. In other words, poke as many holes as is possible into our conceptual thinking in an attempt to fail early, learn early!
However, The Supply Place required a slightly different approach. In order to "pitch" our concept of what The Supply Place could be, I was first asked to create a set of Photoshop mockups based on a limited understanding of the overall offering. This level of detail at this juncture can be messy and unwise. Needless to say those mockups did their job, but you won't find them here. I only mention them as this was something that took me out of my typical design process and comfort zone.
Click or tap upon the images below to take a closer look.
Balsamiq Wireframes
NOTE: There were far more wireframes. The actual number of screens I created in Balsamiq reached nearly 30, wrapped within a clickable PDF that we used to user test our thinking surrounding our interaction model.
Initial wireframe concepts
Photoshop Mockups
The Photoshop mockups below are just a small subset from our second iteration, after the wireframes were approved.
Second round Photoshop mockups
The Supply Place Screenshots
One thing you might notice is the similarities between the wireframes, mockups and the actual screenshots below.
Actual screenshots
It was crucial to maintain tight design standards between iterations as I was managing a third party agency to develop the software as well as leading Ace executives through weekly design checkpoints. They didn't miss a thing and would call me out if something looked different or slightly off from the week before.
Critical to our working relationship was maintaining the rigid style guide and brand that has come to be identified as Ace. Color, typography, hyperlinks, buttons, imagery and a myriad of other elements play an important role in identifying the trusted Ace brand and its newest B2B family member, The Supply Place.
In Conclusion
I feel very fortunate having had the opportunity to work on The Supply Place. I was able to work with inteligent analysts from IBM, executive brand ambassadore's at Ace, I managed a top-notch design agency in Vancouver while working alongside a very talented team at Epicor.
I learned that managing a remote design agency can be a challenge. The logistics of communication across borders is not often solved with similar mindsets or a common language. Often times the best method to communicate design intent is to share a similar toolset and just show instead of tell.
I particularly enjoyed creating the clickable, interactive wireframes. That is not to say that I don’t love creating Sketch or Photoshop mockups or managing a design team. I find that the most collaborative and most explorative opportunities often stem from designing the early interaction.
So was it a success?
I think the map view (above) that pinpoints all the participating Supply Place dealers is a relatively good indication of its success. Of course, this is just my interpretation and is not supported by any real KPI metrics. I have however learned that on average, B2B sales increase to $47 dollars vs. B2C sales at $20 dollars, allowing local Ace stores greater market share while maintaining a reduced cost model for participating retailers. Sounds like a win-win to me.