BB.jpg

blistabloc

blistabloc tape

Category:
UX/UI & branding

Role:
UX/UI Designer at Northeastern University’s Scout Studio

Duration of Project:
Spring ‘18 semester (3-4 months) (worked in Agile/Scrum)

Wow wowow.. words cannot express how much love and pride I have for this project! Along with 2 other designers and a developer, we created the branding, marketing and ecommerce website for blistabloc.

Our POWER GIRL TEAM!!! With our final branding booklet and prototype.
From left to right: Brittany (developer), Sarah (graphic designer/illustrator), Olivia (project lead & UI/UX designer), me (UX/UI Designer)

Katherine Connors and Jacqueline Quill were two Northeastern graduate students that came to Scout as clients. They wanted to launch a blister-preventive tape into the market but needed to create their brand. They came to us with just a roll of this transparent tape and their market research. Our team’s job was to collaborate with them in order to create a well-rounded dynamic brand, packaging, and website in a semester’s time.

The question was, how do we illustrate an engaging brand image for a simple piece of transparent tape?

Jump to:

i. Brand Process and Development

ii. Website Overview

iii. eCommerce Platform UX/UI

iv. Mobile screens

v. Final Product!


i. Brand Process & Development

For most of us, it was the first time we ever worked on developing a brand, so we spent quite a few weeks brainstorming, iterating designs, and giving feedback.

Brainstorm

One of the first things we did was create different types of moodboards to portray a certain brand feel. I thought of blistabloc as “healing,” so my board was more soft and light. Sarah’s compiled examples of bolder colors and big fonts.

 my moodboard

my moodboard

 Examining moodboards at client meeting.

Examining moodboards at client meeting.

 

Initial Packaging Designs

Sarah put together several packaging design directions we could go with. We wanted to illustrate something that felt fun and approachable. We found that the thin, wavy lines felt flow-y and carefree- much like dancing.

 
Screen Shot 2018-10-30 at 1.22.17 PM.png
Screen Shot 2018-10-30 at 1.23.39 PM.png
Screen Shot 2018-10-30 at 1.24.52 PM.png
Screen Shot 2018-10-30 at 1.24.02 PM.png
 

Initial Website Designs

While Sarah was pushing brand designs on packaging, I was mocking up potential homepage layout and designs.

I started with drawing some rough layouts- since our clients weren’t sure about the content, I used my best judgement to decide where images and text could be placed.

Then, going off of the colors Sarah was trying for packaging, I began to incorporate some similar designs in my mockups. Working with Olivia, I ended up pushing towards the flow-y lines:

Pushing the lines some more…

Olivia and I worked closely on the homepage design after I mocked up the first several iterations. Below are the mockups for our homepage when it finally started coming together!

 
Screen Shot 2018-11-01 at 2.56.25 PM.png

ii. Website Overview

Our homepage was finally done! You can check out the live site here! (and buy some blistabloc while you’re at it ;) )

We wanted the brand to be fun, bold, and engaging since the actual product is so plain. We opted for a large, bold header and a big CTA button to prompt customers to go to the buy page. The big green dotted line imitates “foot tracks” and is complimented by a thin white line to balance it out.

We didn’t want to overwhelm the page with so many lines so we kept it simple with a few here and there- just to get that idea of fun and flow-y. We wanted the customers to be educated as they scrolled down, so the top header was a general description, then we explained what it really was under “Smart Tech,” then came instructions on “how it works,” “testimonials,” and finally and final CTA to buy the product.

Some challenges:

  • Applying the brand to the web visually, while making sure it was still informative and intuitive to use. There were many trials and errors, and hours spent making tweaks and changing things around. Olivia and I worked together to deliver a clean, coherent homepage that illustrated this fun and bold brand image.

  • Managing my time, especially working in agile/scrum. With deliverables due every week, I had to prioritize which parts of the website I needed to do first.

  • Layout of information. The content on the page plays a huge role in the customer experience. I needed to make sure the content was concise, and had to figure out ways to make the information interactive to engage the customers. The way the content was organized was important too. We wanted it to be an educational experience.



Final Homepage!

Details

We added in little details here and there to make sure our website was as engaging as possible. Sarah created the animations Olivia and I wanted to include under the sections. I created a playful, purple cursor that moves the drawings on hover!

 

Applying Brand to Other Pages

A ton of different designs were done for these- I focused mainly on the “why blistabloc?” page while Olivia took over “our story.” We came together at the end to critique and make final changes. We wanted the secondary pages to be less bold than the homepage. We focused on a utilizing the lines to separate the information, and made sure that the content was easy to understand.

 

Final “why blistabloc?” page

Final “our story” page

Purchase Confirmation and Error Pages

Can’t forget about these! We had a lot of fun with these pages because it gave us a ton of freedom with the lines.

 

iii. eCommerce Platform UX/UI

A huge reason this client was special was because not only were we creating their marketing website, but we were also creating and incorporating an eCommerce platform for them. Scout had never done something like this before, so we were all excited for the challenge.

Then I created some wireframe mock-ups, making sure to include error states.

I lead the eCommerce part of our project, starting with some sketches of possible experiences:

 Envisioning “slide-out” payment options for #1.

Envisioning “slide-out” payment options for #1.

ecomm wireframe mockups.png

Initial Designs

ecomVs.png

Final eCommerce Page!

After critiquing and editing, I decided to keep the top background white so it wouldn’t distract from the pictures. I wanted to still add in some color so we used the lines to do so- making sure not to use too many different colors. I also added in a reviews section that went through a few rounds of edits.

Sarah made a prototype packaging out of her packaging designs and took mock pictures for the initial build-out of the platform. Our creative developer, Brittany, did an amazing job building out the whole platform using Timber and Woocommerce!


iv. Mobile Screens

And of course, with any good website, it needs to be responsive.
I translated each page into it’s mobile version:

Main pages

Nav state, FAQ, Purchase confirmation, and Error state


v. Final Product!!!

Katherine and Jacqueline finally launched blistabloc on August 29th, 2018! Since then, they have sold over 2,000 units and are continuing to sell more! Here are some shots of the final product that they sent to us when it got launched:

IMG_2804.jpg
IMG_2807.jpg
IMG_2806.jpg