UX UI Design
Hello everyone, today I have the pleasure to present my project.
I decided to analyze an already existing and highly adopted app and incorporate a new feature into the existing product. For this project, I have chosen Instagram. In this project, we were supposed to focus more on the UI part.
For the beginning, I introduce you a short story about Instagram. Commonly abbreviated to IG or Insta is an american photo and video sharing social networking service created by Kevin Systrom and Mike Krieger. Originally launched for iOS in October 2010 They renamed the app Instagram, a portmanteau of “instant camera” and “telegram”.
For the story of the Instagram logo: the app has carried out various studies with its users to keep the favourite elements of users in its old logo, namely the rainbow and the camera. There is now a camera icon and a rainbow color gradient.
User Interview
To improve and develop new features, I made some researches on the App store & I interrogated some users. After, that I distinguished some problems and I decided to focus on:
1. The lack of dynamism in the comments.
2. The place of the market shop & notification button.
3. To facilitate the tasks to save videos and images.
User Persona
I present you Courtney, my user persona. She is a 25 y.o journalist that lives & works in London. Her goals are to have a stored and organized content & to do her hobbies without being distracted by the marketplace.
User Journey
The journey of Courtney begins when she wants to do a challenge that she saw on Instagram. She wants to search for a recipe she was saving somewhere on IG. But when she opens the app she is frustrated by the new Update, the marketplace replaces the notification button, she can’t found easily her saved videos and images, she can’t download anything and there is no feature to stop playing a video.
So, after finishing her recipe being super exciting, she would love that Instagram has a feature, where she can post a photo of her made recipe in the comments below the challenge. In this way, more people interested content could see her work.
Some opportunities that I propose are to :
1. Replace the marketplace button with the notification button.
2. Made the “saved” button more visible and easy to find.
3. Add the stop & play button to videos.
4. Add a download button.
5. Make it possible to add GIFs & images in the comment section to create more dynamic content.
How Might We
The How Might We Method is a design thinking activity that has participants simply rephrase known challenges as a question beginning with “How Might We”.
User Flow
This visual includes all the various interactions users should have on the site. It determines how I want users to navigate the site, taking into account the users’ needs.
The user flow, helped me to build easily the steps of the Lo-fidelity sketches.
Low-Fidelity
Low fidelity wireframes include the most basic content and visuals and are usually static (not interactive). They are often used to help map out the shell of the interface, its screens and basic information architecture.
I draw the low-fidelity to establish a hierarchy of information into the wireframes. The orange circles are the changes that I made.
To validate the Low-fi, I tested some users, after that, I started the Mid-Fi.
Mid-Fidelity
A medium-fidelity prototype is a prototype with limited functionality but clickable areas which presents the interactions and navigation possibilities of an application.
Regarding user feedbacks, here we have the mid-fidelity created in Figma.
Atomic Design
Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.
I used atomic design in order to create a design system. Here we have the atoms, molecules, organs, templates and pages I used to build the hi-fidelity.
I made some user tests for the mid-fi to have some feedback.
And here is the result!
Hi-Fidelity
I tested 5 users and created the Instagram Hi-Fidelity for IOS. (iPhone 11 pro)
Courtney wants to do a challenge via Instagram. She needs to cook a recipe, make a photo and the one that will be most appreciated will have a surprise.
On the main screen:
Starting from the Home page, she saw the challenge. Clicks on her profile icon. Goes to her profile. Clicks the saved button or the little flag near to insights. On this page, she chooses the recipes collection. Then she chooses a video. The video plays & because the video is too fast, she wants to stop it to see the ingredients… (she has the possibility to save the video on her phone with the cloud icon)
After she finished her recipe … She returns to the home page & clicks to comment. She clicks the photo icon. This one is opening & she chooses a photo from her phone gallery, chooses some emojis. In the last screen, she clicks to post it.
BTW, She can observe that the notification tab is where it’s always been, in the footer.
In conclusion, this one-week project was challenging, and I liked a lot to be my own time manager. I did a lot of research and analysis to came with a result. I think it is my favourite project till now.
Thank you for your attention, if you have some questions, feel free to ask!
