Step 1 — immersion in the case study
To effectively analyze the mixed reality app design case study, let's ground the entire design process within the context of your living room. This approach adds authenticity and makes the case study more relatable to your own experiences.
Project Overview: The mixed reality app design project aimed to create an innovative application that seamlessly blends virtual and real-world elements within the context of your living room. The goal was to leverage mixed reality technology to enhance your everyday experiences and interactions within your personal space.
Living Room Context: To provide a genuine and unfiltered perspective, we will incorporate a photo of your living room into the case study. This will allow us to visualize how the mixed reality app design fits within the existing environment, regardless of its aesthetic appeal. By embracing the authenticity of your living room, we can explore the design process more organically and capture the essence of a real-world application.
By incorporating your own space into the case study, we can ensure a more genuine and compelling exploration of the mixed reality app design, highlighting its practicality and impact on your everyday life. Let's continue to the subsequent steps to delve deeper into the design process, challenges, and outcomes of the project.
Step 2: Planning
Now that we have established the importance of authenticity and avoiding superficial design choices, let's dive into the planning phase of the mixed reality app design process. While keeping in mind the principle of reducing cognitive load for users, we will begin by focusing on creating a user-friendly and streamlined interface.
Sketching the Initial Design:
To begin the design process, I utilized a pen and some paper that I found laying around to wip up a Sketch, taking into account that most of the experience should remain flat to minimize cognitive load. Adding excessive layers on the z-axis can overwhelm users and hinder the overall user experience. With this in mind, I started by sketching a the search option leading into the splash App viewer window that serves as the primary view within the mixed reality app.
Purpose of the splash App Window:
The splash window serves as the central template for users to explore and interact with their favorite social Apps. It provides a clear and focused interface, allowing users to navigate through the app's functionalities seamlessly. By keeping the initial design simple and uncluttered, the user's attention remains on the content and the mixed reality elements that will be integrated later.
Step 3: Mid-Fidelity Design
With a clear plan in place, the next step in the mixed reality app design process involves translating the initial sketches into mid-fidelity designs. This stage allows us to evaluate how the main screens work together and refine the overall user experience.
The in-app viewer in the mixed reality app designed for the social media sector features three windows that provide an immersive and interactive experience for users. Here is a brief description of each window:
Feed/Discover Window:
The Feed/Discover window serves as the primary hub for content consumption. It presents users with a curated feed of posts, images, videos, and mixed reality experiences shared by other users within the social media app. This window allows users to scroll through and discover a wide range of content from their network and beyond, enabling them to stay updated and engaged with the latest trends and interests.
Profile Window:
Adjacent to the Feed/Discover window, the Profile window showcases the user's personal profile and acts as a centralized hub for their own content and activities. It displays the user's bio, profile picture, and a collection of their own posts, allowing others to explore their contributions to the social media app. Users can also manage their settings, privacy preferences, and view statistics related to their profile engagement.
Inbox Window:
The Inbox window serves as the communication center within the social media app. It displays messages, notifications, and interactions with other users, facilitating seamless and real-time communication. Users can send and receive messages, respond to notifications, and engage in private conversations, ensuring smooth and efficient communication within the app's social network.
Grid of Designs:
The main screen presents users with a grid layout, showcasing various designs created within the app. Each design is represented as a card or thumbnail, providing a visual preview of the project. The grid layout allows users to browse through multiple projects efficiently.
Author's Name and Photo:
To add a personal touch and provide context, the author's name and photo are displayed alongside each design. This feature helps users associate the designs with their respective creators and adds a sense of authenticity to the app.
Like Functionality:
Users have the ability to like or appreciate a particular design. This feature allows them to express their preferences and bookmark designs they find interesting or inspiring. The like functionality provides a sense of engagement and allows users to curate their own collection of favorite designs.
Filter Options:
To enhance usability and ease navigation, a filter box is incorporated into the main screen. This filter box enables users to toggle between viewing all projects or filtering the display to show only their liked designs. By offering this option, users can conveniently focus on designs they have appreciated or explore the entire collection.
By including these elements in the main screen design, the app provides a visually pleasing and user-friendly interface for browsing and interacting with designs. The combination of the grid layout, author details, like functionality, and filter options enhances the overall user experience, making it intuitive and customizable to individual preferences.
Material Exploration
Phase
By incorporating Glassmorphism and adhering to Apple UI Kit standards, I adopted a unique design approach. This allowed me to create a visually captivating interface within a concise word count.
Drawing inspiration from Glassmorphism, I embraced transparent and blurred elements to add depth and elegance. However, I aimed to surpass generic implementations. By infusing my own creative ideas, such as experimenting with color schemes, customizing transparency levels, and exploring alternative textures, I achieved a distinctive visual appeal.
While adhering to Apple UI Kit standards for consistency and user familiarity, I personalized the design to strike a balance between familiarity and innovation. This approach resulted in a captivating and user-friendly interface that resonated with users while offering a fresh and unique experience.
Search option
and App Demonstration
With a personal touch and a focus on improving user experience, I implemented the blur effect and adjusted the hub widget size to emphasize important features, such as the search option. This design decision stemmed from a thoughtful consideration of usability and creating engaging interactions.
To draw attention to the search functionality, I leveraged the blur effect. By delicately blurring the surrounding elements when users activate the search feature, it creates a visually distinct area that naturally guides their gaze towards the search bar. This intentional visual separation enhances user intuition and allows for effortless discovery of the search option, making it a seamless part of their interaction.
Additionally, I increased the size of the hub widget when utilizing the search feature. This customization aimed to offer users a more immersive and enjoyable experience by providing ample space for displaying search results and relevant suggestions. The expanded hub widget offers a larger preview of content, empowering users to explore search-related options with ease and efficiency.
Through these personalized design choices, I prioritized the user's needs and desires. The blur effect and adjusted hub widget size work in harmony to enhance usability and engagement, ensuring that users can effortlessly access and navigate through search-related functionalities. By creating an intuitive and visually appealing design, I aimed to elevate the overall user experience and foster a sense of delight and satisfaction.
Tiktok Demo
In designing the in-app view for a TikTok-like application, I incorporated three view windows: Feed/Discovery, Profile, and Inbox. Here is a detailed explanation of the thought process behind each window and the desired outcome:
Feed/Discovery Window:
The Feed/Discovery window serves as the primary view where users can explore a curated feed of videos from various creators. The thought process behind this window was to create an engaging and personalized experience for users. By implementing an algorithm that analyzes user preferences, viewing history, and engagement patterns, the feed displays a tailored selection of videos that align with the user's interests. This approach maximizes user satisfaction by presenting content they are likely to enjoy and discover new creators they may find interesting.
Profile Window:
The Profile window is designed to provide users with a dedicated space to showcase their own videos, bio, and engagement metrics. The thought process behind this window revolves around empowering users to express themselves and build their online presence. Users can customize their profile with a profile picture, bio, and featured videos, giving them a platform to share their unique content and connect with a wider audience. Additionally, engagement metrics such as followers, likes, and comments are displayed, fostering a sense of accomplishment and social validation.
Inbox Window:
The Inbox window serves as the communication hub, allowing users to receive and send messages, notifications, and video interactions. The thought process behind this window was to facilitate seamless communication and community engagement. Users can receive direct messages from other users, engage in video comments and replies, and receive notifications about interactions on their own videos. This fosters a sense of connection and encourages social interaction within the app's community, making users feel valued and engaged.
The desired outcome of these three view windows is to create an immersive, personalized, and socially interactive experience for users. The Feed/Discovery window ensures users are exposed to enjoyable and relevant content, the Profile window empowers users to express their creativity and build their online presence, and the Inbox window facilitates seamless communication and community engagement. By thoughtfully designing each window, the outcome is an app that keeps users entertained, connected, and fulfilled, fostering an active and vibrant user community.
Thoughts...
in conclusion, the app offers a captivating and immersive experience, keeping users entertained and connected. However, the journey doesn't stop here. To further improve, it's crucial to continually innovate and explore new ideas. By actively listening to user feedback, embracing emerging technologies, and staying ahead of trends, we can enhance the app's features and introduce exciting new functionalities. Together, let's push the boundaries of what's possible and create designs that continues to inspire and delight users.
Shout out!
This design was inspired by Michal Malewicz's work, serving as a foundation for innovation and improvement. By building upon his design, I infused my own creativity and enhancements, resulting in a unique and refined iteration that surpasses the original.