💡How I got this Idea ?

The Ideation happened during lock-down phase, When I was all alone and disconnected with world and While scrolling with social media apps like, Facebook, Whats App, Instagram, I found that there are so many difficulties while using these apps, and none of them had overcome this kind of problems in there interfaces, That’s why I build my own messenger app

🔄 UX Process I followed -

My Responsibilities -

  • User Research
  • User Survey
  • Competitor Analysis, Research
  • User Persona
  • User Task list
  • Storyboarding
  • Logo and Brand Design
  • Create wireframes, mockups
  • Prototype design

Tools Used -

  • Paper Sketch
  • Adobe Photoshop
  • Adobe Illustrator
  • Figma

Step 2 - Need Finding 🔍

In this step, I understand the problem and did some online research for EasyChat App, I conducted user survey’s and asked everyone set of questions. Also had virtual call with the users to understand the exact requirement of what they need from the actual app.

Project Scope -

There are so many messenger apps are in market, But EasyChat mainly focuses on Creating ease with which user can chat with their loved ones. This app is having unique features which makes user feels comfortable.

Competitor Analysis -

App Chat with Promote Business Group Capacity Features Usage
Whatsapp Contact Lists In Group or Status 256 Chat, Video, Audio Call, Status, Group, Business Account Daily (Almost All Age Group)
FB Messenger FB Friend Lists With Everyone on FB 250 Chat, Video, Audio Call, Status, Group Daily (mostly in 18-40 group)
Telegram Contact lists, Nearby location, Search In Groups 200,000 Chat, Video, Audio Call, Status, Group, Business Account Daily (mostly in 20-30 group)

Quantitative Analysis (User Survey) -

I conducted user research by using Google Forms, Here are types of responses I received — Here is Link

User Interviews -

During the research phase, I took interviews of 5 users, Here are key insights of the interview phase
I gave task to users to checkout all 3 competitors of Easy Chat App, and then they gave me feedback of what problems they face while interacting with app.

Persona

avatar

User Persona 1

Pinki

ABOUT
Age : 30 years
Address : Pune, Maharashtra
Education : BFA - Fine Arts
Work : Graphic Designer
Hobbies : Sketching, Painting
SKILLS
Tech savvy, Daily Use social media, Do Meditation daily, Stay up to date with latest news
BRANDS
BIO
Pinki is working as Freelance Graphic Designer, Lives in metro city Pune, she also do sketch and painting in free time, She want to promote her business in her social networks , also want to showcase Her image editing / video editing / meme Creation talent within her friend circle.
FRUSTATIONS
Need better quality in WhatsApp video call
Need reminder for birthday / important messages
GOALS
Want to promote her business in her social networks , also want to showcase her image editing / video editing /meme Creation talent within her friend circle.
She is also seeking new opportunities in her friend circle
Interested to join webinars/ online sessions for new learnings
Use WhatsApp to get daily updates from “Meditation class" and Free Webinars, also love to chat with friends
avatar

User Persona 2

John

ABOUT
Age : 30 years
Address : Pune, Maharashtra
Education : M,Pharma
Work : Works in Healthcare IT
Hobbies : Listening Music
SKILLS
Tech savvy, Daily Use social media, Love watching movies Do online studies
BRANDS
BIO
Mr. John is working as Pharmacovigilance, Lives in metro city Pune, He loves watching movies/listening music in his free time, He loves chatting with friends, stay updated, He also like to share important information within friend circle and family.
GOALS
Want to share important files (.pdf / .doc / .xl) with office members or with friends
Use WhatsApp to get daily updates from friends and family members
FRUSTATIONS
Sometimes he does spell mistakes so need autocorrect feature or edit feature in message app
In WhatsApp- he is unhappy with this feature “you deleted this message”
Akash want to keep his chat personal so want kind of security lock option within the app
Not able to open important files (.pdf / .doc / .xl) in app if relevant app is not downloaded.

Use Case

A use case is a written description of how users will perform tasks on your website. It outlines, from a user’s point of view, a system’s behavior as it responds to a request. Each use case is represented as a sequence of simple steps, beginning with a user's goal and ending when that goal is fulfilled.

avatar

User Persona 1

Pinki

  • Make Better video call to friend

    Opens WhatsApp Make Video Call to friend Unhappy with video quality Not able to adjust quality

  • Need reminder for birthday / important messages

    Opens WhatsApp Group Finds everyone wishing best friend birthday wishes Sad to see, forget birthday And not able to wish firstly Also, not able to get early notification on Facebook. (Facebook only shows birthday reminder when users opens FB app – not in messenger )
avatar

User Persona 2

John

  • Want to share important files (.pdf / .doc / .xl) with office colleagues or with friends

    Opens WhatsApp Receives .PDF File from Office Friend Not able to open .PDF file because relevant app is not installed in mobile Feeling Frustrated

  • Need Lock or hide chat from specific person

    Finds everyone is using his smartphone at home for calling and messaging Need some privacy for personal messages or hide message Need to delete chat every time Feeling Frustrated

Step 3 — 💡 Ideate 💡

User Task List

User task lists are the tasks users will be performing on the Messenger App which he is going to use in future.

Login/Sign Up
  • Mobile Number
  • OTP
  • Receives popup – Login Successful
Send Message
  • Search Member from contact list
  • Select Member
  • Message
Video Call
  • Search Member from contact list
  • Select Member - Do Video Call
  • Select Quality –
    Low (For Slow Network)
    High(For Fast Network)
Open .PDF/.Excel/.PPT file
  • User Receives imp doc (.pdf) from friend via message
  • download .pdf
  • Opens .PDF in messenger app
Send Birthday Message before time or on Time
  • Receives notification for upcoming birthday
  • Selects time and date for sending message and type message
  • Message sent automatically for selected time and date
Edit Sent Message
  • User finds spelling mistake in sent message
  • Select message and Edit
  • Corrects and sent in group
Lock Chat
  • Select User who sent very private or secret message
  • Select lock chat option
  • Add code, Done
Language Type
  • Open messenger app
  • Selects Language option
  • Select “Marathi” language

Storyboard

The purpose of UX storyboards is to consider and communicate a sequence of states, rather than provide specific visual direction. They demonstrate how someone might interact with a future product or service.

SCENARIO 1 : User John Interacting with message app, and unable to open .PDF file, because that app neither have in build app opening feature nor he have any alternative software installed
SCENARIO 2 : User Pinki, Facing difficulty with video quality while Video Call, then she adjusts quality by using inbuilt feature.

Card Sorting Process -

What is Card Sorting : Click here to know

For my project, I choose Closed card sort technique, as I already defined the categories by my own.

Information Architecture

Information architecture (IA) is, like a blueprint, a visual representation of the product’s infrastructure, features, and hierarchy. IA may also include navigation, application functions and behaviors, content, and flows.

Information architecture (IA) is, like a blueprint, a visual representation of the product’s infrastructure, features, and hierarchy. IA may also include navigation, application functions and behaviours, content, and flows.

Mobile app Wireframe - LOFI

Low-fidelity wireframes are basic wireframes that outline blueprints for web pages or app screens. They help you communicate your product's “big idea” rather than the specific details.
Before starting coloured design, I created Mobile App design with Black and White design approach. because this approach helped me to highlight important Buttons or functionalities, and also to create good design for Colour blinded people as well.

✍️ Branding for Easy Chat App ✍️

Mobile Screen UI Design

Step 4 — Prototyping 📲

I created Interactive prototype Using Figma

Step 5 — Evaluation 💭

I interviewed 3 users from development background , whatever insights they shared helped me a lot to make my product better. below you can see the results. Also additionally I did Heuristic Evaluation using Jakob Nelson’s 10 design principles.

⭐ Prototype Testing Feedback ⭐

User feedback after testing prototype with them

⭐ Design iteration after User Evaluations ⭐


Final Prototype with feedback changes implementation

My takeaways from this project 💁‍♀️:

  • Although I am having good experience in Graphic and Visual design, I learned Material design 3.0 design principles, font hierarchy throughout designing the mobile app
  • I learned to build Design System, Components, Colour Schemes in better way while working on this project.
  • I interviewed 10 people in research phase (includes Online Survey + Direct Interview), Where i get better insights than what i imagined.
  • In last stage when i represented my prototype to 3 users for feedback who were developers and had good knowledge in this industry, I found various areas of improvement in that.
  • In iteration phase, I use Jakob Nielsen's 10 Heuristic evaluation principles to find out flaws in my existing design.
  • In the end, I am grateful to my mentor Mr.Tushar Deshmukh (Founder & CEO UXExpert — UXUITrainingLab Pvt. Ltd. Pune, Maharashtra.), I did this project under his guidance, And I am grateful for guiding me throughout the project, Always supporting me, and providing valuable insights.