PayCrave Design Project

Project: Lil Bubba’s Bows

Lil Bubba’s Bows was a company my wife co-founded. They sold handmade bows to local retail stores. Although, they never fully planned to ramp the business up (it was more for fun) I thought it would be fun to design her an e-commerce shop. While the store was never intended to launch, I still learned during the process.

"little-bubbas-bows-hero"

Wireframes


I started the process with wireframes using Balsamiq. The first step was to create a site map. I kept it simple, giving the site a one level of categorization (simple product line), an about page, a contact page, a shopping cart and a checkout page.

"little-bubbas-sitemap"

Next, I created a wireframe for the home page. I wanted to provide as much rich content as possible, and at the same time, make it easy for users to shop on the site, which is why I made the decision to add a rotating slider at the top of the page. This would allow Lil Bubba’s to show different products and promotions, without taking up valuable page real estate.

"little-bubbas-home-wireframe"

After the home page, I create wireframes for two versions of a product listing page. One utilized a left hand navigation, while the other utilized a top product navigation. After running a few user tests, I decided to use only the top navigation structure on the site. The reason behind this decision was because Lil Bubba’s product line was very simple (three categories) so I felt that the space taken up by the left navigation wasn’t put to good use. Instead of putting the product filter in the left nav, I moved it above the product thumbnails.

Left nav:

"lil-bubbas-left-nav-wireframe"

Top nav:

"lil-bubbas-top-nav-wireframe"

I also created a wireframe for the mobile version of the product listing page featuring a slide out navigation menu:

"lil-bubbas-mobile"

Font Selection


I wanted something playful yet elegant for Little Bubba’s Bows header font so I decided to choose a script. As the target customer of Little Bubba’s Bows was mostly moms and grandmas, I wanted to show a feminine side to the site. I ended up choosing dancing script for the category selectors only. Too much script can cause readability issues. For the body of the site, I chose something a little more playful (Alegreya Sans), as I thought that the playfulness of the font matched the products that Lil Bubba’s Bows make. Both are available on Google Fonts for free.

Mockups


Once I had the fonts selected, it was time to start creating mockups in Sketch. If you’d like to see a working prototype use the button below:

Or, you can see the collection of the Lil Bubba’s Mock ups below:

"lil-bubbas-mockup-home"

Product listing:

"lil-bubbas-mockup-productlisting"

Product detail:

"lil-bubbas-mockup-productdetail"

Shopping cart:

"lil-bubbas-mockup-cart"

Checkout/Sign up:

"lil-bubbas-mockup-checkout"

Checkout/Shipping/Billing/Payment Info:

"lil-bubbas-mockup-checkout2"