Public Lab Research note

Re-design Infragram landing page

by kunlefashmayop | April 18, 2022 15:35 18 Apr 15:35 | #30476 | #30476

I am Fasakin Adekunle, a frontend developer

I am a motivated by technology. I am willing to learn and improve as a developer. I have a 2+ years experience with React(Javascript), HTML/CSS. I have worked on some exciting projects to improve and grow my knowledge in building, testing and deploying a web app.

Affiliation: Federal University of Technology, Akure(FUTA)

Location: Lagos, Nigeria

Project description

I was able to locally deploy the infragram website. I noticed some flaws associated with the website which include:

* The website looked clustered up especially in the header section, making navigation complex.

* The lack of proper hierarchy and a particular pattern was not maintained throughtout the UI design

* Not fully responsive on different device sizes

Abstract/summary (<20 words):

The infragram website would be easier to navigate for new users if the website was more user-friendly and responsive.


The new UI design would:

_* Help the for easy navigation for new users. _

* Make website more acccessible through the Header section.

* Make the website more responsive on different devices (mobile and tablets)



Week 1

-Design a wireframe for the landing page.

Week 2

  • Design a more responsive and structured header.

Week 3

  • Design a component that descibe the Infragram website visually

Week 4

  • Create hover and swipe action for different components of the landing page for a better user experience

Week 5

  • Create a swipe action for the Recent image component

Week 6

  • Sectioning the Recent Images component and also adding a comment section.

Week 7

  • Replace the comment section table with a single tab or card for each question.

Week 8

  • Separate the flag and delete button in the Save Image section.

  • Make the delete button red because it indicates a serious action.

Week 9

  • Make the web app 1 fractional unit on mobile devices

  • Make the web app 2 fractional unit on medium sized devices

Week 10

  • Redesign the footer section.

Week 11

  • Creating Media Queries for medium device sizes

Week 12

  • Creating Media Queries for small device sizes


The project would require the use of HTML/CSS and Javascript for the development of the website.

First-time contribution


I am a frontend developer. I have experience working with React,Vue, HTML/CSS.

I also have experience with backend development using NodeJs( Expressjs), MongoDB, REST and GraphQL

I have worked on personal projects including:


Ethereum Transaction Crawler: Using Vue framework for the User Interface. I created a web application that can fetch data from the API endpoint about an ethereum wallet address through Axios and Nodejs.

A simple Netflix clone: A simple version of the Netflix web application. Where you can stream and download movies and series. Express.js is used as the backend framework. MongoDB for the database and Postman is used as the API platform. React.js with HTML/CSS was used for the frontend.


_I also have experience with a team which involved building an application that flags inappropriate words in spam emails and reports back to the app user. The main challenge we faced was being able to calculate a word by its illegality. _


I am passionate about the technology involved in carrying out the complex analysis of complex picture photograph(infrablue).

_I am passionate about the blockchain technology. I would love to learn and gain more experience about different blockchain technologies (Ethereum, Bitcoin, Solana) and their dynamics _


I would want to create a UI that ensure accessibility, easy-to-navigate interfaces, intuitive website design and ensure visitors are able to access information easily.


I am going to break down each day's tasks into smaller bits and complete each task according to the time frame. I will be diligent and put all efforts to get my job done. I am willing to put in 10,000 hours of effort to be the best result


Login to comment.