OCT - DEC 2022
NAVI-SPACE
Designing and prototyping futuristic speculative design.
-
Speculative Design
-
Innovative Conceptualization
-
Future-Focused Problem Solving
Product Design
UX Design
Visual Design
Project
Prototyping
Individual
INTRODUCTION
NAVI-SPACE is a speculative mobile application designed to provide real-time location sharing for users and their contacts while delivering alerts for potential threats, shaping a future where space exploration seamlessly intertwines with safety.
This project was an individual work, where I created Navi-Space through speculative design. Later on, I collaborated with 3 other designers to create a shared universe for the primary and secondary users and showcase the phone story.
TEAM
Concept Development
UI/UX Designer
MY ROLE
DURATION
Oct - Dec 2022
2.5 months
TOOLS
Figma
Miro
Davinci esolve
BACKGROUND
Concept
To think outside the box and brainstorm app designs, Things of the Future! was used to generate random prompts. Then using the prompts, I created an app story, explaining when, where, and how it would be used.
Following are my generated prompts and my App Pitch:
100 years
Initial App Pitch:
"
In the year 2122, humanity seeks refuge on the Moon. With younger generations' curiosity leading them into unknown territories, safety is paramount. Moonquakes, infectious fog, meteoroids, and the unknown lurk. To ensure safety, we introduce NAVI-SPACE—a mobile app with GPS tracking stickers. Parents can monitor their children's locations, and a speed-dial feature ensures contact even if their device is lost. Easy to use, simply attach the sticker to clothing, pair it with the app, and stay connected in real-time.
"
Targeted User Evolution
Initial Users: PARENTS
Navi-Space expanded user base.
Now caters to parents, senior caregivers, and pet owners.
Personas
Our team developed three personas - one primary and two secondary. The primary user, Mousy, utilizes all four applications in our universe. The secondary characters, Ratatouille and Puppy, contribute to the storyline of Mousy's everyday experiences.
PRELIMINARY DESIGN
Wireframes & Annotations
View 1 - Start Screen
The Start screen features an immersive Moon map with the user's current location marked. Users can explore by swiping in any direction, with intuitive gestures guiding their journey. Zooming in for detail or out for a wider view is effortless
Drop-down Menu:
-
Add/Remove Stickers: allows users to add family members to the app to track them
-
Sticker Settings: general sticker setting to change vibration, ringtone, light flickers
-
Sticker Mechanics: helps users visualize the sticker's mechanics and see if the sticker has been damaged.
-
Account Profile: user profile setting
User icon:
Identifies the user on the Map, showing their current location on the map.
Bottom center of the app screen (left to right):
-
Locate all stickers: Allows users to view all stickers on the map when clicked.
-
location pin-point: shows users their current location on the map.
-
View “danger-zone”: Allows users to see current danger areas on the map and analyze if they are currently in a dangerous area
View 2 - Locate All Sticker
The second view offers a full range of sticker options to locate contacts. Users can interact with the map using familiar gestures, highlighting and selecting contacts with a simple click. This feature empowers users to track and connect with their contacts, enhancing awareness and connectivity within the app.
Sticker icon:
Once the user clicks on ‘view all stickers’, sticker icons appear on the map to show
where other users (family members) are located. The stickers have tiny lables on
top of them to identify the user of the sticker.
If the user clicks on a specific sticker, it opens a small pop-up screen that provides details on the user of the sticker and provides additional options:
-
Route: creates a route for the user to reach them
-
Call: allows the user to call the sticker owner
Bottom main bottom buttons:
The bottom buttons are the same as the first screen except the ‘Locate all Sitckers’ is replaced with a ‘Back’ button to disable the ‘Locate all Stickers’.
View 3 - Danger Zone
When users access the Danger Zone view, they gain a powerful tool to assess lunar safety. It displays the moon map, color-coded for quick hazard assessment. This user-friendly system enhances situational awareness, helping users make informed decisions, maximize safety, and explore confidently within Navi-Space
'Locate All Stickers' Buttons:
The ‘Locate all Stickers’ and the pin-point work the same in this view, the users would have the additonal information of the danger levels in the area for their knowledge.
Interactive Map:
Map of the moon with the color-coded area to indicate danger levels in all regions of the moon. Red color-coded areas indicate danger. Yellow indicates medium danger levels. Unshaded areas indicate normal/safe areas.
'Normal-Mode' Button:
The ‘View Normal Mode’ exits out of the ‘Danger-zone view‘
View 4 - Sticker Settings and Mechanics
The Sticker Settings and Sticker Mechanics share a dynamic screen with easy mode-switching via buttons at the top. Sticker Settings allow customization, including ringtone, vibration, and light settings, providing users control. In contrast, Sticker Mechanics offers a detailed view of sticker components, highlighting the battery, GPS chip, and more. It provides status feedback and
damage alerts for user convenience.
Sticker Settings and Stickers Mech.:
Buttons for Sticker setting and Sticker Mechanic are at the top of the screen and switch depending on what the user chooses.
Sticker:
The sticker is the main display in both settings and mechanics screens. Users can interact with it. The sticker has details listed of each part on the sides and the condition they are in.
Additional Screens
the final 2 screens are for the user's contents (left), and for the user's account page (right). The contact screen allows the user to add contacts to their device for each location tracking while the accounts page allows the user to input their own personal information and pair their device to the tracking stickers.
Brand Identity
Mood Board
When designing Navi-Space, I aimed for a captivating, futuristic look. Bright neon icons set against a dark grey backdrop bring an energetic vibe. This combination adds dynamism, immerses users, and aligns with the futuristic theme.
The following are references for the mood
By blending these elements, I crafted an interface for Navi-Space that visually captivates, highlighting its futuristic and adventurous essence. The use of bright neon icons against a dark backdrop enhances both visibility and usability, resulting in a seamless and stunning user experience.
From the mood board, the following color palettes and fonts were chosen.
Color Palette
I chose lively neon colors like pink, cyan, and purple, adding energy to Navi-Space's design. For balance, I used shades of grey for the background and typography.
Fonts
For fonts, I was experimenting with 3 fonts: Rubic Mono One, Noto Sans, and Roboto. Again, the goal was to match a futuristic and adventurous vibe.
The Outcome
In the initial development stage, I identified the need for a more cohesive design. The original design lacked unity and felt cluttered, diverting focus from core elements. Key areas for improvement included the color palette, typography, button and icon designs, and app screen expansion.
Improvements
Keys issues:
-
lack of cohesion and clutter.
Goals:
-
Create a visually appealing, cohesive design focusing users on core elements.
Solutions:
-
Reimagined color palette and typography to align with 'space' theme.
-
Expanded wireframes to create more views for enhanced complexity.
FINALIZED DESIGN
Design System:RE
Mood Board
When redesigning Navi-Space's visual style, my goal was to evoke a sense of calm, tranquility, and safety while preserving the essence of space and the cosmos. I chose a soothing sunset theme inspired by its gentle hues and serene ambiance. By using soft gradients and a blend of cool and warm tones, the design aims to instill a feeling of peace and harmony, ensuring a reassuring and relaxing user experience.
Infusing the design with a soothing sunset theme strikes a balance between tranquility and the wonder of space exploration. This cohesive theme enhances the user experience, providing comfort and security while capturing the essence of the cosmos.
Color Palette
I chose lively neon colors like pink, cyan, and purple, adding energy to Navi-Space's design. For balance, I used shades of grey for the background and typography.
Fonts
Nunito is a rounded, soft font that can convey a sense of warmth, approachability, and friendliness. It's a well-balanced, highly-readable sans-serif typeface with thin, uniform stroke widths that work well for both body and display copy.
DELIVERABLES
Component Sheet
App Walk-Through
Collaboration - Phone Story
REFLECTION
Challeneges
Navi-Space project marked my initial foray into UX design, involving a learning process encompassing every step for the first time. In the preliminary design phase, my perspective leaned towards that of a game designer, evident in the choice of colors, fonts, and buttons. Recognizing this mindset, I took a step back to the beginning, initiating the creation of additional low-fidelity screens. This allowed a thorough exploration of the application's functionality and diverse flows, setting the foundation for a more comprehensive and refined final design process.
What Went Well
I was very pleased with how the interactive "moon map" turned out and I learned a lot during its design process. As someone with a background in animation and enthusiasm for narrative, I was especially happy with the outcome of the on-route navigation animation as it conveyed the functionality of navigation successfully and seamlessly.
What Could be Better?
Reflecting on the Navi-Space project, it stands as a robust speculative product, especially for someone new to the UX/HCI field. The learning curve involved honing skills in presenting a polished UI design with an intuitive interaction flow. If I were to make an adjustment, it would be refining the appearance of the menu bar; in comparison to the rest of the design, it appears slightly chunky and detracts from the overall futuristic aesthetic.
