Designing for AR - UX/UI Case Study

UX/UI design case study about my first hands-on work experience with AR (augmented reality). I have created my own design concept for skateboarding and explored the design process behind creating a simple AR view screen.
Finished designs:
1) AR view - dribbble.com/shots/4639340-Sk...
2) Spot Detail - dribbble.com/shots/4697740-Sk...
3) Menu - dribbble.com/shots/4646563-Sk...
4) Design Style - dribbble.com/shots/4640762-Sk...
Timestamps:
0:00 - Hello!
0:09 - Welcome
0:46 - Project topic
0:57 - Project brief
1:39 - Structure
2:10 - Low-fi wireframes
2:59 - Testing AR view
3:37 - Design
5:53 - Wrap-up
-
Newsletter: alesnesetril.substack.com/
Instagram: / alesnesetril
Dribbble: dribbble.com/alesnesetril
Twitter: / alesnesetril

[@zanyar86]

Great work Alex, looking forward to see more of your work.

[@adamballr]

Nice work Ales, congratulations! 🔥

[@betraydan_]

👏🏻 Good stuff Ales. Nice and insightful.

[@AfricanSkywalker]

Nice job Ales! I really like how you incorporated skateboarding.

[@joenotaverage]

Amazing presentation... definitely going to be using this as a guide as I learn to design for AR, thank you mate.

[@faissalabsml4393]

Glad you're back, hope to see more videos. This one was great btw

[@AlesNesetril]

Thanks! Yes, I was experimenting with different formats that could work for me better. I feel way more comfortable now!

[@kevinquiec]

Great to see you back on KZbin Ales! Love the concept of you going through your case studies and sharing your process. Keep up the good work!

[@AlesNesetril]

Thx Kevin! Do you think 5-10 min is good or would you like to see shorter/longer videos as well?

[@kevinquiec]

@@AlesNesetril I think 10 min max is perfect to present a case study yes. Also, if you feel confident enough, having the intro and outro where you talk directly to the camera (= to your viewers) will be nice! Up to you :) I know how time consuming it is to create videos! But will keep following you for sure!

[@AlesNesetril]

@@kevinquiec Good point, thanks a lot!

[@starogre]

@@AlesNesetril i know its been 3 years, but i also like the short presentation. perhaps showing a bit more of a problem statement focus, and any user research that was done before / after the project to know if you were solving the right problems, and how successful you were, would make it perfectly under 10 min - which should be the right amount of time as if you were showing off your case study to a client or employer during portfolio presentation

[@neha1299]

Awesome 👌 thank you for showing us and sharing.

[@designersrestha5041]

ThankYou Very Much , I am proud of you

[@mihirbenipuri]

I've been following you on Instagram for a while now, and I gotta say, this video was great and I'd love to see more of them. As someone trying to get into this field, it's really educational and gave me a lot to think about. Great stuff!

[@AlesNesetril]

Thanks a lot! Glad to hear you find this inspiring :)

[@AlesNesetril]

Thanks, Mihir! I'll try to have some more time for content creation.

[@AlesNesetril]

0:25 Almost burned my face when switched screens from black to white #brightness 🔥

[@muhammadukasha9635]

The face you made, hahaha.

[@StephenCoyle96]

Great video! Thanks

[@tanmayghodekar7428]

amazing case study !!!

[@AlesNesetril]

Thank you Tammay! 😌

[@Ryan12458]

Whoa nice job! What tool did you use to map out the user flow? @1:50?

[@YoussefRina]

I would like to to see more study cases in the near-future, Keep it up dude 🔥

[@AlesNesetril]

New video coming in the next 5 days :)

[@feyisca]

love your video!

[@mohamethseck]

Great video!

[@jogoeire]

Thats a solid video

[@davidpicarazzi]

Amazing video Ales! What would you recommend for someone who wants to get ahead in the UX / UI field by learning how to apply these principles to AR and VR? I want to start learning but really am not sure where to start!

[@YutongXie-zs6sz]

thank you for sharing.

[@ems936]

extremely helpful.

[@Senamjoy]

Nice Work

[@alicevasylenko785]

Dope!

[@stanislavpetrina5306]

Super prístup a pre mňa osobne aj inšpirácia ako odprezentovať design-proces, má to šmrnc :) diky Ales => máš odomňa like, share a budem ťa aj sukskrajbovať samozrejme

[@ameyanabar]

Hello....nice work...liked it. Just one thing...the bubble with no.2 ...when I saw it for the first time my first thought was that there a 2 comments ...so I should tap on it ....until you mentioned of more content on the right. just thought of sharing...but real nice work...cheers!!

[@wise_nut]

Wow, this is an amazing presentation. Very concise ... Love your design!!! Did you use Origami to make the prototype?

[@AlesNesetril]

Thank you! I have only tested Origami for a bit, so I did not make a full high-fidelity prototype there.

[@anendrapotawad9138]

Hey Ales, Great stuff there...! Your Behance Link is broken(at least in my case). Can you have a look at it?

[@Rishi-vw8nw]

Please make more ui ux videos ✨

[@vamsikrishnams3186]

It's very interesting. Could you please tell me a procedure, how you designed it?

[@Rinacks]

nice work!! how long did it take you to do this?

[@shanna9579]

This is great! What tool did you use to design your screens? I am trying to build an AR screen on Figma.

[@AlesNesetril]

I have used Sketch back then, but unfortunately, neither Sketch of Figma allow you to simulate AR (at least from what I know). Try looking into Origami from Facebook :)

[@vaanresvaanica]

Great video! Could you let me know what tool did you use to draw that app flow map?

[@AlesNesetril]

Thanks! It's our team's internal user flows kit :)

[@iamterakaur]

Great exploration. I worked and launched my first AR contest for one of the biggest trade shows in US. I wonder if during your work process you tested the app with users and collected their feedbacks. From my experience, currently, there is very low adoption of AR technologies by a broad audience. I'd be curious to hear about your progress and the response from your audience. Good luck with the project!

[@AlesNesetril]

Hey Tera! I did not involve user testing too much this time since I first wanted to understand how the design process for AR works (aka learn the basics) during this side project. However, from what I have collected/observed I can share at least some info: 1) I did not mention it in the video, but safety is one of the issues I had when testing the concept in real life. Riding a skateboard and using your phone at the same time looked like a good idea, but was definitely dangerous. So, I had to switch my main concept to using the app only when you stand still and want to discover nice places where to go next. (more onboarding would be needed to educate a user about this). 2) Even though the AR view could be a cool feature, which can have real usage, most people still preferred a map view to browse faster. It was one of the points mentioned during the discussions I had. They wanted to have AR as a "secondary" or "nice-to-have" part of the app, not the main app. (which confirms your point about low adoption).

[@iamterakaur]

@@AlesNesetril Thank you for response Ales. Yes, it might take some time till we figure out a better purpose for that tehnology, offering unique value that couldn't be offered through any other channel. And of cause with help of the titans, like Adobe who these days together with Apple, FB and others trying to come up with an adoption strategy. :)

[@RobertsOzolins]

Great video! Off the topic, what headphones are you wearing?

[@AlesNesetril]

Aiaiai TMA-2 🎧

[@RobertsOzolins]

🙌

[@xyz690]

Thanks a bunch!Its really inspiring video.Could you kindly let me know which things should I learn for designing AR UI.?Should I know 3D ,motion graphic design,animation?Coding?I would be grateful if you reply.

[@souljaunt3291]

@AlesNesetril Please answer this

[@kymaniwilson8363]

What software did you use to design the structure with the flow of design?

[@2233233lis]

Bravo from Russia!

[@wrangleroooo]

what software are you using to draw userflows?

[@akvilekrikstaponyte3380]

Hey there, great video, thank you! Question - what kind of tool did you use to create user flow 1:55?

[@AlesNesetril]

Hey Akvile, it's one of our internal UI kits for Sketch :)

[@akvilekrikstaponyte3380]

@@AlesNesetril thank you!

[@saichand1940]

Don't you that bubble on the top right looks like a chat icon...i was expecting it to be a chat icon and then you said it was for seeing the ppl out of the screen which completely blew up my mind...would it be better if you could have used something like a curved arrow?

[@AlesNesetril]

I think that could work as well. Goot catch!

[@Hejtaeddi]

Skateboarding, case study and all of it with ar *_*

[@akrammd3948]

very good bro i'm from algerian and i like your work

[@AlesNesetril]

Cheers to Algeria!

[@akrammd3948]

@@AlesNesetril yes bro i do your awsome why you don't send me on email : [e-mail]

[@gauravidesigns]

Which tools did u used to create those designs . I think it is figma and how did mimic AR in figma

[@AlesNesetril]

I have used Sketch, and then made all of the animations in After Effects. Unfortunately, you can't simulate AR in one of these, as I am saying in the video, so I also tried Origami Studio for a bit 👍

[@gauravidesigns]

@@AlesNesetril thanks for your reply bro .Love u bro . Keep making amazing content

[@AllegedlySpiffy]

What did you use to create the user flows? Sketch?

[@AlesNesetril]

That is correct :)

[@AllegedlySpiffy]

Ales Nesetril would you mind sharing the kit? I love the clean look :)

[@AlesNesetril]

@@AllegedlySpiffy It is internal only at the moment. But maybe later :)

[@ramithrathnayaka8551]

She will create intuitive and functional UX UI designs. a freelance UX/UI designer who translates your business requirements into modern, professional

[@adrianacosta8847]

Is your discord done? I can't find it.

[@AlesNesetril]

Yep, I have closed it and moved back to IG, where it was more convenient for the audience to reach out to me :)

[@adamwallen4771]

3:42 'Heavy like your mom' Straight savagery 😂😂 Awesome video Ales!

[@AlesNesetril]

haha, little easter egg

[@gauravidesigns]

I am also a hands on learner bro

[@skandhable]

what software did u use?

[@AlesNesetril]

For what part? :)

[@skandhable]

@@AlesNesetril the UI design for the actual AR

[@AlesNesetril]

@@skandhable Sketch app

[@skandhable]

@@AlesNesetrilwould it be possible to do this in adobe xd as well?

[@AlesNesetril]

@@skandhable Of course :) Both tools are pretty similar

[@gauravidesigns]

u have a girly voice

[@AlesNesetril]

I do, haha :D

[@ElementaryKnowledge3000]

Dope!