Alero provides online accounting software for small and medium businesses, with an easy-to-use interface, advanced features, and powerful integrations with every aspect of your business. Over 100,000 businesses use Alero to manage finances, track inventory, send invoices, receive payments, and more.

In early 2017, I designed Alero's new promotional website, including an introduction to Alero, details about the software's features, purchasing and contact information, and a support landing page. I worked with representatives from the company to find and develop a unique visual style that incorporated the qualities they felt set Alero apart from the pack. The end result was a set of pages and resources that promote Alero effectively and beautifully, with web-based guides to help update and expand the site into the future.


Mood Boards

I started by developing mood boards to determine the look and feel the client wanted for the site. After an interview, I created and presented a couple options of potential directions for the site's style. After some merging, alteration and refinement of concepts, we eventually decided on a look that felt welcoming, yet stable.


Wireframes

Once we had decided on a feel for the website, I began creating the general layout of the pages with wireframing. I started on paper, then moved to vector to refine my concepts. Keeping in mind the mood the client had chosen to represent their brand, I created an asymmetrical layout that still felt balanced and strong, with bold typography and contrast.


Creative Concepts & Page Layouts

The next step was to apply the theming decided on previously to the wireframes, add content and photos, and make creative concepts to revise and refine the design. Once a concept was settled on, I extended it across the requested topics to create a number of page layouts that provide static previews of how the finished pages will look.


Pattern Library

Finally, I used the page layouts and static work done so far to create a pattern library, defining typography, styles, sizes, and colors in CSS and building an HTML page to provide examples for reference. These resources can be used as guides for internal developers to build fully functional web pages that adhere to the system developed in this redesign.

Alero launched their new promotional site with the design in May 2017, alongside a visual refresh of their online accounting software using an in-house design inspired by this collaboration.

This case study and the redesign process therein were part of a college assignment. We spent four months with a working web designer going through the process you see here, designing a website and branding for Alero. Although Alero is fictional, the teacher acted as a representative from the company and worked with each of us to refine our individual materials and create a design that meets client expectations. Images in these designs are from iStockPhoto. All other content, including copy, branding, navigation, interface, and layout, is original, individual work.