I developed Bibi Blu's brand and did all of the UX/UI design work. I created the logo using Illustrator and Sketch. I designed the site using a range of tools including paper and pen, white boarding, Balsamiq, Invision, Illustrator and Sketch to create personas, user flows, logos, layouts, sitemaps, low- and high-fidelity wireframes and prototypes. I am also the founder of Bibi Blu.
About the project
Bibi Blu is a new e-commerce site born from a love of travel and storytelling, the hope to preserve indigenous textile designs, and the determination to provide sustainable economic opportunities for women with little or no access to the global market. I chose to brand and design Bibi Blu’s website as part of my design apprenticeship at Bloc.
I created Bibi Blu to allow shoppers the opportunity to make a positive impact on women's lives through a different vehicle from the traditional handout. The company combines technology, creativity and innovation while maintaining a respect for the culture and tradition of their artisanal partners.
My goal was to create a delightful and easy shopping experience by bringing attention to the site through creating a sense of trust, style and fluidity that showcases the products and the stories behind them. The hope is to make a connection with the user and make them loyal customers.
The web is full of small businesses with a social mission. One of the main challenges with Bibi Blu was how to set itself apart from the rest by drawing users in to find out more about the products and mission, creating a friendly and easy-to-use shopping experience, and turning them into repeat customers. In order to design a unique and user-friendly e-commerce site, I conducted a thorough competitive analysis including SWOT.
Through this analysis, I was able to compare competitors' features and discover what they are doing right and wrong, how they position themselves, who their target market is, what are their key features and problems, and where there were opportunities for Bibi Blu. I also researched their layouts and shopping/checkout processes.
As a start-up company, Bibi Blu is only in the early stages of product and partner identification. Therefore, we used placeholder images for the current minimum viable product (MVP). The current design allows for growth and expansion of products and features.
I conducted user surveys and interviews and created personas based on these results to better understand Bibi Blu’s audience and target market.
My initial research determined that my target audience are women who identify with a stylish, bohemian-chic lifestyle and seek to make personal connections with the products and the artisans. They prefer to take time to shop at unique small businesses (online and in person) to find one-of-a-kind pieces rather than shopping at larger department stores or online stores. The majority of shoppers are interested in the world and the global community, women’s empowerment, travel and design. Businesses with a social mission appeal to them but it is important that the products they purchase are of high quality.
I created several iterations of user flows through paper and pen sketches and Draw.io. Here is a copy of a user flow:
Users will be able to:
Browse by category
Select a product to view more details
Learn more about the products, the artisans, social impact, and techniques used to make products
Choose items to add to basket
Sign up for the newsletter and receive a discount
Mark items as gifts
Add discount codes
Pay and checkout
I used paper and pen to sketch several versions of low-fidelity wireframes. I wanted to make sure the steps a user needed to take from the home page to checkout were streamlined and simple. Creating a checkout process that was straightforward and user-friendly was a focus of this design.
I used Sketch for the high-fidelity wireframes. It was during this process when I was able to add the color and typography and focus more on the visual design. I tested different iterations of the checkout process by conducting a series of usability tests including guerilla testing and quantatative and qualitative testing. Watching and listening to users use the product allowed me to improve and refine the design. Users wanted more information on each product. Their input helped me design a better product detail page. Users felt that adding a product to the basket and purchasing it was straightforward and simple to use.
I used Invision to create a clickable protoype for the Bibi Blu website. I conducted additional usability studies using this prototype using guerilla testing and Peek user tests. There are a lot of features that still need to be added to the minimum viable product, such as a browse-by-category feature and artisan detail page. These are all features that will be added to the design at a later stage.