Jeremie ROBERRINI NEVEU
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.
Reverse Wireframing
Breaking down the existing apps.
Current website
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.
Mobile version
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.
Divergence assessment
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.
Ui Design
Building a website keeping the identity of the mobile version.
Wireframes
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.
Desktop Ui
The UI is made to match and correspond in the deepest level possible to the mobile app. The design language is respected and proportions conserved.
Interaction Design
Create addictive actions.
Post Lightbox
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.
