The Home Depot is the largest home improvement retailer in the United States, and the sixth largest private employer in the United States.
I designed a web-based app for their corporate Event Planning department to help event planners share information for process improvement and support budget inquiries. Before this application, all information for 70+ events per year were contained in individual Excel spreadsheets, or in 3-ring binders filled with paper. 
This was a summer internship. I was based in Atlanta with the users. The Development team (all interns) and project manager were all based in Austin, TX. Five UX design iterations in nine weeks.
The research I conducted on this project was to review source documents (Excel spreadsheets and 3-ring binders) and conduct interviews with associates and management in the Event Planning department. My interview guides and meeting recaps were posted to the Corporate UX WordPress site; they are not posted here, as some may contain proprietary or private information.
During the discovery process, as I further defined the requirements for this system, I wrote and updated user stories as needed. For example, I uncovered a need for this system to also include information for events managed by an external vendor. I led the discussions to determine the scope impact and gain approval. For that feature I wrote these user stories:
As an authorized Event Producer or Director,
I want to authorize an external Agency to have access to an Event,
So that Contract Event Producers can access this system and update it with information for this Event, and THD retains control over information about all Events.
Given I decided to delegate the management of an Event to an external Agency,
When I authorize an external Agency to manage an Event,
Then Contract Event Producers associated with that Agency will be able to view and update that Event in this system.
As a Contract Event Producer,
I want to access only the Events delegated to my external Agency to manage,
So that THD retains control over information about all Events.
Given I have been authorized and authenticated as a Contract Event Producer for my external Agency,
When I inquire on Events,
Then I will only see Events delegated to my Agency to manage.
I started with pencil sketches, to get quick feedback from the users. I reviewed the first two screens (Event and Vendor) with the users within a few days of our first meeting. The Event Details sketch was in a later iteration, when I was just beginning to explore how budget information would be displayed and maintained. 
The oval blurs are to hide some of the "real" data that I incorporated into the pencil sketches.
The Dashboard sketch below was a feature which emerged (and was sketched) during a meeting, trying to determine how to leverage a "home screen" to both provide easy inquiry for upcoming Events and provide management information to level workload across Event Producers.
Prototyping and User Evaluation
While planning and developing a prototype, I found it helpful to create a document sequentially listing the expected steps/screens through a specific task. I could use these sequential numbers in the naming of screen images as they were created in Sketch, which made it very easy to then link together the screens in the InVision prototype. 
Later, I found it was effective to add "test script" information to the same document (the material in boxes), and use that document during User Evaluation; that's the version you see here. Click on the thumbnail below to download a PDF of the entire document.
I constructed five different medium-fidelity clickable design prototypes, using InVision and screen images created in Sketch following THD’s UX design standards. The prototype for each iteration addressed a specific scope, and also included changes to address any issues discovered while evaluating the previous iteration. Prototypes were evaluated with Event Producers; test plans and results were posted to the Corporate UX WordPress site.
Below are a few screens from the second iteration prototype. You can access and run this prototype from InVision.
I wanted the power of a spreadsheet to calculate a total from entered details and allow an easy change to any assumption to ripple to total costs, and I also wanted to avoid lots of scrolling and columns. So I devised this modal dialog concept, informed by the "TurboTax" concept where you can just enter a number, or "drill down" to a screen to enter the details to calculate the number.  
To reduce risk, this prototype tested this concept on the Estimated Amount field. This was to allow users to validate the concept would meet their needs and was usable,  and allow the Dev team to confirm it was feasible and productive to build. Once users and developers validated the concept of the modal dialog, I used a similar concept for the Cost Savings and Actual Cost fields in later prototypes.
Below is the test script for this prototype. Click on the thumbnail below to download a PDF of the entire document.
Planning & Communication
After user evaluation of a prototype, I produced a video with a screen-capture of the prototype demonstration, narrated with summarized user comments and commentary on design aspects that might require special attention. For co-located teams this video might not be necessary, however in our distributed situation the Dev team found it valuable.
Below is the grid I created, to serve as a "Table of Contents" for all design prototypes, and share status with the project team. Two quick notes about this grid: 
1) Links to prototypes and user evaluations aren't shown in this example (they are only accessible internally). 
2) Iterations 1 and 2 were conducted on paper (pencil-sketched wireframes, and high-fidelity mockups with Sketch).
I wrote a "Letter to the next project team", to bring new project team members up to speed. This was not so much a design document, as describing the fundamental concepts and decisions associated with this app as completed in Summer 2017 (although some future possible features were described).
Click on the thumbnail below to view a sample of this document. 
Results and Retrospective
What was delivered: I researched, designed, and evaluated five UX design iterations in nine weeks. The development team completed development of the code base that fulfilled those designs. At the end of the internship, the Product Owner began the process of turning over the code for QA review.
What I learned as a designer: I found it helpful to plan out the prototypes by create a numbered outline, identifying each screen image that I planned for the prototype. I also found that starting the name of the created screen image file with the number from the outline kept the images organized, both in my folders and in the InVision prototype. I also found that outline could be easily annotated to become my test script for user evaluation.
From working with Home Depot’s design standards, I developed an understanding of how a properly-designed “Call to Action” button can make the path to the primary outcome clear to the user.
In terms of process, I think I developed a good instinct to tightly focus iteration scope. This enables increasing the speed of iteration and lets the users see the system design more frequently, without being overwhelmed with a large amount of content in each session. When a user evaluation identified changes, I incorporated them into the next iterations’ prototype. This allowed the user to verify those changes, while exploring new features.

You may also like

Back to Top