The UX Design Process explained step by step with a mobile app project
Summary
TLDRIn 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
🔍 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.
📈 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.
Mindmap
Keywords
💡UX Design Process
💡Mobile App Project
💡Item Detail Page
💡Double Diamond Process
💡Discover Phase
💡Define Phase
💡Develop Phase
💡Deliver Phase
💡User Research
💡T-shirt Sizing
💡Competitive Analysis
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
関連動画をさらに表示
UI/UX 🇮🇩 | Lesson 01 | 04 - Design Thinking
My UX Portfolio Presentation | Hired at Amazon and IBM (Springboard Graduate)
Information Architecture & Sketching for UI/UX Projects | Behind the Design Part 4
The Ultimate UX Design Process | Step by Step Guide From Research to Prototype & Beyond
What is UX Research? | Google UX Design Certificate
What is User Experience (UX) - اردو / हिंदी [Eng Sub]
5.0 / 5 (0 votes)