How We Designed The Company Website
Introducing Amplified Payments 🙌🏼
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 -
“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.
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 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.
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).
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👇🏼.
Step 5: Final Design (Overview)
Web view
Mobile view
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 👈 ✨
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. 🙏🏽 👍🏽 💪🏽👏🏽
