Bridge
USER INTERFACE DESIGN
![](https://freight.cargo.site/t/original/i/eca59f83eec1afa804a6ae3eb3374240bea8abf517757fc443701d682315c16c/bridge-user-04-1.png)
CLIENT: BRIDGE JOB PORTAL
WORK: FREELANCE
RELEASE DATE: OCTOBER 2020 - ON GOING
WORK: FREELANCE
RELEASE DATE: OCTOBER 2020 - ON GOING
About the product:
‘Bridge’ is a fair-hiring job portal start-up in India. It provides two services: one, connecting university students with potential recruiters, and two, a SAAS offering to universities for placement drives.
![]()
Ask:
Designing an intuitive product for three different users - from the use flow to the lauch of it’s MVP. This product is still in the prototype stage.
About the product:
‘Bridge’ is a fair-hiring job portal start-up in India. It provides two services: one, connecting university students with potential recruiters, and two, a SAAS offering to universities for placement drives.
![](https://freight.cargo.site/t/original/i/a005624b739eceb3572aa8b76b90561589b48293a4053d4d6a956c26bf3af3c5/bridge-user-02.png)
![](https://freight.cargo.site/t/original/i/1cb455f87de2ad81a3bc4514f3d9f4be3938eadc8f56d39423871bb2d1c26826/bridge-user-06.png)
The focus is on the website application for the pilot version of the product because the user research showed that about two-thirds of the users would access the service on PCs.
The entire website is based on this grid system (2-4-6) to keep the website architecture simple and easy to navigate. The sketches led to a more concrete direction for the interface.
![](https://freight.cargo.site/t/original/i/9d6c57e8025841e22467d34e9607762c9cd6b99ec926e98256a26e8a5497be9b/bridge-user-07.png)
![](https://freight.cargo.site/t/original/i/6b6bbe6eb4e5f60b2b94e25af4c3bc3bdb1360e3fdb24fb2c4dc66346110d55b/bridge-user-08.png)
![](https://freight.cargo.site/t/original/i/b07ce6fdb6f3ca85f04bcfac3f844112aedaaef046bfb7d0bdbcdf6227941f11/bridge-user-10.png)
It consists of ‘cards’ - collapsed and expanded. They are designed based on how each user would see another user, an organisation, a school, or a particular job. And what information to put and leave out in the collapsed card.
![](https://freight.cargo.site/t/original/i/4888502572f85181593fe5489e3c1b65c0a93d8242875a84548e53a24a4d773c/bridge-user-09.png)
![](https://freight.cargo.site/t/original/i/3bace68578c73bac10331612135ca06f733c16f4c65e8d61b3aa3355762e6388/bridge-user-05.png)
![](https://freight.cargo.site/t/original/i/40d9f9030ce856148f86ccca711cd2cfb568f0592c9819f31210796dd9a77168/bridge-user-11.png)
The next step in the process was creating a brand look and a style guide to keep as the north-star. Then came designing the various website assets that would be used across.
![](https://freight.cargo.site/t/original/i/a836deea6c6177aeb6495c7760634143e56d85eef68e96100c868d2ebc5833d5/bridge-user-12.png)
![](https://freight.cargo.site/t/original/i/a69c9afb18d84c7b2059881dec0d81365e864a897ac3c5647456df41bea65bfc/bridge-user-13.png)
![](https://freight.cargo.site/t/original/i/efff69055523b6126d232c7e3ebedd5b3d93863db0bdf81e2755c9a2f9981903/bridge-user-14.png)
![](https://freight.cargo.site/t/original/i/ccceb0f3da2410fd186dc604c69aaeb567e54f5145be3c773a284b2d7cf054c7/ezgif.com-gif-maker-6.gif)
![](https://freight.cargo.site/t/original/i/6a7a5250f4c06a2f4aa8dfe11f71bd52cdb18ed7db3538a4c38d5e360bf5b167/ezgif.com-gif-maker-7.gif)
The product is getting developed at the moment. The next step is to hold an extensice usabilty testing and re-designing what’s required before lauching.
![](https://freight.cargo.site/t/original/i/2ee27905b43513fa7732a5ca9a0c3b4e07a162cde730785e75eee3290797d06e/bridge-user-01.png)
![](https://freight.cargo.site/t/original/i/603588eee22951feed3dbb02f122fc9769434aac5da136d9014c2900970a9e42/bridge-user-04.png)