Inspiration
We decided to complete the Home Depot challenge. We hadn't designed a product like this before and we were very intrigued with the gamification part of the challenge. We have also worked in-store associate jobs in the past thus we know how rigorous the training process can be. We wanted to offer a solution that would encourage in-store associates to take the initiative to complete their training and take it further by constantly learning.
What it does
Our product allows Home Depot in-store associates to steadily increase their product knowledge while tapping into their intrinsic motivations through a reward system. Knowledge Depot allows in-store associates to take quizzes and watch training videos to increase their product knowledge all the while earning points. Points can also be earned if other in-store associates give each other shout-outs and recognize them for all the hard work they've been putting in. As previously mentioned, we want to tap into the in-store associates intrinsic motivations and encourage friendly competition. Thus, we established a leaderboard. We want in-store associates to take the initiative and constantly increase their product knowledge and become the best employee they can be. We also want to show them recognition and reward them for all their hard work, thus the reward system. We also uncovered that in-store associates also deal with unique situations so we implemented a Chatbot as well as a discussion board. The Chatbot is there to answer in-store associates basic question (i.e.: Where is this product? How many are available?). It's basically information at your fingertips. The discussion board is for more in depth and unique situations. It allows in-store associates to talk to one another and find solutions and answers.
How we built it
We built our product in two parts: UI app prototype and a coded website version. However, prior to actually building our product, my team conducted user research, developed personas, mapped out the user journey and created wireframes. For our user research, we reached out and contacted actual Home Depot in-store associates. We asked them about the training process, product knowledge, their experience at Home Depot, customer interactions as well as their opinion on the gamification aspect. Through this research, we learned that many Home Depot stores already have a reward system, consisting of money draws and gift card giveaways. After identifying our key personas, we moved onto personas. We split our personas into three parts: New Hire (no experience), Recent Hire (less than one year experience) and Established Employee (1+ year of experience). Since Home Depot employees are so diverse in gender, age, race, etc, we wanted this app to be accessible and easy to use for all. Afterwards, we identified key features and developed user journeys; how might a user go through our product, from beginning to end. After we completed that part, we moved onto wireframing and then finally building our product.
Website
We developed the website using HTML, CSS, JavaScript, Jquery, Node.js and socket.io. We wanted to focus on functionality for the website, thus we demonstrate the chatbot and quiz features in this version. The goal of the ChatBot is to provide employees with instant access to the product information libraries. The HomeBot as we called it, is a companion and helper to the employee during training and when they are on the job. The HomeBot is able to find products, direct the employee to where products are located, show information about the availability of the products, and even suggest similar products. The HomeBot looks for keywords written by the employee and responds accordingly.
The following is a list of keywords for the ChatBot: To find out where a product is located: "where is" or "find" ** **To contact a manager: "manager" To find quantity of a product: "many" or "left" To find if a product is available in stores or online: "available" To find suggested products: "suggest"
Finally as an easter egg you can also use the "joke" keyword for HomeBot to tell you a joke!
Along with the HomeBot we also created a quiz/game that tests the employee's product knowledge. The game starts with a randomized image and the employee is to find the right answer to the question. Multiple attempts are allowed as the goal is to learn about the product. Points are awarded and incentives are given based on the number of points accumulated. Going to our code, the main detail of the game is the for loop which randomizes the option-answers. While this is a prototype the actual one is planned to be more dynamic and robust.
Finally, we also added another small easter egg game. HomeBot is meant to be a friend to the employee so we included a short and fun Rock Paper Scissors game. This, much liked the quiz is made using JavaScript. The background changes colours based on the result of the game and a score is kept throughout.
App Prototype
For our app prototype, we built it in Figma and then imported it into InVision to add the interactions. We focussed on UI, UX and visual design. We wanted the design to reflect Home Depot's design standards.
Challenges we ran into
One of the biggest challenges we ran into is attempting to learn and incorporate node.js, socket.io and jQuery. We attempted to setup the environment needed to build the HomeBot and failed many times. The HomeBot was a big challenge for us and although it wasn't built to the extend in which we imaged it we were still able to incorporate pieces of what we wanted. If provided with more type we would have liked to make the HomeBot much more dynamic. Much of the HomeBot is hard coded at this point since some of these concepts are so new to us.
That same sentiment is shared for the quiz game. Although we have the basics built out we did not have a chance to randomize the questions and answers. We focused on the logics behind the functionality of the site.
Along with the more technical aspects CSS was a huge struggle for us. We spent much of our time getting the syntax right and debugging small issues to polish up our site.
To sum it all up it was a struggle.
Accomplishments that we're proud of
We overcome our struggles and learned from our mistakes. We also learned more about JavaScript, HTML, CSS, and we started learning jQuery, socket.io, and even a bit about node.js. As rookies, we challenged ourselves to learn new languages and simultaneously code in it.
Another challenge we had was to build the mobile app to completion from end to end. Essentially, we needed to beat the clock in order to get all our deliverables finished on time to be a minimum viable product.
The teamwork that came out of this project is something that we're all very proud of as well. As 2 designers and 2 developers, we needed to all be on the same page about the product which required constant communication and transparency around all ideas.
What we learned
We refined our coding skills as well as our UX/UI skills.
What's next for Knowledge Depot
Our vision for Knowledge Depot is to increase overall employee morale, resulting in a higher standard of customer service. This will be done through the interactiveness and recognition that they will receive by using this app as a platform. We want to reward awesome sales associates and make them understand how valuable they are, which is the primary value proposition.
Log in or sign up for Devpost to join the conversation.