Information Architecture & Sketching for UI/UX Projects | Behind the Design Part 4

Summary

In this fourth installment of a design series, the creator shares the process of developing an app and case study for a smart diffuser concept. After conducting research and drawing conclusions from interviews, the focus shifts to identifying key touchpoints for interaction and mapping out the app's information architecture. The creator emphasizes the iterative nature of sketching and UX writing, refining the app's interface through continuous testing and reiteration. Viewers are encouraged to engage with the project on Behance and look forward to the next video on wireframing.

Takeaways

• 📹 The video is part of a series on the behind-the-scenes process of creating an app design and case study for a smart diffuser concept.
• 🔍 The creator suggests watching the previous videos and checking out the project on Behance for more context before proceeding with this one.
• 📝 The series has covered research and drawn conclusions from interviews, leading to a preliminary feature list for the app.
• 📍 The importance of identifying touch points for interaction design is emphasized, including various digital and physical interfaces.
• 📲 The script mentions different types of touch points such as mobile apps, web apps, Apple Watch apps, websites, voice assistants, notifications, and augmented reality.
• 🛠️ The process of information architecture is introduced as a method to map out the flows of interaction and organize features within the app interface.
• 🔄 The final information architecture may differ from initial sketches and requires testing and iteration to refine.
• 📑 UX writing is part of the process, where decisions on naming and labeling features, such as 'rituals' and 'benefits', are made.
• ✏️ Sketching is presented as a crucial and fun step for exploring the app's look and functionality, with the emphasis on iteration rather than perfection.
• 💡 The creator shares personal experiences and challenges faced during the sketching process, such as hitting roadblocks and needing to adapt quickly.
• 👍 The video concludes with an invitation for viewers to engage by liking, sharing, and subscribing for upcoming content on wireframing.

Q & A

What is the main focus of the video series?

The main focus of the video series is to show the behind-the-scenes process of creating an app design and case study for a smart diffuser concept.

What is the significance of the 'rituals' tab in the app's information architecture?

The 'rituals' tab is one of the final four tabs chosen for the app's information architecture, which likely represents a key feature or interaction point within the app related to the smart diffuser's functionality.

Why is it important to identify touch points in the design process?

Identifying touch points is important because they represent different points of interaction that are crucial for designing a successful user experience, such as mobile apps, web apps, voice assistants, and physical products.

What does the term 'information architecture' refer to in the context of app design?

In app design, 'information architecture' refers to the process of mapping out the flows of interaction, organizing features and information in a structured way to guide the user interface design.

How did the creator of the app design approach the initial sketching phase?

The creator approached the initial sketching phase by starting with rough sketches, exploring different ideas, and iterating on key moments of the app's user experience without focusing on pixel-perfect designs at this stage.

What was the iterative process like for the app's information architecture?

The iterative process involved initial guesses on the most successful features, followed by sketching and designing, which led to changes and refinements in the information architecture based on testing and reiteration.

Why is it recommended to give the first three videos a watch before this one?

It is recommended to watch the first three videos to provide context and continuity to the series, ensuring viewers have a comprehensive understanding of the app design process from the beginning.

What is the role of UX writing in the information architecture phase?

UX writing plays a role in the information architecture phase by helping to make decisions on the naming and labeling of features and interactions, such as the choice of the 'benefits' tab name over alternatives like 'health' or 'progress'.

How long should one spend on sketching during the design process according to the video?

According to the video, one should spend more than just one day on sketching, allowing time for iteration, taking breaks, and revisiting sketches with fresh ideas to refine the design.

What is the next step in the app design process after sketching, as mentioned in the video?

The next step in the app design process after sketching, as mentioned in the video, is wireframing, which will be the focus of the following video in the series.

Outlines

00:00

📱 App Design Process Overview

This paragraph introduces the fourth installment of a video series focused on the app design and case study for a smart diffuser concept. The creator encourages viewers to watch previous videos for context and to check out the project on Behance. The video dives into the next steps after completing research and drawing conclusions, which include identifying touch points for interaction and mapping out features using information architecture. The speaker emphasizes the importance of considering various touch points such as mobile apps, web apps, smartwatches, voice assistants, notifications, and physical products. The paragraph concludes with the initiation of the information architecture process for the mobile app, highlighting the iterative nature of design and the importance of sketching and UX writing.

05:01

🔍 Deep Dive into Sketching and Iteration

The second paragraph delves deeper into the sketching phase of the app design process. The speaker discusses the iterative nature of sketching, emphasizing the importance of time and practice in refining design ideas. They mention the process of sketching, hitting roadblocks, and quickly iterating to find solutions. The speaker also suggests giving oneself ample time for sketching, taking breaks, and revisiting sketches with fresh ideas. They acknowledge the difficulty in conveying the personal and rapid cognitive process of sketching and invite viewers to ask specific questions about it in the comments. The paragraph ends with a call to action for likes, shares, and subscriptions, and a teaser for the next video about wireframing.

Keywords

💡App Design

App design refers to the process of creating the visual and interactive elements of a mobile application. It is a crucial part of user experience (UX) design, focusing on the aesthetics, usability, and functionality of an app. In the video, the creator discusses the development of a smart diffuser app, emphasizing the importance of a well-thought-out design to enhance user interaction and satisfaction.

💡Case Study

A case study is a detailed analysis of a specific instance or situation, often used in research or teaching to illustrate a concept or principle. In this context, the smart diffuser app serves as a case study for the video series, allowing the creator to demonstrate the app design process from research to implementation.

💡Information Architecture (IA)

Information architecture is the organization of information on websites, mobile apps, and other digital platforms to make it easy to find and use. In the video, the creator uses IA to map out the features and interactions of the app, ensuring a logical flow of information that enhances the user experience.

💡Touch Points

Touch points are the various points of contact between a user and a product or service. In the script, the creator identifies different touch points such as mobile apps, web apps, and physical products, which are essential for a comprehensive design strategy that covers all aspects of user interaction.

💡Smart Diffuser

A smart diffuser is a device that typically disperses essential oils or fragrances into the air and can be controlled or monitored remotely using a smartphone app. The video's case study revolves around designing an app for a smart diffuser, highlighting the integration of technology with everyday objects to improve user convenience.

💡User Research

User research is the process of gathering insights about users' needs, preferences, and behaviors. In the video, the creator mentions conducting interviews as part of the research phase, which informs the design decisions and feature list for the smart diffuser app.

💡Sketching

Sketching in the context of app design is the initial phase of visually representing ideas and concepts on paper or a digital medium. The creator emphasizes the importance of sketching as an iterative process to explore different design possibilities for the app's interface and user interactions.

💡UX Writing

UX writing is the practice of creating and refining the text within a user interface to support user experience. The video mentions the creator's decision-making process for naming tabs within the app, such as 'Rituals' and 'Benefits,' as examples of UX writing that guide the user's understanding and interaction with the app.

💡Wireframing

Wireframing is a design technique used to create a visual guide for the layout of an app or website. It is a more detailed step than sketching and precedes the visual design phase. The video ends with a teaser for the next part of the series, which will focus on wireframing as the next step in the app design process.

💡Iterative Process

An iterative process is a series of repeated cycles of improvement or refinement. In the video, the creator describes the design process as iterative, emphasizing the importance of testing, retesting, and making adjustments to the app's information architecture and design elements based on feedback and insights.

💡Notifications

In the context of app design, notifications are alerts or messages that inform users of updates or actions within the app. The creator identifies notifications as a key touch point for the smart diffuser app, indicating the importance of timely and relevant communication to enhance the user experience.

Highlights

Introduction to part four of a series on creating an app design and case study for a smart diffuser concept.

Recommendation to watch previous videos and check the project on Behance for context.

The importance of identifying touch points for a successful user experience.

Examples of different touch points including mobile apps, web apps, voice assistants, and physical products.

The process of selecting key touch points for the project, such as the diffuser, mobile app, and notifications.

Introduction to information architecture as a method for mapping out app features and interactions.

Explanation of the common structure of mobile app tabs and their role in information architecture.

The evolution of the app's information architecture through testing and iteration.

The significance of sketching as a preliminary step in app design, allowing for exploration and iteration.

Advice against striving for pixel perfection in the initial sketching phase.

The iterative nature of sketching and the importance of giving oneself time to explore different ideas.

The personal and rapid cognitive process involved in sketching and its challenge to convey.

Invitation for viewers to ask specific questions about the sketching process in the comments.

A teaser for the next video in the series, which will focus on wireframing.

Encouragement for viewers to like, share, and subscribe for more design insights.

A sign-off and anticipation for the next video in the series.

Transcripts

[Music]

hey everyone and welcome back to another

video

today is part four in the series where

i'm showing you the behind the scenes of

how i created this app design and case

study for

a smart diffuser concept if you missed

the first three videos i'd recommend

giving them a watch before

you move on to this one and i'd also

recommend you check out the project on

behance

for more context if you haven't seen it

yet okay without further ado

let's get into it

so in the last couple videos we planned

for and completed our research and drew

some conclusions from

our interviews and so now that we have a

little bit of a feature list

and things that we want to include in

the app now we're going to go through

and start mapping them out using

information architecture

but first what we need to do is think

about

all of the touch points that are really

important to make this experience

successful

and what i mean by touch point is what

different points of

interaction are important to design

for in this experience and so this could

be

a lot of different things some including

an app like a mobile app a web app an

app on an

ipad an apple watch app those are all

different touch points

also a potential touch point is a

website

maybe voice like alexa or

the google home notifications and maybe

even augmented reality

and lastly of course if there's a

physical product involved

then that is also a really important

touch point so figure out for your

project

what are the important touch points that

you need to design for

for me it was the physical product the

diffuser

the mobile app as well as the

notifications

okay so once you've identified the

important touch points and

figured out which ones you're going to

focus on for the project

then it's time to start the information

architecture

so this is basically how you map out the

flows

of an interaction in a very basic way so

what features and what information are

in what

you know parts of the interface so with

the mobile app it's common

to have the first level be the tabs

um which you know you would normally

find on the bottom of an app

and so i with a lot of moving things

around

i settled on these final four tabs which

are rituals diffuser benefits

and settings and to be fully transparent

this information architecture is not

what i had originally put together

in this phase whenever i was coming up

with my features

and um sketching out the ia in the very

beginning it looked very

different from this and only after

testing and reiterating

did i come up with this final

information architecture

so you just want to take your best guess

of what's going to be the most

successful

and then once you start sketching and

designing then

this is definitely going to change but

it still helps you to

map out what all of the important

features and interactions are

so that you can move on to the next step

of sketching

it's also a great opportunity to start

doing a little bit of ux writing

on a very basic level so for example

i decided to call these rituals

i decided to call the benefits tab

benefits instead of

health or progress or anything like that

so decisions like that

can start to be made during this step in

the process and next once you have a

first draft of your information

architecture web

then you can start some sketching so

this in my opinion is where it gets

really fun you can start to think about

how you want this app to look and

function

and it can be really really rough you do

not have to get into

making this pixel perfect or anything

like that in fact you shouldn't it's

really just a waste of time at this

point

so get out some sketching paper this is

the page that i use i will link it below

if you would like

to print these out and use them for me

it just saves me a ton of time so once i

printed those out i printed out a ton of

them so i could just kind of go to town

and keep sketching and iterating on

some different key moments the first one

that i started

sketching with was creating a new ritual

and as you can see from these sketches i

have a ton of things crossed out

there are millions more pages that i

didn't use and i'm not showing

this really is an iterative process and

so don't be hard on yourself when you're

sketching it's all about exploration and

seeing what works

so what happens to me a lot of the time

is i'll be sketching and then i'll hit a

roadblock where i'm like wait no

this is not going to work it has to be

like this because you have to be able to

get to this screen or you have to be

able to do this

this is all stuff that's happening

really quickly throughout my brain

as i'm sketching and it really just

comes with

practice and not just practice in

general as a designer

but practice specifically with this

design problem

so give yourself a good amount of time

for

sketches i would say more than just one

day

i would sketch for a while set them down

take a break and then the next day come

back to them

see what works and what's not working go

back with some more ideas

sketch again and just keep doing that

with all of the different

moments or flows that um you're going to

be tackling

so like i said since this is such an

iterative process and a lot of it is

happening

like really quickly from my brain to my

hands as i'm sketching and back and

forth

it is a little bit hard to convey the

process that i go through

um in a really detailed way so if you

have any specific questions about

sketching

i encourage you to write them down below

in the comments and i would love to

answer them or maybe

show you something that might be helpful

but again it is hard to really convey

the exact

mindset that i'm in whenever i'm

sketching it's just something that's

really personal and i think if you're a

designer you totally get that

but i would love to help out if you have

specific questions so

leave them down below all right guys

that's it for part four if you found

this video helpful i would love it if

you would give it a thumbs up

and share it with a fellow designer and

make sure you're subscribed because

next week is going to be a video all

about wireframing thanks so much for

watching and i'll see you in the next

one

bye