I`m spending the last few nights before WWDC designing the new interface for so I thought Id share this quick journey I went through where I learned much about desiging for AR apps. This thread shows my process into going from the old UI to the newer UI.
This is one of the top apps Im looking forward to this year
And thats all! Hope y`all had fun watching my thought process. I`d love to hear from you if you`re a designer or developer in the AR space. Dont forget to follow to see where else this app goes and how it will push forward what AR apps can be capable of
TLDR Designing for AR apps: Always show as much of the camera preview as you can Blurs and opacity-controlled views are your best friend Think about the story your app tells and how each screen helps users flow through this
Last but not least, I had to add a quick profile button in the top right corner to avoid crowding the bottom portion and presto! For good measure, I even decided to test the new UI on a variety of different backgrounds to test different camera conditions. was almost there, but I needed to make these buttons look less tab-y. I also needed an area where the app could demonstrate personality to users by instructing them of what to do or encouraging them of which action to take (move the phone, scan the object, etc). Airgift and other AR-first apps, its crucial that everything flow through the camera. The camera should be the main hub through which the user goes through. So, I reduced the number of tabs I had and turned them into actionable buttons. Enter opacities and background blurs. came navigation. At first, I went for a tab bar but it felt wrong. In a tab bar, every tab represents a separate screen with a completely different meaning. But that necessarily wasn`t my case for Airgift or a lot of other AR apps. old design was also unclear as to what this screen was and how it fit into the app. My new UI needed a title letting users know they were home. But to display content, I still had to follow the previous lesson without blocking the preview. Enter view opacities! the first designs UI was great, the UX suffered. When it comes to AR, you want to keep as much of your cameras preview visible. The primary focus should always be the augmented content in your reality. The more you can see, the better. So I removed everything.
