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.
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 logotype 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.
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 product category 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.
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 used the pale yellow from the Busy Bee color palette. I used Marvel App to develop the prototype interface.
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.
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.
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!