Upgrade Modal

Who is Apollo?

Apollo GraphQL focuses on making application development easier, better, and more accessible. They build a set of tools and libraries for building and consuming GraphQL APIs. The product I worked on is called Studio, a web application that allows developers to manage and optimize their backend.

The Ask

Apollo had three pricing tiers: Free, Team, and Enterprise, with users having the option to try Team on a free trial. If a user signed up for a Free account and wanted to try Team afterward, they could do so in the application via an upgrade modal. There were two problems with the modal that needed to be addressed: the content of the modal, detailing what features Team had to offer was not up to date and there was no information about the Enterprise tier for users who may have been interested in upgrading further.

Getting Started

With the existing modal, pictured below, being out of date, I got started by working with marketing to get an idea of which features now needed to be highlighted on the modal. From there we worked together to finalize the copy of the modal and then I moved on to the UI.

Going Through Many Iterations

Because Studio had a neutral color scheme, there was a desire to take the modal in a different direction and incorporate more color and liveliness in an effort to get users feeling more excited about what Apollo had to offer. Having more creative freedom with the UI of the modal, I mocked up many iterations to try different background colors and incorporate imagery.

Final Designs

Ultimately, I used a white background instead of a solid color and placed the imagery in the header to ensure readability and not detract from the main content of the modal. I used two brand colors, one for each tier to incorporate the brand and create a distinction between the two tiers. I also incorporated isometric imagery of a satellite and rocket to involve the space themed branding of Apollo.

No items found.

Testimonials

Nicole Caba

“I came across a beautifully designed template and was able to launch a gorgeous website in just 2 weeks. The design is elegant, and have received hundreds of compliments so far”

Denis Pakhaliuk

“Templates by these guys perfectly match our needs and internal workflow. I think Webflow is the future of website design and front-end, and Elastic Themes helps to shape that future today by creating some great templates”

Deena Fox

"The design and quality of code is excellent. I purchased a template to launch a new online media project and it was super easy and quick to set up with a stunning result."