Enhancing the user flow of sending new direct messages to any user on the Instagram App
Improving the user experience of sending a new message to a user to reduce the session length.
Disclaimer
Recently I got an opportunity to join a 2 week UX design course mentored by UX Anudeep from Growth School.
In this workshop, we got to learn some major UX aspects that helps me to boost my UX learning to a very good scale.
Major Learnings
- Learning from existing design
- Design Thinking
- UI basics
- Prototyping basics
- User-centric design
- The business impact of UX design
- UX principles
1. Jakob’s Law:
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
2. Fitt’s Law:
The time to acquire a target is a function of the distance to and size of the target.
3. Hick’s Law:
The time it takes to make a decision increases with the number and complexity of choices.
4. Doherty Threshold:
Productivitv soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
5. Zeigarnik Effect:
People remember uncompleted or interrupted tasks better than completed tasks.
Among all of these major learnings “Design Thinking” helps me a lot to clear my doubts those are in my mind before joining this workshop
🎯 Mini Design Challange
For this mini-design challenge, I have gone with the Instagram application to improve the user flow of creating a new chat with any Instagram users
What is the solution and How does it help the users
According to the Fitt’s Law
The elements can be quickly interacted with
Making the actions big and bold makes it easy to find with eyes
It is easier for the fingers to tap on those actions
That’s why I have created a button with high visibility and ease for the users to interact with.
What Business Metric Does it affect
It will help the users to find the new chat function easily and also reduce the time to find the actionable point
🚕 Design Journey
- Heuristic Evaluation of the screens
- Prioritizing the ideated solutions
- Creating the paper wireframes
- Creating high-fidelity prototypes
- Usability testing (and redesigned according to the Usability testing)
- Final UI
1. Heuristic Evaluation of the screens
Heuristic evaluation helps me to create the base structure for this design challenge with this evaluation I was able to identify some minor issues that I can work on.
Heuristic problems
Consistency and standards :
Problem identified:
Here on the first screen the provision to send a new message to someone is in the top right corner and the icon used for it doesn’t convey its functionality that is why the user is constantly following the other processes to do the same function but it consumes more time
If we take the example of WhatsApp on the very first page, we have a floating button that helps us to send a new message to any of our contacts.
Recognition rather than recall :
Problem identified:
Users have to recall again & again how to send new messages and that’s why users are unable to perform promptly
2. Prioritizing the ideated solutions
For this design process, we have a limited timeline so we need to be very quick about this process.
Done a quick brainstorming session and was able to get some ideas to solve the current problems.
Ideations
- Other than the new message icon in the top right corner of the screen a text button can be added like ‘+ New Text’
- A new floating text button can be added in the lower middle part of the screen like ‘+ New message’
Based on the 2 ideations I am going to choose the 2 ideation because if we provide a new floating text button that can be added in the lower middle part of the screen like ‘+ New message’ then the button will be quite visible and easily accessible for the users to interact with.
3. Creating the paper wireframes
Now the fun part is here before starting as UI UX Designer I used to be a graphic designer and I love to draw sketches and artwork since my childhood, it is a kind of hobby that I love to do.
4. Creating high-fidelity prototypes
5. Usability testing
Now that I have completed my designs as per the problem identified during the heuristic evaluation. I will be testing the design with the users to make sure they work and improve what does not work.
Since Instagram is a very known application and almost everyone uses it, so I approach some random people near my college street to use my prototype.
In usability testing, I went to the users and asked them to do the tasks to understand whether my design is understandable by the users and are the users able to use these.
Tasks are given to the user:
Go to the message section
Try Send new text or create new chat
Search for the praticular user want to send text
Observation points :
How user is going to start a new chat with someone
If the user uses a different and time-consuming method to perform the action.
Is the user able to find that particular person to send new chat
Insights got from Usability Testing
- Able to access the button easily for ‘+ New message’
- Sometimes going back to the profile to get the particular user id (Muscel memory)
- Users find the button very bulky at some point and it comes in between the chats on the screen.
- The user having some problems finding his recent followers as he forgot their name
Improving My Redesigned Screens After Usability Testing
After Usability testing, I found out that the user had some concerns:
- Users think that the button is very bulky at some point and it comes in between the chats on the screen.
- The user having a hard time finding his recent followers as he forgot their names to send the text.
Final Prototype Link :
https://www.figma.com/proto/Wm5SCHRROebv4YxJA8Feq4/Instagram?page-id=0%3A1&node-id=17%3A130&viewport=776%2C1074%2C0.68&scaling=scale-down&starting-point-node-id=17%3A130
Key Learnings
Got to learn from the existing design, that how these famous brands are solving real-time problems for the users
What is the perfect way to structure your portfolio?
Like your portfolio should be scannable and do tell your whole journey of how you solve design problems.
Learn about how UX can improve your business efficiently by solving minor UX issues.
Learn how useful is usability testing to get real-time input from real users.
And last but not least ‘Design Thinking ‘
