Designing AWeber Labs

Years back I worked on a project that was initially meant to include development resources (aka documentation about AWeber's API) directly into AWeber's main application.

After some heated arguments I was able to sway stakeholders away from that approach, instead suggesting we create a stand alone website that acts as a development portal.

Objectives & Goals

Phase One

  • Provide a place for developers to create an account and register their application with AWeber.
  • Provide a place for developers to look at API related documentation without owning an AWeber account.
  • Provide an easy to navigate documentation library that houses all the necessary components to integrate with AWeber.

Phase Two

  • Provide a UI that benefits both developers and designers.
  • Further refine the documentation making it easier to navigate.
  • Document AWeber's Theme Language to coincide it's public release.

Phase One: Launch The Damn Thing

AWeber Labs started out looking very different than it does today.

It all started with this wireframe...

... which then evolved to this comp...

Main Features Included

Creating A Free Developer Account

Because the success of our API depends on people actually using it, we wanted to make this process as streamlined and painless as possible.

This part of the project contained all the standard pieces included with creating any member based system.

We tackled different things like:

  • Creating an account
  • Email verification
  • Forgetting / reseting your password
  • Logging in / Logging out
  • Status messages, and so on...

Registering An App

The initial product allowed developers to create a free account. Only then could they register an application, obtain all the appropriate development keys, and be able to put in marketing information about the application you planned to develop.

Here is what it looked like to edit your application data...

API Documentation & Code Libraries

The AWeber Labs site also houses our API documentation and we wanted to put together a library that was easy for developers to find what they needed.

Here is what I designed for that...

Phase Two: Design Refresh & Email Theme Language

About a year after the initial release we decided to do a design refresh of the AWeber Labs site in conjunction with the release of our Email Theme Language.

Now we potentially had two audiences coming to this website: developers looking to integrate with our API and designers looking to take advantage of our Email Theme Language.

This was the initial wireframe for the homepage...

Which eventually evolved into the comp you saw at the top of the page...

Streamlining Registration

The update included redesigning all of the interactions throughout the site.

Here is a screenshot of the updated account creation process:

Writing The Docs For Our Email Theme Language

Since I was on the team that helped create the Email Theme Language I thought it was only fitting that I write the documentation for it.

Here is a screenshot of the updated documentation design.

Reorganizing Our API Docs

I worked hand in hand with Ed, our lead API developer, to style our documentation. We used xslt which would spit out xml code which we'd then wrap CSS style around. It was sort of a pain in the ass, but whatever. Within the last year we've actually updated how we generate our API docs again.

I also worked with Amber, our intern at the time, to reorganize everything into two sections: API Cookbook and API Reference Docs.

Amber did an awesome job of breaking down the API Cookbook into easily followable steps and I'd accompany her writing with the appropriate design elements.

We also utilized a javascript plugin Scrollspy, which is super useful in this instance.

Here is the updated version of the API reference page...

I Had Fun Making The Graphics For AWeber Labs

Since I hardly ever (never) use stock images or iconography here are some of the graphics I got to make for AWeber Labs.

API Feature Page On

Let's get a better look at that sweet vector drafting table...

I was also stoked on these page curls...

I had a lot of fun making these flasks and creating them in a way that they would work on any background.

Here is a look at the photoshop file and the stock photo I mirrored them off...

For the intial release of AWeber Labs I designed this banner promoting our only integration at the time (WordPress).

I like how playful and vibrant the design came out.

And lastly, let's look at the vector email I have that I've used on many Labs related projects.

Which came from this huge vector version I created...

Want to see other projects I've worked on?