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.
Web Designer & Developer
Kuli Kuli was in process of switching their ecommerce 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 best practices for checkouts was completed and incorporated into the design of the checkout pages.
Creating a flowchart of the checkout process allowed a high level view of the user experience and the pages to be impacted.
Based on the research completed on checkout best practices, the following were considered and incorporated into the design.
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.
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.
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.