Kuli Kuli
Kuli Kuli is a food and social enterprise startup creating an international market for moringa to improve the health and livelihoods of women in West Africa. Kuli Kuli sells nutrition bars in the US made with moringa sustainably sourced from women's cooperatives in West Africa.
Role
Web Designer & Developer
Work
Website - Checkout Redesign and Implementation
Website - Store Locator Design and Look & Feel Implementation
Corporate Powerpoint - Internal Usage
Work
Website - Checkout Redesign and Implementation
Website - Store Locator Design and Look & Feel Implementation
Corporate Powerpoint - Internal Usage
E-Commerce Redesign
Kuli Kuli was in process of switching their e-commerce solution to Spree Commerce, an open source solution for Ruby on Rails. The out-of-box solution required a redesign to maintain a consistent branding with the main website.
Research on Checkout Best Practices
Research on best practices for checkouts was completed and incorporated into the design of the checkout pages.
Understanding the User Flow
Creating a flowchart of the checkout process allowed a high level view of the user experience and the pages to be impacted.
Creation of Mockups for Redesign
Based on the research completed on checkout best practices, the following were considered and incorporated into the design.
Simplified header and footer - Excessive links were eliminated from the checkout process pages to minimize distractions.
Minimize exiting from checkout - Consideration was given to ensure that the customer was not given distractions to exit the checkout process.
Progress Indicator - Progress indicator guides the user and sets expectations of where the user is in the process.
Registration Optional - Consideration given to have registration optional to ensure minimal barriers to completing the checkout process.
Consistent Look and Feel - All text, forms, and error messages were designed to match and/or complement the look and feel established on the main website.
Review using Invision Prototype
Invision, a design prototyping tool, was used to create an interactive prototype complete with click throughs and allowed for easy feedback and review with the team.
Implementation within Rails Framework
Upon entry to the project, the Spree Commerce platform was already integrated in the Rails framework. However, the pages required an overhaul to meet the new design requirements.
Implementation of the changes was complete by diving into the code base. View customizations were complete using deface (a standalone Rails library) to customize the templates. Changes to the look and feel were done using LESS, a CSS pre-processor.
Implemented Views with Responsiveness
Responsive design was implemented to ensure the best shopping experience based on the user's screensize. A grid based framework was leveraged to create a responsiveness view adjusting to different screen sizes.
For tablet view, the Order Summary vertical line was removed to maximize use of space.
For mobile view, the Order Summary sidebar was hidden to minimize the information shown. Buttons and forms were responsive to fill the complete width of the mobile screen.
