Infragram UI redesign proposal [Outreachy 2022 Proposal]

[nuilewis]

Hello, I went through the Infragram website and here are some suggestions I have for the UI.

Issues

Some of the issues I noticed with the original website were;

• The home page felt dated
• Lacks structure
• Lacks proper hierarchy
• Feels overwhelming to a new user
• Feels too tight and doesn't have room to breathe.

I also worked on the Analyze images page, I felt

• The top bar feels overwhelming and complicated, especially for new users

• The lack of a navigation bar is also an issue.

• There’s a lack of visual hierarchy, to direct the user on what to do and first-time users feel lost.

• I also felt that the logo needed to be refined, its typography feels lacking.

So I tried to address the issues with this redesign.

My Changes

I attached an image below with my changes.

I made the new homepage look cleaner and more modern. It introduces the users to Infragram without being overwhelming. And I added a navigation bar for easier navigation and more prominent Call to Actions

I adjusted the typography, to a clean Geometric San-Serif typeface, with proper contrast to provide more hierarchy and easily direct the user

Different sections are more visually separated and contain a lot of whitespace/negative space, it makes the site not feel compressed.

I also adjusted the typography of the logo, to properly highlight what’s important.

And I added a footer.

For the analyzing page, I removed the top bar and moved it to the side, to make proper use of the excessive whitespace that was there before. The controls are more separated, and have a sense of order, starting from the top to the bottom. The different sections are now more easily separated with big bold headings and enough whitespace

Sections such as Colorize and Overlay are more understandable now, with simple switches to easily indicate when they are activated or deactivated.

The FAQ section has been simplified, excessive headlines such as "likes" and "comments" are now replaced with simple icons that communicate the same information, keeping the area clean.

The design is not yet complete and still needs adjusting, I'm open to any suggestions and feedback. Thanks!

[welcome[bot]]

Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄 If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can make a gif too!

[nuilewis]

Hello, @TildaDares , this is my proposal for the Infragram UI project, please I would love some feedback, thanks!

[on2onyekachi]

@nuilewis Really Awesome!

[on2onyekachi]

But I think it would be nice to include an instructional modal that would guide users on the basic step of how to use it.

[Ifetakuro]

@nuilewis this is really nice

[nuilewis]

But I think it would be nice to include an instructional modal that would guide users on the basic step of how to use it.

Thanks @on2onyekachi , thats a good idea.

[nuilewis]

@nuilewis this is really nice

Thank you @Ifetakuro