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.
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.
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.
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.
I also created a wireframe for the mobile version of the product listing page featuring a slide out navigation menu:
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.
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: