GOAL/CHALLENGE: To add loyalty aspects for this fictitious brand application, review the current design and describe any visual, usability, and/or accessibility issues, errors or improvements in the current design.

BRAND IDENTITY DEVELOPMENT PROCESS

cc-moodboard.jpg

1. DISCOVERY & RESEARCH: With all aspects of the user-centered design process in mind, I started from user research through design implementation. I looked up similar competitors in the market to see how the brand could differentiate itself. I sourced visual inspiration online and off and started a mood board as a starting point.

Cupcakes are a treat to any age group and for any occasion. So I came up with 3 attributes that spoke to me of the brand - fun, memorable and delightful. For the fun aspect, I came up with patterns that I would use through out as a branding element. The colors of the rainbow, popsicles, skittles, post-it notes and camp tents all had a common thread - they create different moods and delight the viewers with their pop quality.

The fonts required a combination of simple yet stylish and easily identifiable type phase for which I chose a combination of Medula One and Fira Sans.

cc-sketches.jpg

2. EXPLORATIONS: To come up with an identity for Camp Cupcake, I started with a few sketches. I explored the word “camp”. The compass directions, the camp tents, camp-fire, the letter “C” , the style of frosting on a cupcake and the visual of the cupcake all evoked various elements that allowed me to create some unique concepts.

 

3. BLACK AND WHITE: I transferred my pencil sketches into black and white on the computer. The focus was on the evolution of the concept from its rudimentary stages. It forms the basis to check how the logo translates when printed. 

cc-options.jpg

4. COLOR: From the initial sketches and black and white designs, I developed a few full-fledged concepts. I finally chose the one above as it met the requirements of the three brand attributes.

VISUAL DESIGN FOR APP SCREEN PROCESS:

LOW FIDELITY SKETCHES: This includes a flow of the UI process with quick iterations of login, welcome, menu, cart, checkout and loyalty program screens.

low-fi-sketches.jpg
 

HIGH FIDELITY WIREFRAMES: I created a few skeletal wireframes focussing on all the screens where the loyalty program appears along with the process flow, look and feel of the app. The “About Loyalty Program” section on the profile screen shows the user can more information and the details of the loyalty program. The remaining sections where the loyalty program features are explored in the visual mock section.

VISUAL MOCKS OF APP SCREEN: Below are few full-fledged mocks of the visual look and feel of the brand where I focussed on the four scenarios listed below. The fun elements are sprinkled across the screen as a pattern. I used a combination of yellow and teal as a the primary colors across the app to bring about a sense of delight, for the call-to-action button and the navigational section of the app screen, I used a more stronger orange.

LOYALTY PROGRAM: The Loyalty Program is structured as 1 point per dollar spent. Users can redeem their points on purchases.

  1. The customer's current loyalty points are displayed: One can view their points earned and reward balance through the ‘rewards icon’ situated on the bottom navigation section of the Welcome Screen. This action takes the user to a new screen that displays how many points they have earned and what rewards they could receive after earning a set amount of points.

  2. The amount of points the user is to receive from a purchase (before it is placed): Once the user has chosen the cupcakes that is to be ordered; they are directed to the Checkout Screen which summarizes the transaction details that the user is about to confirm. In this case, it’s the user’s first time to the site and has not earned any points. So it shows the points as ‘0’. If its an existing user, then the points would be displayed based on their history of transactions and past purchases with rewards available to apply accordingly.

  3. The amount of points they can put towards a purchase: In case the user has existing points earned, there would be a prompt message (not shown here) before the transaction is made on the Completed Screen, asking if the user wants to apply his points towards the new purchase made.

  4. Point changes are displayed: On the transaction completed screen, the user can see how many points they have earned on their current purchase. The rewards section has a message that displays the points earned for the user to apply towards their next purchase.

BEFORE: The app screens of the old visuals with no Loyalty program introduced.

Old-CC-Screens.jpg

AFTER: Areas of improvement: Brand Identity design, App Screen stylistic treatment through better visuals, brand patterns, bright colors and fun look and feel keeping color accessibility issues in mind.

cc-visual-mocks.jpg
 

A few more brand identity related work