Nithio
Overview
Despite contributing less than 3% of global emissions, Africa is the least climate-resilient region.
With the use of this interactive tool; users can see how communities in Africa are more vulnerable to climate risk and how Nithio's investments are creating impact by providing energy access and building climate resilience.
My Role & Responsibilities
My Role
Senior Digital Product Designer
Tools
Figma; MapBox; Asana; Adobe Creative Suite; Zeplin
My Responsibilities
Lead and implemented design effort from concept to final production; From user flow to hi-fidelity wireframe to Mapbox; Collaborated with in-house developer; Presented to internal agency stakeholders and client stakeholders and implemented feedback; Created a component library and interchangeable style sheet allowing our agency to white-label the product to potentially reslick and reuse to sell to other client's.
Agency
Penta Group
Client
Nithio
Team
Project Manager; Developer, Content Strategist, Copy Writer
Timeline
1 Month
Globally, 75% of people without energy access are in Africa.
Nithio
The Ask
Nithio aims to showcase their existing investments in Nigeria and Kenya, while also underscoring the ongoing imperative for additional investment in renewable energy within these nations.
They are in search of a digital solution for their team to engage potential investors effectively, emphasizing the demand for increased investment in renewable energy in these countries. Additionally, they seek a tool that can be shared with current stakeholders and investors to highlight the immediate positive effects of their ongoing investments within these nations.
The Process
Discovery Phase
Market Research
Furnished the client with a comprehensive competitive analysis encompassing 3D interactive tools and 2D data visualizations, which highlighted sustainability, energy access, and climate resilience.
Design Research
We conducted a comprehensive client interview to thoroughly understand their requirements, challenges, and potential areas for improvement. Since the product was in its initial stage (1.0), it was crucial for our design team to have a deep understanding of the company's objectives and future expansion plans. This enabled us to establish a strong foundation for the product's growth in sync with the company's evolving goals.
Our ultimate goal was to avoid the need for a costly and disruptive full-scale redesign down the road, ensuring a smooth journey toward the client's objectives.
Describe Phase
Client Readout
Presented and pitched 3 rough digital product solutions to client that were scalable and were in alignment with current brief and future business goals.
Design Phase
Flow Creation
Co-defined flows with the client to prioritize and maximize our sprints.
UX Wireframing
Created improved designs based on user interviews and validated changes with the client.
Visual Design & Prototyping
Component library creation, full-page mock-ups, and prototypes of originally defined flows.
Usability Testing
Created a usability testing plan and imported prototypes into Maze (a usability testing tool). Conducted user tests using Slack. Identified areas of refinement for future sprints.
QA & Launch
Conducted thorough QA with developers identifying all bugs and code descrepancies for all breakpoints, screen sizes and browsers.
Meet the product
Data Meets Interaction
With the use of 3D geographic mapping tools like MapBox and climate change informed data sourcing; we were able to construct a data visualization product that was unique, infomative, and fun to use.
Desktop Experience
Why a globe?
Although Nithio's current business model was only focused on two countries within the African Continent (Nigeria and Kenya) and they didn't really have a 3D globe in mind when submitting their brief. The decision to use a globe versus just an outline of the 2 countries was intentional.
Apart from the compelling visual interest and wow factor of interacting with a 3D globe; which had the potential to elevate a boring data visualization tool to something people would want to use.
I mean just make a graph if you don't want to turn any heads.
The globe was chosen to actually facilitate the ability for Nithio to grow and plan for future business successes and expansion into other countries with very little rework to the initial product.
Adding a new country to invest in would be big news for Nithio's stakeholders. They would want to get the news out fast and this core design decision quickly changes that announcement from a simple-boring email with a graphic to a quick product update. Creating a living, breathing single- source-of-truth for all things renewable energy for Nithio's stakeholders.
Desktop Experience
Challenges
One of the challenges in designing this product was finding the balance between allowing the user the freedom to explore the tool while also identifying the necessary funnels needed to quickly navigate the users to the data.
The user can experience the globes rotation by pulling it and having a peak at the otherside; providing space for play. However, only for a few seconds before the globe quickly pulls you back to the focal point that is the African continent.
Click anywhere inside the continent and the globe will automatically zoom in on the country closest. No manual zooming necessary.
When the user selects a country or a takeover has occured and a country is now the focal point, the first data point is automatically engaged. This takeover in the flow is a form of conveyance; teaching them how to use the product and navigate through the rest of the layers of data in the navigation bar on the left.
Further more, when they are zoomed into a specific country a sub navigation bar appears allowing them to easily move back and forth between the countries being highlighted as they slick them with the multiple layers of data.
Mobile Experience
Map Navigation
Similar to the desktop experience it was imperative the mobile experience found a balance between exploration and data centered interaction. Due to the smallness of the screen and the challenges that would arise with trying to select these tiny Countries.
The user is no longer able to zoom into the globe, but rather use an updated navigation to view the countries individually with data automatically engaged.
Although still able to play with the globe, pushing and pulling it, all meaningful interaction has been funneled to the subnavigation.
Mobile Experience
The Data Screen
The users can move between the levels of data for each country with either the use of tapping the sub navigation or by simply swiping through the content.
If they want to navigate to Kenya, unlike the navigation functioning like a toggle as it does in the desktop verision. The user simply just uses the the view map button to navigate to the next country or even exit out of the map.
