The UX Design Process explained step by step with a mobile app project

Summary

In this video, the presenter outlines the UX design process using a mobile app redesign as an example. They emphasize the importance of adapting the process to fit team dynamics and project specifics. The Double Diamond Process is introduced, which involves discovering and defining problems, followed by developing and delivering solutions. The presenter highlights the significance of user research, data analysis, and collaboration in narrowing down issues and prioritizing tasks. The video also showcases the use of a reMarkable 2 tablet for brainstorming and iterating design ideas, emphasizing the iterative nature of UX design.

Takeaways

• 🔍 The UX design process is flexible and should be tailored to fit the specific needs of a project, team, and company.
• 🛠 Having a structured process is crucial for navigating through a design project, especially when facing challenges or uncertainty.
• 📲 The example used in the video is redesigning the item detail page of an e-commerce mobile app, which is a common and complex feature.
• 🌐 The Double Diamond Process is introduced as a methodical approach to UX design, emphasizing exploration and refinement.
• 🔎 The 'Discover' phase involves a broad exploration of the problem space, including user and business problems, current design audits, and data analysis.
• 📊 Both qualitative and quantitative data are important for understanding user needs and the performance of existing designs.
• 📈 Key metrics to consider include conversion rates and user engagement with product features on the item detail page.
• 🤝 Collaboration with cross-functional teams such as product management, data science, and engineering is essential during the 'Define' phase.
• 💭 The 'Develop' phase encourages wide exploration of design solutions, often starting with brainstorming on paper to avoid early overthinking.
• ✍️ The reMarkable 2 tablet is highlighted as a tool for sketching and annotating ideas, providing a digital alternative to traditional paper.
• 🔧 The 'Deliver' phase focuses on refining solutions through user testing and iterating designs based on feedback from both users and internal teams.

Q & A

What is the primary focus of the video?

The video focuses on explaining the UX design process using a mobile app project, specifically redesigning an item detail page for an e-commerce app, as an example.

Why is it necessary to adapt the UX design process to different projects and teams?

Adapting the UX design process is necessary because every project, team, and company is different, requiring a customized approach that best suits their specific needs and context.

What is the significance of having a structured process in UX design?

A structured process provides guidance and helps maintain direction, especially when facing challenges or when unsure of the next steps, ensuring that the project progresses efficiently.

Can you describe the Double Diamond Process mentioned in the video?

The Double Diamond Process is a design process that involves two phases of divergence and convergence. It starts with a 'Discover' phase to explore the problem space, followed by a 'Define' phase to narrow down and decide on what to fix, then 'Develop' to explore solutions, and finally 'Deliver' to refine and ship the design.

What are the key activities during the Discover phase of the Double Diamond Process?

During the Discover phase, key activities include understanding user and business problems, auditing current designs, analyzing qualitative and quantitative data, and conducting competitive analysis.

How does the Define phase differ from the Discover phase in the Double Diamond Process?

The Define phase is about synthesizing findings from the Discover phase to decide and prioritize what the team will work on, involving collaboration with various stakeholders to determine feature prioritization and product requirements.

What is the role of the Develop phase in the UX design process?

The Develop phase is where designers explore and brainstorm design solutions within the defined scope. It involves creating initial concepts and iterating on them based on feedback and further exploration.

What does the Deliver phase entail in the context of the UX design process?

The Deliver phase involves refining solutions through user testing, making iterations based on feedback, and sharing designs with cross-functional teams to ensure alignment with business goals and other considerations.

Why is user testing important in the Deliver phase of the UX design process?

User testing is crucial in the Deliver phase to ensure that the design solutions effectively address user and business needs, and to make necessary adjustments before finalizing the design for launch.

How does the reMarkable 2 tablet facilitate the design process as described in the video?

The reMarkable 2 tablet is used for brainstorming ideas on a digital canvas that mimics paper, allowing for easy note-taking, document review, and sharing of ideas during meetings, which streamlines the design process.

What is the significance of t-shirt sizing in the context of the UX design process?

T-shirt sizing is a method to estimate the scale or effort required for a task, categorizing them as small, medium, or large projects, which helps in planning and prioritizing work within the team.

Outlines

00:00

🔍 Introduction to UX Design Process

The speaker begins by outlining the purpose of the video, which is to explain the UX design process using a mobile app project as an example. They emphasize that there's no one-size-fits-all design process, and it's essential to adapt it to the specific needs of the project, team, and company. The video aims to provide a structured approach to guide projects, especially during challenging moments. The example used is redesigning the item detail page of an e-commerce mobile app, which is a broad and ambiguous task. The speaker suggests that having a process helps in breaking down the design problem and prioritizing tasks based on impact. The Double Diamond Process is introduced as the framework for the discussion, starting with the 'Discover' phase where the focus is on exploring the problem space, understanding user and business problems, and conducting audits and data analysis.

05:03

📈 The Double Diamond Process in Action

The speaker continues by detailing the Double Diamond Process, moving from the 'Discover' phase to the 'Define' phase where the goal is to narrow down the focus and decide what the team will address. This involves synthesizing findings from competitive analysis, user research, and data to prioritize tasks and collaborate with cross-functional teams. The 'Develop' phase encourages designers to explore various design solutions, with the speaker personally preferring to brainstorm on paper before moving to digital tools like Figma. The 'Deliver' phase involves refining solutions through user testing and iterating based on feedback from both UX research and cross-functional teams. The speaker shares their personal workflow, emphasizing the importance of the final phase where most of the time is spent making iterations. The video concludes with a call to action for viewers to comment on topics they'd like to see covered and to engage with the content.

Keywords

💡UX Design Process

The UX Design Process refers to a systematic approach to designing products that provide meaningful experiences to users. In the video, it is emphasized that while there is no one-size-fits-all process, having a structured approach is crucial for guiding a project, especially when facing challenges. The Double Diamond Process, which is discussed, exemplifies this with its phases of discovery, definition, development, and delivery.

💡Mobile App Project

A mobile app project is a development initiative aimed at creating or redesigning applications for mobile devices. The video uses a mobile app project as a practical example to illustrate the UX design process, focusing on the redesign of an item detail page within an e-commerce app, which is a common feature in many mobile shopping applications.

💡Item Detail Page

An item detail page is a specific section of an e-commerce website or app that provides detailed information about a product, such as images, descriptions, and customer reviews. In the context of the video, the redesign of this page is used as a case study to demonstrate how the UX design process can be applied to enhance user experience and potentially increase conversion rates.

💡Double Diamond Process

The Double Diamond Process is a design thinking model that consists of four phases: Discover, Define, Develop, and Deliver. It is used in the video to outline a structured approach to tackling complex design problems. The process encourages designers to explore broadly at the beginning (Discover), narrow down to a focused problem (Define), explore solutions widely (Develop), and then narrow down to a final solution (Deliver).

💡Discover Phase

The Discover phase is the first phase of the Double Diamond Process, where designers aim to understand the problem space by gathering information about user and business needs. In the video, this involves conducting user research, analyzing current designs, and examining qualitative and quantitative data to identify pain points and opportunities for improvement.

💡Define Phase

The Define phase follows the Discover phase and is where the team synthesizes findings to determine the specific problems they will address. The video describes this as a collaborative effort involving various stakeholders to prioritize tasks and set product requirements, which is crucial for focusing the redesign efforts on the most impactful changes.

💡Develop Phase

The Develop phase is where designers explore various solutions to the defined problem. The video suggests starting with brainstorming on paper to avoid getting bogged down in digital tools too early. This phase encourages creativity and the generation of multiple design ideas before settling on a direction.

💡Deliver Phase

The Deliver phase is the final stage of the Double Diamond Process, where the focus is on refining the设计方案 to ensure it meets the user and business needs. The video highlights the importance of user testing and iterating based on feedback to ensure the final design is effective. This phase also involves sharing designs with cross-functional teams to understand the broader impact.

💡User Research

User research is a critical component of the UX design process that involves understanding users' needs, behaviors, and pain points. In the video, user research is mentioned as a way to gather qualitative data, which can include surveys, interviews, or observations, to inform the design decisions and ensure the solutions are user-centered.

💡T-shirt Sizing

T-shirt sizing is a method used in agile development to estimate the size or effort of a project or task. In the video, it is mentioned as a way to gauge the scale of the redesign tasks, with 'small' tasks taking one or two weeks and 'large' tasks potentially taking a month or two. This helps in planning and prioritizing work within the team.

💡Competitive Analysis

Competitive analysis is the process of evaluating the competitive landscape to identify trends, strengths, and weaknesses of competitors. In the video, the speaker conducts a competitive analysis of e-commerce apps to gather insights that could inform the redesign of the item detail page, looking for strategies that could be applied to improve the user experience.

Highlights

The UX design process is explained step by step using a mobile app project as an example.

There is no one-size-fits-all design process; it must be tailored to the project, team, and company.

A process provides structure and guidance, especially when facing challenges or uncertainty.

The example project is a redesign of the item detail page for an e-commerce mobile app.

The item detail page is a critical component of e-commerce apps, featuring product information and recommendations.

The design prompt is intentionally broad to illustrate the need for a structured approach to complex design problems.

The Double Diamond Process is introduced as a framework for the design process.

The Discover phase involves exploring the problem space and understanding user and business problems.

Auditing current designs and annotating them can provide insights into what works and what doesn't.

Both qualitative and quantitative data are crucial for understanding user needs and current design performance.

Key metrics to consider include cart additions and conversion rates for recommended products.

Competitive analysis can reveal strategies and features that competitors are using effectively.

The Define phase is about synthesizing findings and deciding on the focus areas for the redesign.

Collaboration with cross-functional teams is essential for feature prioritization and product requirements.

T-shirt sizing is a method for estimating the scale and effort required for different tasks.

The Develop phase encourages broad exploration of design solutions.

Brainstorming on paper before using digital tools can prevent overthinking and refine initial ideas.

The reMarkable 2 tablet is highlighted as a tool for note-taking and sketching without digital distractions.

Sketching different design explorations can lead to innovative solutions for visualizing recommended items.

The Deliver phase involves refining solutions through user testing and feedback.

Iterative design based on user testing and cross-functional team feedback is key to solving real problems.

The final design is the result of multiple iterations and a collaborative effort with the team.

The video concludes with a call to action for viewers to comment on topics they'd like covered in future videos.

Transcripts

In today's video, I'm going to explain what the UX design process is

step by step using a mobile app project as an example.

Just keep in mind that there is no right or perfect design process

because every project and team and company are different.

So you're going to have to tweak the process to do what makes most sense

for you and your team.

But with that said, having a process will give you structure and guidance

as to how to drive your project,

especially when you get stuck and don't know what to do next.

Leaning on a process will be very critical.

And so to help you visualize

how this process can be applied to a real-life project,

we're going to be using an example design prompt: redesign

the item detail page for an e-commerce mobile app.

If you don't know what an item detail page is, just open up your phone

and go to any e-commerce website or mobile app like Target or Sephora

and you'll see a bunch of products being recommended to you.

And if you click on one product, that is what the item detail page is.

It is packed with a lot of content and features.

This design prompt is very vague and ambiguous and broad because there are

so many things you could be working on and redesigning on this page alone.

There are so many components to this page, like the product image,

the minute interactions of the carousel and the zoom functionality.

You could be working on product details and nutrition facts and reviews,

recommended products.

Whenever I get an ambiguous, broad project like this, having a process

helps me get clarity on how to break down

this big design problem and also helps me prioritize these smaller tasks

based on the impact that our team wants to drive.

The process that we're going to talk about

today is called the Double

Diamond Process, which I'm going to draw out in my reMarkable 2 tablet,

which is the sponsor of today's video.

You've probably heard and seen the diagram of the double diamond process.

First step is to go wide and explore your problem space a little bit more.

So this is the Discover phase

where you'll be asking what the user and business problems are.

You also want to think about what is working well, what isn't working well.

So you may want to do an audit

of your current designs and start annotating those things.

You also want to understand qualitative and quantitative data.

So qualitative data can be any user research.

Or maybe you want to do a survey

to understand key pain points that come up from these customers.

Quantitative data is any metric that helps you understand

how the current design is performing.

So if we take this item detail page as an example,

one of the key metrics that we want to look at is how many people

are actually adding that particular item to their cart.

Another metric that we could look at is how many people are adding

the recommended products from this item detail page.

What does the conversion rate look like?

Doing a competitive analysis can also be really insightful.

This is an example of a competitive analysis

that I did for this design prompt.

I'll block out a few hours, I'll screenshot the competitors

and start annotating anything that I'm noticing,

any strategies that I'm seeing that our team can also apply.

Now that you went wide and have a better understanding of your problem space,

you want to narrow down and decide what your team is actually going to fix.

So this is the Define phase and this is where you want to synthesize

your findings and insights from the competitive analysis from user research,

and start deciding and prioritizing what your team is going to work on.

So this is where you really

want to collaborate with your product manager, data scientist, and eng lead

to figure out feature prioritization and product requirements.

This is an example list

of what you can possibly work on for the redesign of the item detail page.

And so my team will go down the list and start prioritizing

what has the highest impact and also start t-shirt sizing some of these tasks.

T-shirt sizing is just another techie way of saying, let's figure out how big

this project is going to be.

So if it's a task that's going to take one or two weeks, we'll call it small.

If it's a larger project it's probably going to take a month or two.

Then you want to go wide again.

So this is the Develope phase.

You've already scoped out what you're going to be working on.

You know the sandbox in which you can play.

So this is where you want to go wide in your explorations of your design

solutions.

What I like to do before jumping straight into Figma is brainstorm ideas on paper

because I don't want to spend too much time overthinking it

and trying to perfect my initial ideations.

I've come to love this reMarkable 2 tablet that feels like paper.

So with reMarkable, you can take notes, convert them into text,

you can read and review documents without any distractions of social media.

I'm trying to cut down on my usage of paper

so this is a perfect digital version of my notebooks

where I don't have to have paper lying around on my desk.

I don't have to carry physical notebooks anymore, and I can access all my notes

in all my devices.

The best thing about it for me is that I can share my screen while I'm in meetings.

So pre-pandemic times I would just draw on a whiteboard

my ideas, and have the team give me feedback.

But now I can do that by screen sharing my reMarkable 2 tablet to my meeting.

Check out the link in my description box to get your own reMarkable 2 tablet.

Here's an example of me sketching out different explorations for visualizing

the recommended items.

Normally we use a horizontal scroll to surface these items.

Maybe we can use a grid so that customers can just vertically scroll.

The final step is to go narrow and refine your solutions.

So this is the deliver phase

where you're going to figure out what is going to be actually shipped.

So this requires a lot of user testing.

I'll usually do two to three rounds of concept testing

or usability testing to ensure that my design solution

is going to have the impact that we initially wanted to have,

and that it's actually solving a real user and business problem.

And based on that feedback, I'll make a bunch of iterations.

This is where I also share

my designs to the broader team, like the comms team, legal team,

a lot of cross-functional partners to better understand how my designs

are going to impact the business and the other aspects of the business.

To wrap this up, if this is what the current design look like,

these are the iterations that I'll probably make

and then I'll either end up with one

or two designs that our team is going to launch.

I'd say I spend majority of my time in the last phase because I make a lot of

iterations based on the feedback from my team and UX research sessions.

I'd love to know what other topics you'd want me to cover.

Please comment below and give it a thumbs up

if you found this video helpful and I will see you later.

Byeeeee