FreelanceWire - Africa Case Study

UI DESIGN | FRONTEND DEVELOPMENT

About FreelanceWire Africa

Freelance Wire is a place where freelancers, consultants and independent contractors can share their stories transparently and where freelancers can come to read and learn from those stories. Freelance Wire aims to be a community for freelancers in Africa

FreelanceWire was born out of my first venture Smartlancer. Smartlancer shut down, but our mission did not die, we set out to find other ways to achieve it, which led to FreelanceWire. We have always believed that by empowering African young people to explore borderless careers as freelancers, we will change a lot of lives.

Project Goals

To create an open platform where freelancers can share their authentic stories, and where other freelancers can come and read those stories.

The outcome

The result was a responsive, fast, and easy to use publishing platform. We made use of only one typeface and applied several hacks to make sure the website was as data light as possible and loaded extra fast.

TL;DR

  • Time: 3 Months
  • Team: 2
  • My Role: UI Design and Front-end Development
  • Check the live site at freelancewire.africa

UI Design

The design scope included; a home page, category page, author page, search, signup page, articles page and information pages. We also developed the brand guide which included colors, typography design, grids and a components style guide for common elements. We also implimented dark and light theming using the material design guidelines.

Tech stack

When designing FreelanceWire we had a lot of considerations to take into account. We wanted to make consuming content on our platform a pleasant experience that entices return usage. We also wanted to make freelancewire an open and free platform, which meant that we had to find the most affordable stack, without compromising on performance.

We ended up choosing to run the site as decoupled CMS - Front-end services. We used Contentful, as our CMS and Gatsbyjs as our Front-end. Gatsbyjs is a React based static site generator that rebuilds and deploys the site on every content or code changes. I integrated github and contentful web-hooks with netlify to create an automated CI/CD pipeline. Netlify comes with this functionallity out of the box which made it easy.

Challenges

For such a large project, it was a big challenge to develop as a solo developer. I made a point to avoid reinventing the wheel for any aspect of the project that could be developed using an open source tool or paid service. The result is that we developed a high performance complete media site in 3 months using only one developer from design to finish.