UX Case Study: Spatial Design
With the Spatial UI for Apple Design Pro, designers can transcend the limitations of traditional 2D interfaces and enter a world of three-dimensional creativity. Built specifically for Apple devices, this innovative spatial UI brings a new dimension to the design process, offering new levels of immersion and interactivity.
Imagine being able to manipulate your design elements in a virtual space, using natural gestures and movements to transform, resize, and arrange your assets. With the Spatial UI, you can navigate your design canvas in three dimensions, gaining a deeper understanding of the spatial relationships between different elements and bringing your creations to life with a newfound sense of depth and realism.
SETTING UP
Traditional virtual meeting apps lack the immersive and engaging experience required for effective collaboration among remote teams hindering productivity and stifling creativity. My idea was to design a virtual meeting platform that facilitates collaboration for designers, developers and business professionals.
STEP 1: Immersion in the case study
I wanted to avoid this feeling like a dribbble shot and instead decided to make it in the context of my own space. Grounding the entire design process in YOUR own space makes it look MORE authentic.
That authenticity makes the case study a lot more interesting because it’s not prettified on purpose. So, I took a photo of my living room.
PROBLEM STATEMENT
There is a growing need for a virtual meeting platform that leverages spatial UI design to break free from the confines of flat interfaces, enabling users to interact in a three-dimensional environment that fosters natural communication, seamless collaboration, and dynamic presentations.
SOLUTION
By addressing these limitations, I aim to introduce “CollabSpace” a cutting-edge virtual meeting platform designed to revolutionise the way professionals collaborate and connect remotely.
GOALS
1) To foster seamless collaboration among remote teams by providing a platform that encourages active participation, effective communication, and shared interaction within a spatial UI environment.
2) To create an engaging and immersive meeting experience by capturing participants attention and promoting active involvement in discussions and brainstorming sessions.
3) To allow users seamlessly share ideas, documents within the spatial UI. Thus, enhancing productivity during meetings.
4) To provide a platform that stimulates creativity through features like interactive whiteboard walls.
5) To prioritise security and privacy of participants data and conversations within the virtual meeting platform, implementing robust encryption, access controls.
6) To design an intuitive and user-friendly interface that allow users to navigate effortlessly and also continuously gain feedback from them for improvement and provide an optimised experience.
STEP 2: Planning
Now, this is the time to show off my drawing skills for which I grabbed my sketchbook!!
I started with drawing a few sketches and decided not to add too many layers as it increases the cognitive load of users and won’t make the experience better. I decided that most of the experience should remain flat.
As stated in the spatial design principles that the important information that you want to display should be in the most centre so that people can comfortably view the content.
So, with keeping in mind these principles I started with a single window i.e the main screen to view the participants and the host.
Then I sketched out the vertical tab bar for main navigation that displays various icons that will help the participants and host to navigate seamlessly through this spatial UI platform.
Then I imagined that when you enter a particular category of the navigation tab you get a fully immersive experience. The room dims around you. You swipe through various screens but the main focus is always on the centre.
Because people primarily interact with their eyes and hands on this platform. I also thought of placing my designs in front of the user keeping in mind the ergonomics ensuring that the content is placed correctly. Also, because of the neck’s range of motion it’s easier for most of the people to move their head right and left rather than up and down. So, the placement of my design was very important.
MID-FIDELITY DESIGNS
After drawing some sketches I thought of turning them into mid-fidelity designs. Have a look!
I thought of not overwhelming the users by providing too much information on the main screen so I kept it clean and simple by showing all the participants on the screen and also providing side bars that will offer the users different functionalities like chat section, whiteboard, documents sharing option, record button and a calendar to keep a track of meetings.
When fully focused on a particular category the important information should be displayed in the centre and the card should come a bit closer while dimming the other screens adjacent to it. This will work differently for the participants and the host.
As for the participants, there can be various card screens where they view a profile or they want to chat or they want to share a document/screen or when they want to use whiteboard for a particular session. Also, the participants can take a view at the calendar for the schedule of the meetings.
As for the host, there can be different card screens where they can see the list of all participants and also giving them access to perform certain functions in the meeting. I designed relevant screens if the host wants to chat or wants to share his/her screen or wants to record the meeting or can take a view at the calendar for scheduling a particular meeting.
FINAL DESIGN
After creating mid-fidelity designs I moved on to the final designs of this platform. So, I pasted my glassmorphic panels onto my room photo.
DETAILS MATTER
As my living room has windows on the left so to make it natural and real I made sure that my icons and screens have that subtle shadows from the corners as it will tell the user where the light is coming from. So, these little details matter as we interact with these designs.
THOUGHTS 💭
Being curious about this whole spatial UI thing I wanted to explore more about it and decided to create a case study out of it. And yes, I have to say that I found the spatial UI design interesting. By focusing on the entire experience from the main idea to the actual design I was able to learn so many things like the principles of spatial design how to focus more on the details like the ergonomics of design, subtle shadows, the icons, the text and how to enhance the experience of the users by keeping the overall layout of your design simple and clean.
This entire case study is definitely not about being perfect but it’s about exploration and learning from this new concept. The point is to know the principles and how things will work in the future. But for now, we can push our limits and be a little more creative today even if it sucks!
THANK YOU FOR READING!!!
I am open for collaborations and work, feel free to connect with me. Your feedback and suggestions are highly appreciated.
