Grae Speakers

UI / UX Project Brief

The ideal customer is a woman named Gretchen. Gretchen is in their early ‘40s and lives with their partner. They are a university graduate and work full-time. Gretchen loves music, lives in the suburbs, is familiar with technology, and is comfortable shopping online.

App UI Design

I’m in the process of designing a quick app for Grae Speakers. The app function is simple: after purchasing the bluetooth speakers the packaging and marketing meterial will instruct you to download the Grae Speakers app. After downloading and installing the app, the user is guided through simple bluetooth pairings. Users can name each speaker, test volume individually and once connected, control the master volume and equalizer settings.

Over the years, I’ve accumulated a system of principles that help me make informed design choices for every project I work on, such as:

• Using space to group related elements (padding is free!)
• Use consistent treatment of elements and functions
• Visual hierarchy of information and proximity
• Convey information as simply as possible
• Use colour purposefully
• Ensure proper text contrast ratios for accessibility
• Use a single typeface with appropriate font weights and proper line spacing
• Use proper alignment of text and content
• Avoid pure black on pure white

Starting with LoFi wireframes the app prototyping begins to take shape. The next step is prepping the HiFi version with graphics, colour, and text styles applied...

Logo Design

I tend to surround myself in small collections of things... design ephemera. Whether I’m taking photos of a cool hand-painted sign on the side of a historic building, or type hunting old products in antique markets, I’m constantly building my library of design inspiration. This comes in handy when designing logos.

Nowadays there are logo-generating websites offering thousands of poor-quality, over-used options. I prefer to draw from the old world way of doing things by using simple shapes. I believe ‘less is more’; it promotes clarity and timeless design.

Typically, I’ll scribble down some notes and sketch a few ideas on paper, but I end up jumping in to Illustrator very early in my process. There, I can start shaping out some initial designs and test them out with different typefaces and font weights. Eventually I come to a solution, but I don’t close the book until I see how the logo reacts within the rest of the creative components. At this point there are usually some final tweaks until I’m happy with the result.

Web Design

When I design a website I start designing for the smallest size first. The restricted space forces me to prioritize important elements and remove unnecessary ones. This approach helps ensure my interface is simpler at desktop sizes too.

Using Figma again, I tend to start with the wireframes, being mindful of screen size breakpoints and the responsive layout. I also work on a second page using high fidelity images, proper colours, and text sizes. This also allows me to see the newly created logo in its environment and start testing the navigation and UX.

In this case, I’m making sure the font sizes and colours closely match the app, seen above, for consistency.

Packaging Design

All packaging is created in Illustrator and mocked-up in Photoshop. Again, sticking with the design system for this brand, I’m using the same typeface and simple layout structure.

More to come shortly...