A UX, Web and Graphic Design Case Study

Initial Consultation and Competitve Research

Together with the client, I looked at what the needs for this project would entail. Her business was brand new when we began the project together, so there was a fair amount of work to be done; we discussed the direction of the branding and logo design, identified competitors, and her needs and wants for the eCommerce page. 

Looking at her competitors, we started thinking about ideas on how she could stand out. Many of them had fairly simple websites; all or mostly white with the logo in the center of the header. Classic, but kind of boring. Others had a lot going on visually, colours and photos galore. We decided that we needed to strike a balance; a clean layout, but with colour and personality
 

Logo & Branding

The name of the brand, My Crazy Little B, came from a nickname of the client's daughter. While it initially didn't have much to do with flying insects, the concept of making the logo a bee fit it's namesake quite well; social, whimsical and carefree, and always busy as a bee. The client is also half Japanese, and she wanted to logo to take inspiriation from adorable brand mascots like Hello Kitty and Pikachu. I was on the right track with my first version of the logo (below, far left), but the yellow felt too...normal. It didn't have enough of the unique character of the brand, so I presented several alternate colour options to the client. 

The client had also included the idea of neon signs on a moodboard she had presented me, so I tried to include that in the wordmark. A hot pink bee logo also seemed to fit the idea quite well. 

Wireframes

For the site itself, I started out with wireframes to get the general layout of the main pages (homepage, collection page, product page, contact form and policy page for both desktop and mobile breakpoints. While these wireframes were fairly standard eCommerce designs, it was helpful in visualizing spacing, colour, type and icon placement. 

High-Fidelity Comps and Qualitative Research

Happy with the direction the wireframes were taking to that point, I began adding high-fidelity elements to the design to bring them to life. This included typography, colour, and graphic assets such as backgrounds. With some of these elements in place, I iterated upon some elements of the design, particularly the navigation and search bar on the mobile version of the website and the colour scheme: 

I solicited feedback from potential customers, as well as some fellow designers, on the progress of my designs; The takeaways from that feedback included: 

• Users felt that the pink version was TOO pink, with some of the users expressing a concern about supporting gender branding stereotypes (pink for girls, blue for boys)
  
  
• Users also preferred the version with the search bar omitted on the mobile version. One person pointed out that given the limited selection of product categories on display, as well as to encourage "browsability" of the various styles, it may be worth omitting search completely
  
  
• Many found the beehive/shopping basket icon confusing, with more than one referring to it as "the ice cream cone". 

While the client agreed with the notion of the pink background and colour scheme being a bit too much, she still really loved the logo and wordmark as they were, pink and all. So with that feedback from both the client and users in hand, I went back to the drawing board to improve my designs.

Design Iterations

Taking the feedback I recieved into mind, I started iterating upon the designs. With a pink theme out, I wanted to keep focus on the cute and quirky ideal that the client had in mind. I removed the solid colour for the header, and reworked the background to be a subtle rainbow gradient. I also made adjustments to the shopping basket icon in an attempt to have it read somewhat more as a beehive and less like an ice cream cone

Implementation and Further Iteration

For the eCommerce site itself, we decided to leverage Shopify's theme system; it would be easy for the client to update her inventory when she added new pieces to her collection, and it would help me practice my CSS and HTML skills in the process. 

As I started to work on implementing the designs, some big changes happened right away. Firstly, we removed the hero images at the top and middle of the main page, the client and I agreeing it was better to focus on the products, at least for the time being. Taking advantage of space this left, I increased the size of the logo, and also moved the navigation items under the logo, rather than beside. I also added a semi-transparent background to the footer to help better differenciate it from the main content of the page.

To emphasize the products themselves, as well as the currently selection, I changed the outlines of the products to be white while de-selected, and the original blue when the user rolls over the product with their mouse. On the product pages themselves, I added a "You May Also Like" section to the bottom of the page to encourge more browsing. I also used HTML to organize product details into collapsable sections so customers wouldn't be bombarded with a wall of text on every product page they view. I was also able to easily add the custom logos for the shopping basket I had created, as well as for the client's social media links using the theme code editor, which was probably the easiest part of all the coding I did. 

I took the opportunity to start running the implemented design by some users; some feedback that I received: 

• Some users felt that the shopping basket looked a little too much like a "hamburger" menu. Whether or not that's better than looking like ice cream is open for debate. 
  
  
• The "Neon Sign" effect on the wordmark was difficult for some users to read. 
  

So we needed a few more minor changes, but overall it felt like I was on the right track! 

Iterating on the Logo/Wordmark and Icons

I made some slight variations to the logo/wordmark, removing the pink drop shadow and darkening the colour of the text. I also adjusted the size of the bee to meet the font size better

Before

After

As mentioned previously, users I tested the designs with in previous iterations read the original shopping basket logo as an ice cream cone, and thought the first revised logo too closely resembled a navigation menu. On my third go, I tried to keep the shape of the second version, while still reading as both a bee hive and a shopping basket 

Version 1

Version 2

Version 3

Finished Product

While no project is ever really finished, there comes a time as a designer that you need to step away. Both the client and I were happy with the shape that the website was in, and decided to go live with it. You can check out the website, and all of My Crazy Little B's adorable hats and headbands, by clicking the image below. 

Final Thoughts

While it had it's difficulties, I really enjoyed working on this project. It gave me the opportunity to combine my background as an illustrator and cartoonist with my education as a UX Designer and flex my creative muscles, while also gleaning some new knowledge in HTML and CSS, as well as taking a look under the hood of Shopify themes. I'm also really looking forward to working with this client again, and watching her business grow and thrive!