Acme Made

At Home With Design: Acme Made & San Francisco

My job at JOBY connects me to Acme Made, a sister brand. There are three brands connected to my company, and it is common that I do work across all three.

One of the most picturesque cities in the world, San Francisco is packed with inspiration. AcmeMade has flourished in this 7 by 7 square mile span of innovation and culture since 2002. Understanding the city, the distinct look of its people, and the activities they enjoy, is how AcmeMade creates products that protect your devices while complementing your personality. From photographing sunsets at the beach or reading on the pier, to working in the park or racing in a morning commute - inspiration is available at every turn.

Vibrant thoroughfares and neighborhoods such as Noe Valley, Fillmore Street, Montgomery Street, Oak Street, and Bay Street inspire the Acme Made design group to create products that reflect a love of technology and style.

The Acme Made Skinny Sleeve

The Acme Made Skinny Sleeve

In approaching the Acme Made redesign, I wanted to showcase the brand's style through the eyes of the target consumer as well as that of the designer. I had the benefit of sitting next to the brand’s primary designer while I was an intern, so I had a decent familiarity with the brand’s core. In this case, the designer had the flexibility to build the brand around his vision of what a stylish tablet sleeve or camera backpack should look like; minimalist, clean, and simple. As this extension of his decisions, Acme Made showed that a camera bag wasn't solely about the gear but about fashion and the creativity of the person wearing it.

I met with the brand managers and product designers to gather a sense of the intention of the brand. The lead designer provided a mood board consisting of beautiful homes that represented his vision of the customer. We had conversations about the products, how they had been represented the past, and how lacking the existing e-commerce site was at telling the product's design story.

The Acme Made Skinny Book for iPad Mini

The Acme Made Skinny Book for iPad Mini

Let's make something new.

With an idea of what the brand looked like, it was now time to formulate a structure for a completely redesigned website.
In e-commerce, there are many existing conventions that a user has come to expect when doing some online shopping. Add too much pollution to this process, and the shopping experience is impaired.

Late-stage Acme Made sketches.

Late-stage Acme Made sketches.

The first logical step in designing the site was to develop some sort of hierarchy for the brand's products, both present and future. I worked with the brand lead to define a simple category system that helped to draw focus to the products offered. The existing system had become fragmented, and this was an opportunity for us to work together to clarify the portfolio.

In defining the product selling points, it was concluded that clean product photography was the best carrier of the product message for our use case. Product lifestyle had been a difficult resource for the company at the time, so focus on studio photography was preferred. The emphasis of studio photography also worked well into the constraints of the chosen product CMS. Given that the pages for each product would be automatically generated, the room for customization around images was eliminated.

Design

With the information architecture mostly defined, it was time to move onto some wireframes and mockups. The design sprint was super quick at just over a week from the time of wireframing to code. The wireframing process allowed me to quickly work through many layouts and figure out the proper organization for the page. Discussions with the team were frequent througout this stage as we built out the pages in our head.

From the wireframes, some quick experimenting with visual styles led into full-scale mockups.

Once the rough idea was figured out, I took to Fireworks (RIP!) to begin mocking up the website. Typically at this point I'd move straight into code, but with the scale of this project, it was important to get the sign-off of the CMO, Creative Director, and Brand Manager before diving into the Magento themeing process.

iPad mockup showing the selected design in tablet use and at a mobile breakpoint.

iPad mockup showing the selected design in tablet use and at a mobile breakpoint.

Development

Coding on the Magento e-commerce platform was a unique learning curve. A fresh install of Magento has over 24,000 separate template, logic, and routing files; all working together to generate an extremely complex and capable website.

I spent about four weeks building the site theme. The process included a lot of testing across different product types and responsive breakpoints. Using SCSS as a preprocessor helped keep things organized for such a large-scale project.