App Theming

Background

After the launch of App Studio, the team was able to start compiling customer feedback about features that could be improved or were missing. Post Re:Invent, (Amazon’s yearly convention) product management came to UX with a list of features to be added based on feedback. The biggest request from our customers was to allow more robust theming of their finished apps with more advanced controls. A team was formed of myself, a principal engineer, and a product manager to add these new capabilities as quickly as possible with the most benefit to the customer. Since this was outside of the roadmap, we had to work quickly and frugally.

My Role

Staffing issues gave me the opportunity to work on features instead of just doing design system work. I had an intimate knowledge of the design tokens since I wrote them, so naturally I wanted to tackle the problem and ship this new feature. I designed the feature end-to-end along with the engineer as he was developing my designs in real time since we had to move fast. I leaned on my deep insights of the design system and how the app functioned on a platform level to quickly iterate and produce results for our customers. We had big clients such as Delta Airlines and the NFL so the pressure was on. I made sure to unblock anything in my way and streamline the process as quickly as possible.

Process

I started out the entry point into theming and customization - what were the major pain points to get into the current basic theming experience. I went back and looked at some past usability studies to get a sense of how people were accessing the editor and what immediate problems they had. For this project I couldn’t conduct user testing myself due to time and budget constraints, so I relied on past relevant research to see what information I could glean from it.

In the current experience, the entry point was outside of all the other app settings which I discovered was a big issue for discoverability. To solve that problem I created a new settings menu that included exposed options in a side bar instead of hiding them behind tabs. Since there were some constraints with time and scope, we had to scale back the initial idea of adding more robust controls for theming and just expose a primary color with a scale of shades that could be used for hover states and additional things like that.