Making Email from Web Apps Easy

PostageApp was created by The Working Group to make sending personalized, transactional or event driven emails from web apps easier. We partnered with TWG for strategy and design of all touchpoints of the PostageApp brand, creating a fun and approachable design system for an otherwise very utilitarian developer tool.

1 of 10

Logo Exploration

Research and brainstorming lead to a multitude of logo concepts, focusing on the obvious relationship between mail and the post office, along with other iconic postal marks, such as cancellation stamps, carrier pigeons and air mail labels.

2 of 10

Completed Logomark

The chosen logo for PostageApp employs the traditional postal red and blue, paired with bold typography. The diagonal striping references mailing envelopes in a subtle way, while framing the entire mark into a compact square shape.

3 of 10

Website Wireframes

We worked with TWG on site planning and content strategy, our efforts culminating in clear and concise website wireframes to help guide copywriting, marketing efforts, and the next design phase.

4 of 10

Website Design – Home

Strong type hierarchies help lead the user through to key information on the PostageApp home page. Loose illustrations and diagrams add a level of approachability and whimsy, while providing a quick overview of how PostageApp works.

5 of 10

Website Design – Plans & Pricing Grid

The carrier pigeon concept uncovered in the logo exploration phase shines with the different plans: egg, carrier pigeon, falcon, owl, and eagle. Attention to detail in the user interactions help to create a more enjoyable purchasing experience.

6 of 10

Website Design – How it Works

We often design and develop multiple page templates for different types of content to help create visual interest and maintain the user's attention when browsing.

http://postageapp.com

7 of 10

Illustration

Origami-inspired bird illustrations bring in the carrier pigeon and delivery concept. They also play on the idea of paper vs. digital mail.

8 of 10

Web App Design

We were able to lend a non-developer viewpoint to the app ux and interface, creating something intuitive with a low learning curve. Advanced features are worked in so that they can be organically discovered when the time is right for the user.

9 of 10

Business Cards and T-shirts

Supporting PostageApp printed materials make use of the custom illustrations and colour palette.

10 of 10

Pioneers of Digital Interfacing

Vizible was an early front-runner in digital 3D interfacing with online media. Their patented ‘cell’ technology was a container and visual platform for websites, video, audio, RSS feeds and still images alike.

1 of 9

Sketching & Ideation

We love energetic sketching. Informed by creative briefs and rooted in market and conceptual research, it provides identity design campaigns the required fundamentals for insight and success.

2 of 9

Logo Convergence

Certain sketched concepts will prove themselves worthy of refinement and finesse. It is in this convergent stage where ideas are more fully developed, vetted for communicative effectiveness and tested in application.

3 of 9

Completed Logomark

Vizible’s completed logo depicts all media and information as a Roman dodecahedron, framed by a window of subjectivity. An expression of the company's ‘cell’ technology and the morphic nature of human experience.

4 of 9

Corporate Website Design

Vizible’s corporate website uses the logo as a keystone in the design grid. This provides structure for content and ensures the identity’s prominence.

5 of 9

Stationery

The core elements of Vizible’s printed stationery package.

6 of 9

Desktop Background

A number of large posters and workstation desktop graphics were produced to inspire employees and partners.

7 of 9

Supporting Product Logomarks

Supporting marks were developed for software products and internal developer tools. These marks needed to be rooted in the main Vizible identity, while also communicating messages specific to their deployment.

8 of 9

Vizible Labs Wordpress Site

This design was created to support Vizible Labs, a testing ground for innovations and the announcement other news and successes.

9 of 9

Leaders in Design Visualization

Cicada Design tells compelling 3D stories about complex projects, ranging from large-scale urban design to minutely detailed furniture.

1 of 9

Sketching & Ideation

Conceptual research based on a creative brief developed with the client lead to exploration focused on iconic and typographic integrations of cicada themed imagery.

2 of 9

Logo Convergence

It is at this stage that we clean up and fully develop the most successful ideas uncovered in the sketching process. In this case, delicate typography and the incorporation of subtle wing venations were brought to life digitally.

3 of 9

Completed Wordmark

Distilling the most successful elements of the exploration down into a single mark is always a challenge. Cicada’s completed logo features delicate custom typography with an integrated, ownable wing icon contained within the lowercase a.

4 of 9

Portfolio Website Design – Home

Cicada’s extensive portfolio is showcased in a manageable way on one page, with additional content hidden in carousels and expanding areas, along with external project pages.

5 of 9

Portfolio Website Design – Case Studies

A sticky navigation at the top allows for easy browsing between the different sections and the peekaboo effect creates an engaging tension. Clean grid variations help distinguish between the different types of content.

6 of 9

Portfolio Website Design – About

A content management system allows for easy updates that the client can complete in-house, keeping content fresh.

7 of 9

Supporting Print Brochures

By utilizing a more vertical brochure size, landscape images could be displayed comfortably on double page spreads, while accommodating extreme vertical images easily.

8 of 9

Stationery

The exclusion of colour from the Cicada stationery suite keeps everything clean and confident feeling. When looking at the stationery and print brochures together, the images pop against the clean backgrounds.

9 of 9

Felix Wedgwood Photography

This redesign for Felix Wedgwood Photography showcases his work in a large and impactful way, while bringing in his pinhole/diecut branding elements in subtly. The user is greeted with a random image upon arrival each time to keep things fresh and provide a quick browsing experience.

1 of 13

Felix Wedgwood Photography

Contemporary javascript functionality helps bring content and images to life – at a glance browsing is achievable through thumbnail grids organized by type.

2 of 13

NHP Research

This clinical trial and research website was designed to showcase written content and messages in a visually impactful way, making the site both engaging and meaningful.

3 of 13

Vizible Corporation

Vizible’s corporate website uses the logo as a keystone in the design grid. This provides structure for content and ensures the identity’s prominence.

4 of 13

ZippMarket

The ZippMarket e-commerce site targets a young, professional, urban audience. Common food and home products are brought to life by using casual and fun lifestyle photography to sell items.

5 of 13

Cicada Design Inc.

Cicada’s extensive portfolio is showcased in a manageable way on one page, with additional content hidden in carousels or external project pages.

6 of 13

Cicada Design Inc.

A sticky navigation at the top allows for easy browsing between the different sections and the peekaboo effect creates an engaging tension. Clean grid variations help distinguish between the different types of content.

7 of 13

Cicada Design Inc.

A content management system allows for easy updates that the client can complete in-house, keeping content fresh.

8 of 13

PostageApp

Strong type hierarchies help lead the user through to key information on the PostageApp home page. Loose illustrations and diagrams add a level of approachability and whimsy, while providing a quick overview of how PostageApp works.

9 of 13

PostageApp

The carrier pigeon concept uncovered in the logo exploration phase shines with the different plans: egg, carrier pigeon, falcon, owl, and eagle. Attention to detail in the user interactions help to create a more enjoyable purchasing experience.

10 of 13

PostageApp

We were able to lend a non-developer viewpoint to the app ux and interface, creating something intuitive with a low learning curve. Advanced features are worked in so that they can be organically discovered when the time is right for the user.

http://postageapp.com

11 of 13

Front Porch Forum

We partnered with The Working Group to design an approachable and fun public facing for Front Porch Forum, a free community-building service that focuses on helping neighbours connect.

12 of 13

Front Porch Forum

Custom illustrations throughout the public site and web app help to reinforce a feeling of grassroots community building. The app and site designs take structural and aesthetic cues from one another to create a cohesive user experience.

http://frontporchforum.com

13 of 13

Front Porch Forum

Loose hand-drawn vector illustrations and icons help to bring the Front Porch Forum brand and website to life.

1 of 15

Wedding Engagment

This vector illustration was created to celebrate the engagement of two dear friends.

2 of 15

Woodhands

An illustration produced for an electro-pop band Woodhands to support the release of their 2008 album “Heart Attack”.

3 of 15

PostageApp

Origami-inspired bird illustrations bring in PostageApp’s carrier pigeon and delivery concept. They also play on the idea of paper vs. digital mail.

4 of 15

PostageApp diagrams

Complex concepts were distilled down to concise and approachable diagrams. These diagrams also served as a visual anchors to text-heavy content pages.

5 of 15

Diti Katona

A portrait of the illustrious Diti Katona, a former employer at Concrete Design Inc.

6 of 15

Infographics

We love visualizing information in different ways. Text is often made more accessible and enjoyable when distilled into concise infographics.

7 of 15

iPad gestures

Technical illustrations of iPad interactions and tablet gestures help users understand the ins and outs of mobile apps.

8 of 15

narimasu

“Narimasu” the Japanese verb meaning “to become” inspired a series of illustrations that depict form leading function, environment informing the self.

9 of 15

kyoto

A vector illustration produced in adoration of the kimono and the processes required for its creation.

10 of 15

Lazy people

This photo-collage was commissioned for a publication titled “Work to Live”.

11 of 15

Icon sets

Whenever possible, we like to create unique icon sets to fit the theme and feel of the web project and the art direction of the brand.

12 of 15

Shinde Agemasu

A bold illustration created for application to buttons and badges.

13 of 15

Dencity

The cover image for a self-published book titled “Dencity”.

14 of 15

The Working Group

Doodle style icons, illustrations, and custom typography add a whimsical feel to TWG’s brand materials.

15 of 15