How We Designed The Company Website

Introducing Amplified Payments 🙌🏼

Amplified Payments mockup design

About The Company

At Amplified Payments, we have a vision of becoming the leading enabler for digital financial services and driving financial inclusion across the continent. This guides everything we do and build.

Our first product Amplifypay, is a payment gateway that helps some of the leading Nigerian businesses to easily accept and manage recurring payments online.

With our plan to facilitate 25% of all digital transactions by 2023, we recently launched a new solution called mTransfers.

mTransfers facilitates institutions like banks, telcos, mobile money operators and other providers to leverage all social and messaging platforms to offer financial services.

We deem it necessary to have a dedicated website for the company in addition to the product specific ones.

We believe this will make it easier for stakeholders to understand our company better. As I am accustomed to do, I decided to document my process while working on this project. Enjoy!


Step 1: Research

I paid attention to the questions raised by our target audience (via emails and at physical gatherings). This gave me an idea of the information they want to know and what they need to know.

I was able to curate a list of the following questions -

What they want to know
“Who are you guys?”
“What exactly do you do?”
“What is Amplify Pay and how does it work?”
“Which one is mTransfers again oo?”
“Who are your partners?”
“mTransfers sounds interesting. How does it work?”

. . . and a lot of inquisitive and interesting questions.

Step 2: Ideas, Goals and Sketches

Based on our users’ curiosity, I carried out a research on how I want the website to look by exploring a lot of options on Pinterest and some live fintech websites. In order to accurately (or closely) arrive at a unique design for the company, I had to identify specific reasons why we need a company website & understand how our target audience use the internet.

Some Business Goals

The following are some of the reasons for the website:

Primary goal:

  • Showcase all solutions powered by the company to attract interesting partners and enthusiasts.

Other goals:

  • Expand client base for the company (Amplified Payments) and her solutions (mTransfers and Amplifypay).
  • To attract interesting & creative people to work-with in order to grow the company locally and internationally.

User Goals

Based on the goals listed above, a user can:

  • learn about the company and/or
  • use the CTA button, which is to “Say hello 🙂” to us.
✍️ Who are our likely unique visitors? ✍️

Personas

  • Bank executives and employees (regardless of the region in the world)
  • Telcos executives
  • Mobile money operators
  • Fintech entrepreneurs
  • Online merchants
  • Enthusiasts

. . . and other fintech players.

✍️ What do they have in common? ✍️

They want to know all about the company within limited time

They want to learn key things about the company before reaching out to us. They also have limited time and do not intend to get lost when they are on the website.

User Journey

Based on the business and user goals, I sketched out the user journey and flow of a one page website. This gave me an idea of an idle action I want our unique visitors to perform when they are on the website.

“Contact us” is fixed on all the pages to encourage visitors reach out for partnership, more creative ideas and ways for us to grow as a company.

Pages on the website

User Flow

A typical unique visitor finds their way to the website by any (or more) of the channels shown in the image above, navigates through the website and chooses to either leave after learning about the company or use the CTA “Contact Us” button.

Sketches

Paying more attention to web than mobile, I sketched out wireframes with pen and paper then decided to stick to the current layout based on the following reasons:

✍️ We want something unique and different from a typical website.

✍️ We want our visitors’ attention to be fixed on one page at a time while being carefully ushered to learn all they need to know about the company.

Based on these 👆🏼, I came up with the following 👇🏼

Step 3: Wireframe Of The Layout

…for the landing page

Wireframes of the landing page (Mobile & Web)

Wireframes helped me test the ideas without paying any attention to visual attributes by identifying the placement of important elements on the website. At this stage, I majorly focused on the layout by paying attention to where and how I want the information to be presented on the website.

Wireframe sketch of the website overview

Step 4: Visual Designs

Iteration For The Landing Page

For the landing page, I explored various visual design possibilities for the landing page before settling for the current design (last design).

Landing page iterations

Color, Typography, Icons (& Illustration) and Logo

We decided to maintain our first product’s visual components for the company website.

I tweaked the logo (Amplify) to produce the broader current company logo (Amplified Payments). Details below👇🏼.

Company Website Visuals

Step 5: Final Design (Overview)

Web view

Design Overview (web view)

Mobile view

Design Overview (mobile view)
Here is how a unique visitor navigates from one page to the other

Step 6: Tools Used

Design tools used: Pen & Paper (a lot of papers ended up in the waste bin 😭😥) and Sketch app.

Communication & collaboration tools used: Gmail, Hangout, Trello and Zeplin

Step 7: Conclusion

By simply tapping on the space bar or down arrow key on your keyboard or by scrolling on the page, website visitors can easily navigate from one page to the next while consuming the information.
✨ 👉 Check out the live website here 👈 ✨
Design overview can be found on Behance and Dribbble

What are the next steps?

  • Usability test of the prototype (and live website)
  • Improve user flow

Thanks for reading 🙌🏽 😊

Special thanks to Amplify Team and everyone who supported and helped me while working on this project. 🙏🏽 👍🏽 💪🏽👏🏽