bootstrap buttons


How might we improve the in-store shopping experience at Canada's largest independent home improvement retail chain?

I was approached for a freelance UI/UX design gig by a local indoor mapping startup called SpotIt. The startup had a grand vision of introducing advanced indoor mapping and kiosk technologies into multiple retail stores, but it knew it had to start small and in an impactful way. SpotIt had successfully raised a small seed fund from the owner of a few local Home Hardware stores--Canada's largest independent home hardware retail chain. I was brought on to give some clarity and higher fidelity to their kiosk interfaces in the form of prototypes and spec'd out designs for the outsourced development team to run with. 

Since this project is under NDA, I have purposefully omitted some of the details.


TV kiosk interface + map-builder web app


Freelance UI/UX Designer and prototyper


CEO of SpotIt; Head Manager and Investor of retail store; freelance developers


Journey mapping, contextual inquiries, task flows, rapid high-fidelity prototyping of interaction models using Principle


May 2017 - July 2017

Retail locations that don't take technology seriously are seeing their sales and market share dwindle at the hands of more digital savvy competitors. Digital kiosks, if implemented thoughtfully, may provide an entry point to introduce incremental innovations that elevate the shopper's overall experience at the store.


By testing the prototype on actual kiosk screens in-store with real customers, SpotIt was able to use it as a talking point to drum up support and interest from other stores. In addition, SpotIt was able to open talks with a local leader in digital flyers to discuss partnership opportunities. Lastly, the senior management of a number of Home Hardware stores expressed excitement that this design could potentially save them significantly on flyer printing costs alone.

familytales home page


From my initial conversations with the CEO of SpotIt, the following was how the project challenge was laid out.

Firstly, SpotIt believed that there was ample opportunity to introduce interactive kiosks into the large Home Hardware stores that would be good for business and the in-store shopping experience. They were looking for some design help to flesh out this experience.

In addition, SpotIt aimed to empower specific staff members in each of the store locations to be able to create their own maps of the store layouts, along with an appropriate level of metadata creation, i.e. shelf descriptors, zone designations, etc. SpotIt needed help in designing the UI/UX of this experience as well, which was constrained to be a web-app in order to take advantage of cloud-based product updates and potential subscription-based revenue models.

An additional task on my part was to make the final designs ready to be passed on to a team of developers that SpotIt had hired externally.


At the beginning of every project, I like to have a meeting with the most important stakeholders to understand the problem more and to lay out the goals and objectives of the project for the business and the users. For the latter, I further split up the goals into functional ("what do I need to get done?") and experiential ("what would I like to feel?") goals.


Observational Study

I wanted to understand the shopper we were designing for. What kind of shopper would seek out kiosks or, at the very least, give one a try? What's going on through the his or her head as they enter the store?

To try to start understanding the user more, I decided to take some field trips to a number of Home Hardware stores in order to understand the environment, observe the staff and shoppers, and to document my own experience of trying to navigate my way around the store as a shopper by looking for physical signage, flyers, and existing floor representatives. Management was uncomfortable with me chatting directly with shoppers while they were in the store, so I wasn't able to interview them right when they were shopping, as I'd hoped to. Nevertheless, there was enough I could do to get a sense of things.

The main insights I gleaned were:

• Shoppers hardly look at TV screens that are predominantly made up of rolling ads, except when they are waiting in line

• Shoppers hardly used physical flyers in the store during my observations. If they did take the flyers, it was usually on their way out

• Physical signage wasn’t always intuitive to find or follow as they could fall out of people’s line of sight. Also, there was no apparent order to how the store sections and aisles were laid out and organized.

• There seemed to be an even split in the types of shoppers who decided to explore the aisles by themselves versus those who went straight up to a staff member for help

Competitive Research

Having collected some high-level ideas about the store environment and shoppers' behaviours, I did some competitive and analogous research to learn how kiosk interfaces were being used in retail and non-related industries, such as hospitals, airports, and restaurants.

A couple of things I learned were:

• People don’t typically use kiosks and large touch-sensitive screens for idle perusing; they are usually using them for primarily quick, functional needs

• The most technically advanced kiosks featured features like transparent screens and holographic projections, which were great at engaging people for for a bit, but their usefulness was questionable


To further cement myself and the designs in reality, I crafted a few scenarios that I envisioned the most relevant shoppers would fit in.

As a potential customer walking into the store, the following are scenarios that are possible:

1) the user walks in with a solid idea of exactly what item(s) he/she needs but hasn't looked it up on Home Hardware's website or flyers

2) the user walks in with a general idea of what is needed, and this is likely centered around some type of anticipated activity, e.g. a family bbq event or home renovations, etc.

3) the user walks in after seeing up a product in a flyer and locating it a local Home Hardware through the company website. The website, however, doesn't actually tell the user where the product is located within the store

4) the user walks in without really knowing what he/she wants

Considering the last scenario isn't something we can do much about, I chose to eliminate that scenario.


With the aid of the research and stakeholder conversations, I felt I knew enough to start mapping out possible customer journeys based on some key scenarios that they could find themselves in. I had limited time with shoppers themselves since the management didn’t feel comfortable with me approaching shoppers. As such, I instead interviewed a few people from my own network to understand their buying patterns. This helped me in contextualizing the headspace a shopper could find herself in.

And, in fact, I co-created the journey map with the two stakeholders to ensure we were all on the same page. Their feedback helped me refine it appropriately.


I put together high-level user flows to flesh out how the end-to-end experience could look like. As part of a number of my projects, I typically start creating a hub-and-spoke spider map of the main sections that I need to account for in the solution. This was no different.


And in order to think deliberate through the flow of the kiosk interface, I drew out some user flow diagrams. For quick, lightweight, and effective flows, I typically use Ryan Singer's shorthand method of WHAT USER SEES | WHAT USER DOES. It worked well for this project, too.

The CEO of SpotIt had already written out a spec document for what he was looking which I then referred back to at this point. I then brainstormed a number of different screen layouts for the kiosk and passed them by the CEO so that he can pick the direction to go based on his existing experience with kiosk interfaces and his vision.


For the higher fidelity mockups I created a style guide that was based off the retailer's office website and official colour palette. I modified it to account for the kiosk interface's particular look and feel, which I didn't want to stray too far from that of the official website.


Using Principle to mock out high-fidelity interactions, I created a number of different versions of prototypes for the kiosk interface. As part of A/B testing the value of the kiosk, we decided to create two main versions of the prototype; one would have a map of the store and another would be without it. And in fact, there were now a number of other stores who had expressed interest in using a kiosk without a map; they would be used primarily to display current sales and promotions that there going on at the store.


The prototypes have proved invaluable for SpotIt to demonstrate exciting opportunities to deliver customer and business value and how to position the stores for future enhancements. Corporate leaders have expressed interest in the form of possible funding rounds to accelerate development towards a soon-to-be-launched MVP.

UPDATE: with the help of an awesome dev team that I had the pleasure to work with, the MVP has been launched! Half a dozen Home Hardware locations now have the kiosks in place and being used by customers. SpotIt is now in talks with other retailers to expand the offering.

In addition, SpotIt was able to use the prototypes to open communications with a local leader in digital flyers to discuss partnership opportunities.

Lastly, the senior management of a number of Home Hardware stores expressed excitement that this design could potentially save them upwards of $100,000 per year on flyer printing costs alone. The retailers' alternate options--to go with other ad-heavy kiosk providers--were also proving too expensive for very little in return.

Since this is a project in-progress, we continue to work together to ensure that the designs are moving the objectives of the business and the users forward.

Stay tuned for more as I dive deeper into the map-builder portion of the project!