Mlo Smarta
B2B website selling sustainable and affordable livestock
MLO Smarta is an organization with a noble mission, dedicated to supporting farmers in Kenya by providing access to sustainable and affordable livestock solutions. Recently, MLO Smarta recognized the need to enhance their online presence, and they reached out to our skilled team for assistance in revamping their website. Together, we look forward to making a positive impact on the agricultural landscape and the lives of the hardworking farmers they serve.
The Problem
As a newcomer to the industry, MLO Smarta initially operated with a basic website. Understanding the need for growth and development, the client expressed their desire to enhance the overall user experience, boost functionality, and establish a distinct brand identity for their web presence. This comprehensive transformation involved the incorporation of essential features, including e-commerce pages, to provide a more robust and engaging platform.
The Solution
Our team collaborated to discuss key needs of MLO Smarta and implemented them. These were:
-
Redesign landing page and improve functionality
-
Update the product page with more detailed information
-
Create a checkout process
-
Design a way to track orders
-
Create a brand identity
Our team then created wireframes to fit these needs and address the client’s overall vision for his site and devised a style guide that had the ability to grow with his company.
Process
Ideation, Design, Wireframe, UI Iterations, Developer Handoff
Timing
7 Weeks
Role
UX/UI Designer
Tools
Figma, Figjam, Zoom, Slack
Discovery
To begin our discovery we coordinated with the client in a zoom kick off call so that the team could introduce themselves and go over any pertinent information with the client. Included in this information were the client’s vision and goals for his website redesign as well as the user flows, he deemed vital for his website. The client envisioned a simple and clean layout with nature tones in mind and with the goal of streamlining the checkout process and ordering process. The client wanted an ecommerce website to show and sell his products.
User Flows
These were the five user flows that were chosen as the most important routes needed to navigate the website.
-
As a user, I want to place an online order.
-
As a user, I want to keep track of my online orders.
-
As a user, I want to find support on the site.
-
As a user, I want to be able to submit a ticket about an issue on my order or account.
-
As a user, I want to keep track of my spending base on all my past purchases.
Medium Fi Wireframes
Following the sketches and style guide I used figma to translate my sketches into medium fidelity wireframes. Since the team split the user flows we were able to work on our own and then collaborate to choose the best elements and create a cohesive design.
Style Guide
We created a style guide to address everything from colors to fonts. Included is the grid for the website as well as sizing for all necessary components.
UI Iterations
The team split into groups of two and three to create three different UI iterations to present to the client. Each iteration was to address a different need or feel to the client. I assisted in designing home page three with two other team members. We wanted to show something completely different for the client to consider that was a bit more colorful. In the end the client loved all three designs and requested different elements from each one, so we combined them for the final high-fidelity wireframe.
"This is beautiful stuff! Beautiful I say!"
Client Name
Hi-Fi Wireframes
The team continued working on their original screens for the high-fidelity wireframes. I designed three screens: the order details page, the orders page, and the tracking page. I ended up collaborating with another teammate as she had an order dashboard page and we wanted to keep the order pages cohesive. Using the style guide and constant communication we were able to efficiently create our wireframes and maintain a cohesive design.
Developer Handoff
As the project was wrapping up, we made sure our designs were ready for developers. We worked on our same screens and together to ensure everything in the final handoff was accounted for. I prepared annotations for the order pages along with another team member and we made sure that all elements were meticulously tagged with pixel measurements.