Case Study of 2-week UX Design workshop by Growthschool

I had an amazing experience completing the Growthschool 2-week UX design workshop by Anudeep Ayyagari. I got to learn a lot of things and also unlearnt a lot of things. So here is my experience from the workshop:

Brief about the Mentor

Anudeep Ayyagari

Anudeep is the Superman of UX Design. He can explain any complex thing in a simplified manner through his unique Non-textbook Approach. He believes that the best UX Designer is a student for life.

Day-1

Day 1 of the workshop began with the introductory session by Anudeep. In this session, the basics of UX design were covered:

Obvious and easy to use = Great Experience for Users

UX Design = User Experience Design

What does a High performing and high-earning UX designer do?

• Design for the Users
• Impact Business via design
• Very good in design tools

And then came the exciting part, we learned Design thinking through a real-life example of a Ceiling Fan.

But how someone can learn Design thinking through a Ceiling Fan? By asking common sense questions-

Q1. What are the problems of the user while using a ceiling fan? This process is Empathise.

Q2. What problem did you select from the above ones to solve to improve the experience of the user?

It is important to understand that we should pick only 1 problem at a time because of various constraints like:

Budget

Time

How many people do you have to solve the problem?

How much data do you have?

This process is called Define.

Q3. Write down your ideas to solve the problem.

This process is Ideate.

Q4. Draw the prototype for your ideas.

This process is Prototyping.

Q5. Is the prototype working fine, is it really solving the problem?

This process is called Test.

Design thinking:

Empathise

Define

Ideate

Prototype

Test

Imp point: Design Thinking is a non-linear and iterative process, ie. after Test we might go to prototype or ideate and repeat this process depending upon the problem.

Day-2

The first exercise of Day-2 was working on learning from existing design workbook.

This workbook covered basic things like switch, bottle, camera app, and whatsapp. We had to answer some basic questions related to the design and features of these things.

The second exercise of Day 2 was learning basics of Figma by making a Calculator UI.

In this exercise, we learned the basics of Figma through Non-Textbook Approach.

What is Non-Textbook Approach?

The technique of learning tools 10x faster-

• Step into the tool creator’s shoes!
• Ask a basic question- What would you have done, if you were to create that feature?
• Look for a similar thing in the tool!

Reasons behind the design of the above calculator:

• The digital calculator resembles the physical calculator, the display is on top, and the number and symbols are below it because in design whenever there is something that people use on a daily basis, some physical product, design resembling that help users quickly understand how to use it.
• The Input area (numbers) is down and the Output Area (Display) is up because if they were vice-versa while typing we would block the display and we won’t be sure if we have typed the correct number.
• The contrast between the text and background is high to make the text readable.
• In the calculator, color is differentiating the different parts of the calculator.

Day-3

On Day-3 we understood Jakob’s law by asking common sense questions for applications like Linkedin, ott platforms, and discord.

Why Linkedin brought stories similar to Instagram and Whatsapp?

Because users already know how to use stories, so LinkedIn doesn’t have to make a tutorial or explanatory video for stories.

Why do all ott platforms like Netflix, Amazon prime, Disney+Hotstar have the same interface?

Because the user’s primary motto is what to watch, not how to watch and how to search content.

Why does even a modern and quirky chat app like Discord, use the same old boring icons?

Because icons like camera, gallery have already been used in other apps so a user finds it easy to identify them and use their functionalities without any difficulties.

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.”

And then there was an assignment given in which we had to identify the applications of Jakob’s law on the various apps which we use on a regular basis.

I came up with Flipkart, Telegram, and Phonepe.

Day-4

On this day we learned about Fitt’s law through examples from applications like LinkedIn, GooglePay, and Myntra.

Fitt’s Law-

“The time to acquire a target is a function of the distance to and size of the target.”

In easy language, the cta or button with which a user interacts with the more closer they are to whatever we are interacting with(in case of mobile apps it is fingers) and the more bigger they are it is easy to use them.

And then it was followed by an assignment on applications of Fitt’s law. I came up with examples of Zomato, Alarm Clock App, and Camera App.

Another exercise of this day was building a music app UI in Figma( obviously through Non-Textbook Approach)

Why is it important to make a good UI for a Music App?

Because of the Aesthetic Usability Effect.

-A/c to this principle it is said that users often perceive aesthetically pleasing design as a design that works very well.

Application of Fitt’s Law in the music app

The play/pause button is the most important button that’s why it is big in size and closer to the thumb ie. near to the bottom of the screen.

Why do buttons like play, next, previous, shuffle and repeat closer to each other?

Because of law of common region.

-It states that whenever there are multiple elements within a defined boundary either visible or invisible boundary they are assumed to be grouped together or working together or related to each other.

Imp point — Whenever we design for any product we must remember that we are not the user and we have to ensure that our design is user-centric, it is being done for the users who will use the product.

Day-5

On this day we had to complete work on yourself workbook.

The workbook included:

Write down a few things that you already know about yourself.

Write down the things that you loved as a kid

Arrive at your fundamental qualities

Find the skills required in UX career

Match your fundamental qualities with the skills required in UX

Day-6

On this day Anudeep took a live Q&A session and busted a lot of myths. The session was supposed to be from 9 pm to 11 pm but Anudeep took it till 2 am and his energy didn’t drop for a second. The takeaways from the session-

• Businesses work in a non-textbook manner. If the business can be done with a fixed formula, they would have just hired robots instead of humans.
• What is the difference between UI and UX design? The question is itself wrong there is no difference between UI and UX design, instead UI design is a part of UX design.
• Do a UI Designer work only for the visuals of the interface? No, a UI designer is responsible for all the interaction a user would do with the interface. Visual is just one type of interface.
• Will Ai replace UX Designers? No, not at all. Mediums (like Mobile, Laptop) and tools (like Figma, Adobe Xd) can get replaced with time. So, adaptation is the key. If Ai comes, we will use this to solve problems in a more efficient manner.
• How to make a good UX case study? You must have reasoning for everything that you have put in your case study. Understand different design processes and select the design process on what makes sense to you.
• What is the responsibility of a UX Designer? An efficient UX designer does 3 things-

1. Design for the users
2. Impact Businesses

3. Learn all the relevant tools to go and impact business and design for the user.

Day-7

On this day we worked on a basic animated prototype in Figma.

The reason why we do animated prototyping is because this is the way real products behave in the real world.

Day-8

This day we had a live Mega webinar of 4 hours. We worked on 4 workbooks.

In the 1st workbook, we learned Jakob Neilson’s 10 Usability Heuristics through examples from the Swiggy App in a very non-textbook way.

2nd exercise included low fidelity prototyping of music app UI using marvel app.

We go from ambiguity to clarity that’s why we start from as rough as possible.

3rd exercise included high fidelity prototyping of music app UI in Figma

Thumb Rules for an animation-

• What are the changes we want?
• How do you want the changes?
• What are interactions for the changes to happen?

4th workbook of the mega webinar included Business impact of UX Design.

Day-9

This day was reserved for unfinished tasks.

Day-10

This day included 2 exercises.

1st exercise included understanding Hick’s Law through the examples of Swiggy and the Netflix app.

Hick’s Law-

“The time it takes to make a decision increases with the number and complexity of choices.”

• The less number of choices the easier it is to decide.
• Clear representation of choices makes it easy to understand them.

This exercise also included an assignment in which we had to come up with our own examples of Hick’s law. I came up with examples of Amazon, Urban Company, and OLX.

2nd exercise included making OTT App UI in figma.

Through this exercise we learned the concept of using subtle gradient on the photos to make the text more readable.

While designing buttons (eg -play button in this case) we should keep these things in mind-

• There should be a contrast between the text and the background.
• There should be good spacing between the text and the background.
• The spacing of text from the left and right edges should almost be double the spacing from the top and bottom.
• A button should look like a button, which means it should communicate clearly that it is clickable.

The important concept of Affordance and Signifier was covered through this exercise.

Affordance- It is something that tells you what are the potential interactions you can do with an element.

For eg- In this case, we can tap the play button.

Signifier- A signifier is something that signifies that an element has some affordance or in easy terms, there should be some signals telling that this can perform certain type of actions.

In this case- play button has play written on it which signals that it can be tapped.

We have kept the images under previews closer to each other because law of proximity states that if things are closer to each other they are assumed to be grouped and related to each other. Same reason for the images under My List.

Why these type of ott apps use dark background?

When we are looking in the video which is bounded inside a box then the best way to make sure users focus inside the box is by making outside the box almost invisible, ie. a dark color.

Day 11

Day-11 began with understanding Doherty’s Threshold through the examples of Facebook and the uber app.

Doherty Threshold-

“Productivity soars when a computer and it’s users interact at a pace {<400 ms} that ensures that neither has to wait for the other.”

This means a computer or a system need not wait for a user and a user need not wait for the computer to interact with one another and that time is actually stated as less than 400 ms.

• If the reaction of interacting on something(feedback) doesn’t come within expected time, users might end up doing mis-clicks.
• Users don’t really like waiting a long time for any results to start appearing.

For the assignment part, I came up with the examples of Zomato, Amazon, and Swiggy.

The second exercise of the day included doing stage-1 of animated protoyping.

This interaction was made using Smart Animate Feature in Figma. In smart Animate We change the properties of an element (like position, opacity) but we keep the name same in different frames.

Day 12

This day included Zeigarnik effect and stage-2 of animated prototyping.

Zeigarnik effect

Zeigarnik Effect states that-

“People remember uncompleted or interrupted tasks better than completed task.”

• Seeing an incomplete action motivates people to complete it.
• People always like to have everything in the finished state.

I did the assignment for Zeigarnik effect and came up with examples of Hotstar, Flipkart, and Zomato.

The 2nd exercise of the day included completing stage 2 of animated protoyping.

Day 13

On this day we did component-based design in figma.

This exercise explained the importance of component-based design and how it can help to save a lot of time.

Day 14

This case study is a result of this day.

I applied the concepts of UX Design to make this case study.

First I made some rough structure (low-fidelity) of case study in my notebook and then made a notion page (high-fidelity) and finally published it to medium.

I learned a lot of things in this workshop and most importantly I am able to identify those things in the various digital products I come across.

Thank you. Happy Reading :)