Project : Akai

Akai powered by African Unicorn (a Software and Business Development company).

Tools

Papers, Miro, Milanote, Moqups, Figma, Adobe Illustrator, Jira, Confluence, Microsoft Teams


Project Summary

We were to create a service that provides a dependable, flexible and delightful delivery solution for SME’s and individuals that are into buying and selling products.
The aim was to build a more intuitive and smarter system to significantly reduce handling times and the propensity of human error to facilitate a better experience for customers and users.

Akai Mockup

Roles

User Interface & User Experience(Product User Interface & User Experience(Interaction, Visual design, Prototyping & Testing, Information Architecture)
I was brought on board as someone with significant delivery experience to shape the project and the Agile process


The Challenge

  • Due to lockdown measures, the Agile team was forced to work remotely and since some of the team members were first time remote workers, there was a lot of miscommunication within the team at first.
  • One login form was required, without confusing users since the platform had 4 different sides, (Start Ups’ side, Investors’ side, Partners’ side and Hubs’ side).
  • One of the main factors was not give too much access to unregistered users but at the same time, enough access to turn them into regular users.
  • A new Frontend developer was added to the team, subsequent to the early stages of the project, with no knowledge of the design system.
  • The logo took time because I had to create one from stretch and because each stakeholder, had their own concept for the logo.

Design Process

Design Process

Sitemap

Before jumping to the screens design, we needed to create a site map. It was used to provide information about the pages and other files on the platform, and the relationship between them.

Sitemap

Sketching

I started sketching to build a foundation of what my solution will look like. My sketches were focused on the following features:

  • Information Architecture.
  • How I was going to implement the advertising banner without overshadowing the content.
  • How the dashboard was going to look like with the vast information provided.
  • How to separate the classes for the 4 sides of the platforms to be created.
Sketches

Competitor analysis

It was crucial for us to understand the competitive landscape that we were stepping into. We had to research on similar platforms and our primary target was African StartUp platforms and we came across a few platforms that were very helpful to our research. We needed to understand our competitors and identify areas were we could distinguish ourselves.

How might we…

Create a compelling experience across the AKAI platform.
For Startups, Investors, Partners, Hubs.
To create a better experience and easy communication for Startups, Investors, Partners and Hubs.
And improve the overall user experience of AKAI and grow the Startups, Investors, Partners and Hubs’ community.

Sticky Notes

Data discovery

We decided to tackle data discovery using the Drill Down Method, which was to present the user a high level summary of content that they could then drill down to discover more detailed related data.

Wireframe
Wireframe

Developing the designs

I created my high fidelity prototype in Figma and then imported them into Figma to allow the engineers to inspect the file and export the HTML and CSS code.

I worked very closely with the Front End team to spec out any missing interactions that were not covered in the high fidelity prototype. I conducted a UX review of each front-end ticket that was implemented to ensure it was aligned with the designs before we launch.

Gif

Solution

  • I analyzed the current structure of the interface. I gathered usage and engagement data from the current experience. I collected many successful and unsuccessful examples of this experience from other platforms to perform a competitive analysis.
  • For the login problem, we decided to stick to the one sign in form, but with an option of people select the required side of the platform on a drop down and the backend team made sure people are directed to the right signed page. We also assigned every side to a specific color code to differentiate the interface of the sides.
  • Jira, Confluence, Microsoft Teams and Emails became our go to tools to help us progress faster during the lockdown.
  • We also did in-person and remote testing which helped to make sure we were solving actual problems for our customers. Whether it was a screen prototype, customer interview or a simple journey map, these weekly sessions helped us to validate, test ideas and iterate quickly.
  • With the help of the Project Manager and myself we had to sit down with the new frontend Developer and walk her through the Design system we had adopted for the project.
  • I tried to implement the all the concepts I had gotten from the stakeholders into the logo but I had to eliminate what I thought didn’t work, (for instance one of the stakeholders was keen on Mountain Peaks as part of the logo, but I had to address the issue that, the platform is meant for local market and basing from that only, we should consider that we do not have Mountain Peaks in Zimbabwe).