Busy Bee Grocery App Interface


To begin the process of this project, a logotype for Busy Bee Grocery was created. After this development, icons were produced using the same color scheme and elements. These icons were utilized in Marvel App to develop a prototype app interface for Busy Bee Grocery.



Initial Logotype Design

To begin the entire process of Busy Bee Grocery's App Interface, I designed a logo for the company. This is a logotype that uses the DIN Alternate font. I wanted to incoporate a bee, so I inserted an illustration in the middle of the "O." The color palette for the logtype consists of pale yellow and light blue. I used light blue instead of black because it isn't as harsh and I thought it was more representative of a grocery store color palette.

Busy Bee Grocery Logotype


Initial App Icon Designs

The next step in the Busy Bee Grocery App Interface process was to design icons that would be used within the app. I designed icons for each category that you could think of for a grocery store. Then, the icons were developed with the bee icon in mind to make sure all of the icons were consistent with the brand. I used a wide variety of vibrant colors for these initial icons. The labels were typed out using the DIN Alternate font that the logotype also utilizes.

initial Busy Bee Grocery App icon for phone home screen
initial Busy Bee Grocery icons used within the app interface


Initial App Interface

The initial Busy Bee Grocery App Interface was very simple. It utilized all of the icons I designed. All of the text in the app used the font DIN Alternate. The background utilized the pale yellow from the Busy Bee color palette. I used Marvel App to develop the prototype interface.

initial Busy Bee Grocery app icon on an iPhone home screen, opening app screen, and produce department app screen
From left to right: Busy Bee Grocery app icon on home screen, opening app screen, produce department app screen


Final Logotype

Busy Bee Grocery's logotype changed slightly from the initial design. Instead of the bee being yellow on top of the "O," I used the pathfinder tool to cut the bee shape out of the letter. This way, the logotype is now completely see through.

final logotype for Busy Bee Grocery


Final App Icon Designs

The final app icons for Busy Bee Grocery became a lot more simplified. Some of the details were removed and the color palette was reduced to four colors to make everything more cohesive.

final Busy Bee Grocery App icon for phone home screen
final Busy Bee Grocery icons used within the app interface


Final App Interface

The app interface screens changed significantly. On the home screen, the Busy Bee Grocery's app icon is now the logotype instead of the bee symbol. The opening app screen now has a vibrant photo in the background that contrasts with the black gradient. Lastly, the backgrounds of the screens no longer have a pale yellow background, but white, and there is now a menu across the bottom with some of the app icons. View my Busy Bee Grocery App Interface, and walk through the different screens to experience the functionality!

final Oswald Octopi baseball team uniform