About ARK Africa

ARK is a design firm based in Nairobi, Kenya, with expertise in Creative, Strategy, Design, Brand, Web & Innovation. They partner with organisations to build better products, design memorable experiences, and create meaningful & lasting connections.

* Disclaimer: This project has been revamped.




My Role
UX Designer
Timeframe
7 months
Link
Visit Old ARK
Collaborators
Olivia, Brand Strategist
Mwangi, Photographer
Juliet, Developer
Ashi, Designer
Fady, CEO
Key Skills
User Interview
Sketching
Screen Flows
Visual Design
Interaction Design
Platforms
Desktop Web
Mobile Web

Sneak peek

ARK sneak peek



The Problem

After years of building brands and websites for businesses, they asked themselves what would happen if they didn’t have an excellent website. The answer led them to tearing down their existing site and doing something else instead. Then the CEO dropped me an email:

“Coolest project in the world coming up…”

Which reminded me of a quote from Huge Inc,

"The most successful sites consistently, incrementally evolve to best meet the company and the user’s needs — they don’t do infrequent overhauls."




The Process

UX Audit

Old Website
Old Website

Our biggest questions which were mostly addressed by Google TestMy Site and conducting Heuristics Evaluation (Jakob Nielsen's 10 general principles for interaction design) were:

  • Are the site pages loading in less than three seconds on the average internet connection?
  • Does the site use minimal (or no) obnoxious lead capture methods like “eye-blasters?”
  • Does the site use responsive design, so it can be viewed easily on mobile devices?
  • Does the site have simple, easy-to-use navigation menus and on-page “breadcrumbs”?
  • Does the site use videos in a low-touch way – e.g. embedded without auto-play?
  • Are we using lossless compression to ensure that large graphics load more readily?
Old Website Pages

Personas

Personas

Based on the interviews/workshop we set up 5 personas. We referred to them throughout the entire product development process. The things that stood out were the personas and we were looking into:

  • Expansion into new markets
  • Brand expertise
  • Growth of their business
  • Local partnerships
  • Inspiration and cool projects

Benchmarking

Benchmarking

We benchmarked against the best in the world. As part of benchmarking, I was assigned to look into Typography Hierarchy which meant considering the scanning patterns such as “F” and “Z”-shaped by Nielsen Norman Group and the Modular Type Scale.




Exploring the solution

Wireframing

Wireframing

We created a sitemap which influenced the Site Page Layout, then Site Content Types which in the end we did high level wireframes. I implemented Mobile-First strategy because the world is full of micro-moments and we looked at mobile patterns, signals and clues to maintain a competitive edge.

Wireframes Pages

User Interface Design

New Website

One of the core things from our personas is they use a screen with an incredibly high pixel density which led to the Design, UX and Dev team to develop a Design Grid because retina actually matters. We implemented white space to emphasize particular elements which require deep attention from our personas by creating visual hierarchy.

New Website



Results

After the site relaunched, our fear was users were going to have a hard time as they relearn how to use a site. But guess what? We reduced cognitive burden on users as they learn how to accomplish their goals, an increase in key usability metrics such as the time it takes to learn how to use a site and the time it takes to complete a task, and a decrease in users’ frustration and anxiety which translated to more client leads and conversions of speculative work to actual projects.




Learnings

It was indeed the Coolest project in the world...

I learned so much UX when I worked on this project. I really became passionate about always having a why for every single decision I decide to make especially based on research, tests done and facts.




Other work with ARK

Till transaction detail
Till transaction detail