Let's talk!

This created fractures in how the brand was perceived by a customer, and even how internal teams reused common elements. At an organizational level, each piece of the flow was built by different teams, which created discrepancies in the execution.

So, how could the product team create a scalable web system that would allow our users to make consistent connections to our brand?

For example, in order to pay for Spotify, users had to go through the website. This made the premium web flow a perfect candidate to provide focus for this vision. Tied to our revenue.By analyzing data for the month of February 2020, the Growth team learned that a majority of the traffic were new visitors or existing visitors were looking for music. Sessions didn't last long and interactions were limited.

I facilitated a global workshop with cross-functional partners to identify inconsistencies in our brand and componentry, prioritize focus for an MVP, and create a shared perspective around brand elements in product.Key Takeaways
→ There were language inconsistencies in how we communicated Spotify Plans
→ No interactive or playable elements on onjects visitors expected to play
→ Misinterpretations or old assets from the Spotify brand
→ Several different versions of components and styles leading to accessibility issues

The Brand team, Chelsea Alburger and Erik Herrstrom, gave an overview of the current state of the Premium branding work. We all partnered up to explore how we can create an inspirational base to guide the flow into reality as I moved forward.Based on the workshops, I worked with Tamara Hilmes, a UX Writer, to define three themes to guide creative explorations:→ Contextual
Keep in mind who a user is and where they are within the flow.→ Simple
Users should get what they came for, easily.→ Engaging
If users explore, content should be discoverable.I focused on how we can celebrate the content that Spotify provides, taking inspiration from editorial formats within the music industry and our product experience.

To change gears, I explored making Spotify.com a destination for more than Premium. A place to discover music, learn more about artists, and pay for the plan that makes sense for a fan.This could create additional opportunities with artists to uplevel their content and create a place to drive additioanl editorial based revenue with labels.

I was also curious how to bring fans closer to music. This could help build consistent expectations and streamline how teams work together by leveraging shared elements. Ultimately, this was too drastic of a proposal, but was tested by the Growth team.

Language was a crucial element that was unlaigned throughout the experience. Tamara Hilmes curated a story to redefine the premiuim narrative and pair that back with the visuals.

When I looked beyond the MVP, there was a supportive, technical layer that would help us scale for the future.Key Takeaways
→ Interactive content that ties back to data from Spotify
→ A skeletal system that can support a variety of different asset types and data
→ Reusable styles and components that can be used across business areas
→ Adaptive formats to leverage the different ways a vistor could exprience Spotify.com

Creating adaptive components, like cards, were a way to merchandise Spotify Premium offerings. Additionally, these could become a brandable element for users to connect with through their payment experience and into the Consumer product.

To reinforce how this design can live in a responsive world, I also designed a mobile web variant. Using adaptive design techniques, the end result was more aligned patterns across mobile experiences to lower cognitive load on users.

Since cross-functional teams were involved from the beginning, they were invested in the shared outcome from this vision.The Growth team leveraged the consolidated visual foundation to run a baseline test. There was an increase in Premium upgrades, more people scrolled past the "fold", and there was a significant increase in plays in the Web Player.Additionally, the team also constructed reusable cards in React, moving away from Bootstrap, to help create a tighter relationship between our Home and Premium pages. This reduced the product cost to test new plan formats.

A community ensures that teams are bought in under a shared point of view. This creates leverage for more efficient change that is rooted in concrete brand foundations.This vision was used to influence and formalize a team within Central Design to focus on centralizing and distributing Design Systems at Spotify.

Based on internal research, we learned that Merchant's were looking to expand their reach in a financially responsible way. They wanted to set up an online precense without the hassle.Research Highlights
→ Seamless inventory integration
→ Manage events and donations
→ Customizable templates to suit a variety of needs
→ Low cost to get up and running

Merchant's were looking for something that was easy to use as a majority were unfamiliar with Web Design and Development. Naturally, I explored a "what you see is what you get" style UI.Due to development constraints and the complexities built into the types of items merchants wanted to sell, in-page editing became the more usable approach.

OnboardingIt can be daunting to a merchant to add their entire inventory during an onboarding moment. The approach here was to simply introduce a merchant to the system by selecting a general page layout that fits their brand, verify their business details, add a few items from their inventory, and set up a domain.

TemplatesMerchant's have different brand aesthetics and we needed to cater to a variety of needs. Templates are a great way to get folks started while empowering their brand to shine.I created around ten different templates to start, however, we launched the beta with three. The goal was to create a system around how the different item types could appear, agnostic of a theme.

Item ManagementSince WYSIWYG editing wasn't possible at the time, we leveraged AJAX loading to bring make editing into the page. There was an ever present module to add more content, and manipulating the data from there was made within a form object.

Order ManagementMerchants needed a way to track, ship, and generally acknowledge what customers were purchasing.As I began to define a new checkout flow, the staggered layout of the form elements came into question. Was there a simpler way to construct the page and allow the customers to flow through with ease?

The updated visual style for order management was iterated on and reflected itself through the rest of the Dashboard ecosystem. Once an order is placed, an email will be sent to the merchant if any action is needed so they don’t need to sit on the Dashboard, waiting.

There was a large lift in usage of the online store and has been invested in to create a platform for Square Merchants.This work also introduced the opportunity to invest in a shared design system that could leverage shared components. I began to explore how we articulate a shared design language and expose usage.

Similarly, how could we expose this context to teams? Could we build custom extensions in Chrome that help designers and engineers go through their live products and jump into relevant documentation?

Could that be related to style guide search system? This could repurpose the site's search functionality as a chrome extension.

Creating a VisionI joined 3 other visual designers in a week long visual design sprint to design an ideal creation experience for Docs, Sheets & Slides. By the end of the sprint, we had come up with 10 ‘beautiful-by-default’ sets of templates and created guidelines to make document creation smarter along the following lines:→ Customization: How do users save a scheme that they created? How do they stylize all images in a theme?→ Preview: What’s the best way to see a bird’s eye view of your template?→ Suggestions: How can themes inspire paraphernalia? How does the system suggest grids or font pairings?

Designing Down from a VisionAfter the sprint, I had to scale down the designs to see how they fit in the current apps. I recreated the static designs in native Docs editor to test their feasibility and responsiveness. I soon realized that I needed to make several aesthetic compromises to the design vision due to technical limitations. For example:→ In early 2015, Google Docs didn’t support multi-columns. I had to decide if we wanted to use tables for visual columns knowing that they don’t render well on mobile or use single columns for all templates. This was a problem for resume templates which were mostly 2 columns. So, we decided to support tabled resumes on desktop but hide them on mobile to prevent undesirable broken experiences on mobile.→ I identified several easy wins and got them fixed to make our templates look better. For instance, a no-margin feature was added to support full bleed images in templates. I updated the default typography in Docs to be more hierarchal and readable.→ Docs didn’t support lighter font weights. So, I changed the text contrast to make the fonts visually lighter while making sure they match an accessible contrast ratio. At the same time, I pushed for having font weights available for Docs, Sheets & Slides. I created mocks and a prototype for font selection and shared it with the team.

Over the next month, I created around 40 templates for Docs & Slides complete with original assets while revisiting them multiple times to incorporate feedback from several rounds of UX, PM, Legal and a11y reviews.With the surplus stickers I created for the projects, I started maintaining a team wide repository of my illustrations and kept adding to it. My illustrations are still used throughout the team in multiple G Suite products.

Business Insider: First look: Google is taking fight against Microsoft Office 365 to schools. Templates provide a pre-made setup to make eye-catching and easy-to-read papers, forms, and reports. “It’s like having a talented graphic designer just a few clicks away,” says Ranjan.TechCrunch: Google Docs gets smart typing, templates, smart Sheets and more. They’re exactly what you’d expect, giving you templates for work, education, letters or making a resume. Super user friendly.

A month after launch, templates continued to have a positive impact on the Google Docs experience. Document creation from templates (vs blank documents) increased significantly from 1% to 14%. As a result of the templates launch, 28 day active usage for Docs increased by 40%.For confidentiality reasons I have omitted the actual values for these metrics.