Halawee

A web admin platform to manage merchants and track payments online

Read Case Study

Overview

Halawee is an admin platform to manage merchants and track payments online. Features on the platform include a dashboard to see a quick overview of transactions, a count of merchants, customers, transactions and also notifications. Other features include a listing of merchants and customers, merchant profile(s) with details of each merchant.

ROLE IN PROJECT

Interface Designer & Developer

DURATION

3 Weeks

The Challenge

Looking through the product requirements, the pages for the admin platform were outlined and a timeline was set for deliverables. The timeline was sufficient to churn out the design for the interfaces but was quite short for converting them to code so I had to explore ways to quickly convert designs into code.

The process

The timeline for the project was pretty short and I had to do both the task of designing and coding the interfaces so I had to for go research in my design process.

1. Design wireframes

2. Test wireframes

3. Convert wireframes to High fidelity

4. Convert designs to code

Lo-fi Mockups

Based on the features outlined I designed low-fidelity screens, this allowed me to quickly define the layout of the screens without bothering about colours or icons.

Style Guide

After testing the low fidelity screens with some users and stakeholders, I moved on to converting them to high-fidelity mockups. Since I had to convert the designs to code in a short time frame, I grabbed the Creative-tim Material Dashboard as a template for the Design to HTML/CSS conversion.

I chose a dark colour for the side bar and a blue colour to highlight active links.

#2196F3
#637381
#5D536B

For the initial user interface design, I chose Apercu Pro For typography but ended up using a free google font - Work Sans, a Sans-Serif typeface in the final HTML/CSS code.

Work Sans
Aa Bb Cc

Final Design

Conclusion

This was a challenging project because of the short timeline to deliver designs and code but it was great pushing the final code. 😁

back to top

Have a project you want me to work on?

Shoot a mail to

[email protected]