Is there anything new to add on Instagram?
Redesigning an app — A UI Case Study
Overview
In this case study, I’ll explore the exciting and interesting aspects behind the decision-making process of redesigning Instagram.
I collaborated with a teammate, and we had 2 weeks to deliver a UI project involving the redesign of a famous or pre-existing app of our choice. Our approach involved solely conducting secondary research as research method and this redesign could focus on improvements to the interface and visual aspects, as well as the potential addition of new features.
How did it begin?
We had several app options to choose from, including Skype, Tinder, WhatsApp, and others. We deliberated between WhatsApp, Instagram, or Tinder, but being avid enthusiasts of challenges, we aimed to redesign an app for which we couldn’t readily conceive innovative ideas. With no clear direction on what to alter, we chose Instagram.
The first thing we did was to decide which device model and system we wanted to work with, and whether we preferred the dark mode or light mode. We opted for the light mode of the iPhone 13, as we had easy access to this device. The very next step was to conduct secondary research and capture as many screenshots as possible of all screens and elements within the Instagram app we could find.
Secondary Research
After conducting Secondary research, we discovered that Instagram had more than 2.35 billion active users in 2023, making it the world’s second most popular social media platform. Intrigued by this, we delved deeper into understanding why people use and love Instagram.
Our exploration led us to explore the reasons behind why internet users engage with social media. We found that users utilize platforms to keep in touch with family and friends, fill spare time, find content, read news stories, seek inspiration for activities and purchases and watch live streams among other reasons.
It was at this point that we realized one of the reasons for Instagram being the second favorite social media platform. It seemingly has everything!
Who would have thought, right? Well, we did! That’s precisely why we aimed to redesign this app.
We wanted to know what changes could be made to an app that has everything?
Interface Inventory
After completing the secondary research and collecting all those screenshots, we initiated an Interface Inventory by documenting and organizing design elements, components, and assets of Instagram. We included everything we could find, such as buttons, icons, color schemes, typography, images, and interactive elements.
With the inventory done, some ideas for improvements were already coming to our minds. However, we could not work with these ideas without understanding if everything was working as expected on Instagram, regarding heuristics.
Heuristics Analysis
To identify potential navigation problems for users, we conducted a Heuristics analysis using Instagram screenshots. We noticed some issues that could be turned into design opportunities for our redesign. There were some failures regarding user control and freedom, consistency and standards, error prevention, visibility of system status, recognition rather than recall, and flexibility and efficiency of use.
It is not possible to see some video/reels subtitles or information due to the overlay of captions in front of the video, and unfortunately, users cannot minimize this overlay. Users also cannot see when a video is paused. There are two notification colors, with one of these colors coincidentally matching the color used for error notifications. Furthermore, we identified an issue where it is challenging to locate the options for posting a photo, especially when dealing with multiple pictures with a dark color scheme.
Visual Competitive Analysis
Taking all of that into consideration, we initiated a Visual Competitive Analysis with the goal of understanding what our competitors offer and how they present their offerings. We specifically chose key competitors such as TikTok, Snapchat, Twitter, and YouTube. While none of them boasts as many features as Instagram, TikTok emerged as the one with the most similar features.
We thoroughly assessed all of them to compare functionalities. It was observed that each competitor offered visibility for paused videos, and some of them included a minimize option for captions.
Scope and Constraints
With all these insights, we already knew of some improvements to make. Certainly, we could incorporate a pause button and a minimize option for captions. However, we recognized that these were relatively minor details, already present in competitors’ designs.
So now what? We were so excited for the challenge of creating something new for Instagram, and now it is summarized by a pause button? That was not enough for us, enthusiasts of challenges! What is Instagram or any product without their users, right? So, for them (and because we love challenges, of course), we decided to embark on another research!
However, this time, we delved into Instagram feedback. Upon gathering information, we discovered an opportunity to introduce a unique feature. Unlike what we observed in main competitors and not directly available through Instagram, this feature was only accessible through tertiary apps.
So, let’s include this beautiful feature in our redesign! But because we are not only fans of challenges but also mysteries, let’s reveal this later, after deciding whether we want to change the Instagram gradient colors or not!
Wrapping Up Week One
For the last 2 days of the first week, we began deciding on the Colors, the Brand attributes to create a Moodboard, the Typography, Style tile and User flow. We wanted to infuse a playful touch by adjusting the gradient colors, while still preserving the main structure of Instagram. Opting for colder tones over the warm ones already in use.
We chose Practical, Friendly, Personal, and Helpful as brand attributes. To visually capture our design direction, we created a mood board featuring hints of what we were incorporating into this redesigned version!
With the mood board ready, it was time to decide on the typography. We maintained the same font sizes we found on Instagram, 3 different sizes for headers and 2 for body text. We wanted to use fonts that are easy to see and read on screens and in small sizes. Therefore, we chose Open Sans, Roboto, Lato, Noto Sans, and Montserrat.
After creating the style guide with colors, typography, and iconography, it was time to start the user flow. Our goal was to implement and explain the new functionality we ideated, following the explanation of the “Minimize Captions” and “Pause Video” functionalities. So then, in the post editing options, the cherry on top! The new feature, enabling users to schedule their posts.
- Open Instagram.
- Click on a video.
- Minimize captions.
- Pause the video.
- Return to the homepage.
- Click to initiate the process of sharing a post
- Select the date and time for their post.
- Confirm their choice, and preview the content.
Additionally, users have the ability to edit scheduled posts directly from their profiles. This feature would enhance the overall user experience, providing greater flexibility and control over content sharing.
Process
This idea emerged after noticing some users expressing their appreciation for the functionality of adding a substantial amount of content in a single post. But, they faced a dilemma: they didn’t want to flood their followers’ feeds with multiple posts simultaneously. Instead, they were using this feature because they tended to forget to post additional content later, especially when occupied during the day. However, they expressed a preference for viewing their content separately on their profiles, rather than in just one post.
Upon investigation, we found that Instagram had a scheduling tool, but it was limited to live streams. Furthermore, users could only schedule posts on Instagram through other apps, like Canvas, but this was restricted to business accounts.
Now, with our proposed solution, users can schedule posts and easily modify this schedule at any time.
Embarking on Week Two
After completing the user flow in the first week, we outlined tasks for the second week in our roadmap. We began the creation of the Design System, incorporating all the necessary elements, components, and atomic elements for use in the design.
Devoting two days to establishing a frame for the iPhone 13, we carefully defined columns and margins to ensure precise alignment of all elements within the designated space. After extensive work on Auto-layout, interactions, components, and variants in Figma, it was time to initiate the development of the High-fi prototype.
We introduced a distinct design for the menu on the “Share a Post” page. We engaged in experimentation, adjusting colors, and incorporated features such as minimizing captions, pausing videos, and the ability to schedule a post.
While working on the high-fidelity design, we identified errors in certain components and overlay interactions within the prototype. This necessitated a day dedicated to reorganizing and rectifying these issues. As we were approaching the final days to deliver the project and commence preparations for the presentation, time was of the essence.
Some specific elements that presented challenges were the initially chosen date and hour picker, which proved nonfunctional in the prototype. Consequently, we opted to search for a pre-existing one within a Figma community kit rather than creating our own.
Prototype
We were operating under tight deadlines, leaving no room for usability testing. This, combined with other factors, likely contributed to our oversight of not including GMT time for the schedule a post page.
Upon completing the prototype, we identified areas for improvement in the Upcoming steps. For instance, we need to fix the date and hour picker, ensuring it includes the correct time options. Additionally, we plan to extend the scheduling functionality to cover stories and reels while also implementing a responsive design.
Click here to check the Prototype
Outcomes and Lessons
With all that we learned, we identified certain issues that can arise when you have a limited time to deliver projects. Once again, it highlighted the importance of conducting usability tests before launching any product.
I thoroughly enjoyed being a part of this project, where I learned a lot! Certainly, understanding and applying auto-layout was not as easy as we thought it would be, but it was undoubtedly a meaningful experience. This project taught me a lot about keeping in mind that errors can happen, and unexpected situations may arise. Creating a design system from scratch in such a short time can be demanding, and having a roadmap to organize and keep track of tasks is crucial when there’s a lot to do!
Within this short timeframe, we recognized the importance of user feedback. It was instrumental in guiding us, especially when we were unsure about what to do. Consequently, we were able to brainstorm and introduce a new feature to add to Instagram! A big thanks to my teammate for being so supportive and a challenge enthusiast, just like me!
Thank you for reading! 😃
