OPAY Web — Landing Page Redesign
Introduction:
Hello! This case study project was designed and developed by two amazing creatives. My name is Elufidipe Tosin Benjamin, a product designer. Also, Kelvin Ochubili is the front-end developer who worked on this project with me. I hope this documentation can describe how Kelvin and I have worked on the process of solving a problem of hierarchy and poor layout on the OPay landing page. I hope you enjoy this!
About OPay:
OPay is a one-stop mobile-based platform for payments, transfers, loans, savings, and other essential services for every individual. Currently, OPay boasts over 40 million registered app users and 500,000 agents in Nigeria who rely on OPay’s services to send and receive money, pay bills, and much more.
Project Goals:
This all started with a tweet from a fellow product designer on twitter -TimX Design where he cracked one of the principles of UI design called hierarchy. He shared a video in which he used the OPay landing page as a reference. That beckoned me immediately to work on something creative with a much better experience to help solve the issue of hierarchy on their landing page. After the design of the landing page was done, I onboarded a colleague of mine, one of the craziest creative front-end developers I know, Kelvin.
Problem Statement:
The goal of this case study was to create a clean, simple, creative, and better visual experience on the landing page.
We all know how creative their product team is judging from the mobile app, but we weren’t satisfied with the landing page they currently have. So, we took it upon ourselves to revamp their current landing page.
Project Challenge:
I did not experience any issues redesigning the app, but where I initially came across one was when the development was ongoing. I had an issue creating a replica of the QR they have on the current page.
Meanwhile, on Kelvin's side, this is what he had to say:
First off, I decided to use Vanilla JS to build out this homepage, I don’t know if that can be considered a challenge, but for someone that has been using Next JS for all my projects for 2+ years, I’d say that was pretty challenging for me.
The iPhone mockup was pretty challenging too, they were certain parts that needed some real-time implementation and animation too.
Getting the qr code to work was another issue as well.
Solution Walkthrough:
Styling the iPhone mockup from scratch so as to be able to select certain elements for animation and real-time implementation
Kelvin used a third-party library for the QR generator. It was super easy; I just needed to add both app stores' download links.
Visual Design Comparison:
Below is a comparison of each of the existing sections on the landing page and the design we worked on.
Live Prototype:
Visit the live link to this project here. Below is a live video demonstration of the project. Thanks for viewing!
https://vimeo.com/876090478?share=copy
Conclusion and Key Takeaway:
Working on this project with Kelvin was fun and a great experience for us because we learnt new things by researching, designing, and developing creative ideas for the web implementation.
My key takeaway from this case study was the creative thinking needed to design and develop efficiently within a short period of time.
There's not much from Kelvin on the takeaway, but to just keep building. More challenges would result in more research, and in that process, you’re bound to learn something new each and every time.
Thanks for your time; we appreciate it! By the way, hire us; we are good. Below is our portfolio link if you’re doubting what we are capable of doing.
Tosin, the product designer — https://dribbble.com/tolzy
kelvin, the front-end developer — https://kelvin-folio-v1.vercel.app/
