Getting Started

On the first day of my internship, my manager gave me three pieces of advice that became vital to my success at Walmart Labs. "Always have an eye for detail, think about scalable solutions, and learn to be critiqued".

I was then given my project over the next few weeks, to design a tool for designers and developers to allow more efficient access to modules.

My design process always begins with understanding the problem. After a few meetings with my manager and  talking to both Front-End Developers and Product Managers, I began to wrap my head around what modules were and what some core problems were:

• What are Modules?: Modules are containers on the Walmart website that advertise merchandise. These exist as banners, grids, slideshows, etc. Each module comes with an input field list that contains said module's details. How many text boxes it has, where text is located, how it functions, etc.
  ‍
• There is no efficient filter system: Many modules look very similar but have different use cases. For example, one image carousel can have four text boxes while another has three. There is no system to efficiently filter through and find the module you need.
  ‍
• Redundant requests for new modules: Because it is so difficult to find a module you want, Front-End Developers often request modules that already exist or can be easily created by modifying existing modules.
  ‍
• Different mental models: Product Managers and Front-End Developers typically have different mental models leading to them disagreeing on how a Module's more detailed information should be represented.

From here, I realized the solution had to make modules easily searchable and have a way to see them displayed to scale. This is my first mock up of a possible solution.

Design, Meet, Repeat

From here, I met up with my manager to discuss iterating further. He pointed out MANY flaws, as well as details that I was missing. He had me consider if my layout would be scalable for modules with more details or more input field conditions. It was clearly not.

I had been working off of only the few modules I had seen, without considering how others would fit into the design. I quickly drew up and scrapped many more designs, but each one was a bit closer to a solution. Once my designs were more feasible and polished, I began transferring them into Sketch mock ups as well as Invision prototypes.

I also started holding meetings with Product Managers and Front-End Developers (shoutout to Huiwen and Seth) that gave me more insight on who I was designing for: the PMs and Devs would would actually be using this tool. These meetings were opportunities for me to show my most recent designs and get direct feedback from these stakeholders. The PMs and Devs often had different viewpoints, which made the design challenging, but rewarding as I learned how to design for opposing mental models.

This process repeated, and after each cycle I used the feedback I got to improve my designs. Here is my progress from the beginning of my internship to the end.

Module Library Early Iteration

This early design of the Module Library was just me trying to visualize and brainstorm what it might look like. I knew it should have some way to filter modules by type but wasn't sure how yet.

Module Library Final Iteration

This design allowed you filter by module name, type, etc as well as see a preview of the modules. There is a picture view and a list view which you were able to toggle depending on the information you wanted to see. From the Module Library you could also request new modules or click on the filtered modules to see a more detailed view.

Module Detailed View Early Iteration

The way module details were being shown previously made sense to Devs but not the PMs. I wanted to design a more visually representative page for PMs who cared more about how things looked than how it was coded.

Module Detailed View Later Iteration

This design allowed users to see how the module looks/responds in both a desktop view and mobile view. It was a source of compromise as well with the input list being redesigned to make more sense to both Devs and PMs when previously only the Devs really understood what was going on.

The addition of icons helped PMs quickly understand what each type each input field corresponded to, while the code like nesting structure of the input list appeased the Devs.

Module Builder Early Iteration

This was a part of the project given to me towards the end of my internship, more as a stretch goal. We wanted a way for PMs and Devs to request new modules be built in a way that the Dev in charge of building it could easily understand what they wanted.

Module Builder Later Iteration

Later designs of this became a tool that allowed you to drag and drop module details in an order that the Devs understood and could use to build out the module exactly as detailed.

Unfortunately, the final iteration of the Module Builder was lost while transferring files to myself.

Obstacles I Faced

• I wish there had been more time: My 10 week internship had already been cut to 9 due to the design team being gone my first week and everyone at Walmart Labs is understandably busy. As the intern, my meetings were sometimes delayed or canceled for more pressing matters that the Product Managers and Developers had to attend to. This was frustrating at times because it meant that I couldn't really progress. I needed feedback for the latest iteration in order to improve on it.
  
  From this, however, I learned to take initiative rather than be complacent. I would ask for other tasks to do and learned a lot about symbol management in Sketch. I also asked other PMs that I hadn't really met yet and tried to get in touch with stakeholders outside of the Carlsbad branch that may have more time or additional insights.  
  
  ‍
• Why can't we just all get along?: Product Managers and Front-End Developers can be very different. They approach the same problem from different angles, and this diversity can be helpful, but is also made it difficult to develop a system for both of them.
  
  The Product Managers wanted something more visual, while the engineers didn't understand why the existing system with its code like structure wasn't fine as is. They sometimes voiced complaints that this attempt at a redesign was simply a waste of time. I can't show you what the old system is, but even with a CS minor it took me a full day to understand.
  
  From this experience, however, I learned first hand how to negotiate with dissenting opinions in the workplace. Somewhere between all the Slacks, meetings, and disagreements was a compromise that fit everyone's needs.
  
  
• Losing data: For whatever reason, when I transferred some Sketch files and Invision files to myself after my internship was over, some data didn't transfer so many of the "final" designs I am showing are not the actual final, polished designs. They still do a good job at showing my progress but if you have additional questions let me know!

Finale

I learned a lot from this internship but I couldn't have done it without the help and guidance of my team. Thank you to Gary, Gill, Yongsi, and Brian for the help, kindness, and patience you displayed for a young intern who wasn't always sure what to do.

There were obstacles to overcome, but I'm proud of what I did at Walmartlabs.