Reverse engineer Instagram mobile and web version in order to create a stunning desktop version. The solution offers a better reading and extra features enabled by the extra space a pc screen offers.
The current web version of Instagram is lacking features and doesn’t always respect the design language of the mobile. The goal is to create a unified experience that would be adapted to wide interfaces.
Manage to stay true to the mobile experience and provide the same feeling on a completely different interface. It was crucial to conserve the design language of Instagram by respecting proportion.
This project uses a wireframe reverse engineer technique. The app was decomposed and reconstituted on Sketch, the final animation was made on Principle.
Building this new design is part of a challenge offered as a preschool work by the school IronHack. It was realized completely independently over a period of 2 weeks.
Breaking down the existing apps.
The current web version features an inconsistent design with different layout and flows depending on which service the user is using. There is also a large amount of white space that could be exploited.
The mobile version defined by it’s squarely organised element and it is featuring a pure design where everything is kept under the simplest form of ideas.
It’s important to notice that some elements like the IG TV episode card do not provide the same information depending on the screens. Even the mobile app suffers from inconsistencies.
Building a website keeping the identity of the mobile version.
The new design is based on the usage of a sidebar that uses space to covert the mobile navigation into easy tabs. The layout offers deeper interaction between user and creator on the content viewing page. And Elements are made bigger from the phone view.
Create addictive actions.
The lightbox mode is now made to spark fun and encourage the user to quickly interact with the content. Controls are placed outside of the frame for better understanding, appearing with a delay to let the focus on the content.
Product & Solution
Demonstrate the potential of the new design.