UX Designer, Usability Tester, Visual Designer,
Conceptual Design
Prototype
Usability Test
Visual Design
Jessica Klutch
Shuhua Chen
Natalie Sroisudaratna
Sep 2021 - Nov 2021
The Urban Summit project exemplified the iterative process of prototype development, employing diverse strategies to create a mobile and smartwatch application that enhanced personal safety for individuals engaged in outdoor activities and fitness. The design process followed a structured approach, starting with the creation of individual sketches to explore and refine product ideas. Essential features were diligently identified, forming the foundation for developing personas and the initial prototype. A narrative digital prototype was created to visualize potential scenarios and refine the user experience. The mid-fidelity prototype was developed to test core features and gather user feedback, ultimately leading to the refinement of the high-fidelity prototype.
We developed a mobile and satellite-based communication device to enhance user safety during outdoor activities and urban exploration. Our device included a mobile application and satellite communication capabilities, allowing users to send personalized messages to emergency contacts and services. The unique feature of our product was the ability to deliver tailored messages for effective communication in critical situations. By leveraging satellite technology, our device ensured reliable communication without relying on cellular signals. We explored two options for the device's configuration and channels:
In this option, the satellite device had no screen and users could utilize the mobile device and smartwatch for messaging and accessing screen-dependent features. The smartwatch also monitored the user's physiological parameters like heart rate and temperature.
In this option, the smartwatch integrated satellite capabilities directly into its design. This eliminated the need for an extra device, as the satellite functionality became an integral part of the smartwatch.
We started by creating individual sketches of product ideas, and as a group, we reviewed them and identified the essential features. These ideas and features served as the foundation for developing personas and our initial prototype.
● Exercise Mapping Route: Get personalized recommendations for day and night, along with specific guidance for walking, running, and biking. It also highlights individuals who may require assistance, fostering a community-driven platform that promotes mutual support.
● Emergency Support Status: Utilize voice commands, body status detection, and self-emergency reporting for quick and efficient assistance.
● Community Feed: Engage in collaborative assistance, find exercise partners, and share experiences or useful information with the community.
● The Map feature enables users to track movements, monitor activity progress, and gain valuable insights for performance analysis and goal setting. Assists emergency personnel in locating users during emergency situations.
● The app provides accurate and up-to-date weather conditions based on the user's location, helping them plan their activities and stay prepared for any weather-related challenges.
● Direct message communication enables users to connect and interact with friends, workout buddies, and other individuals within the app. It facilitates real-time conversations, making it convenient to share updates, tips, and provide support during fitness journeys.
● The Emergency SOS button is a critical feature that enables users to swiftly request emergency assistance during unforeseen or urgent situations. By activating it, users can promptly alert predefined contacts or emergency services, ensuring help arrives quickly.
● Document activities and specify destinations: Allows users to keep records of their exercises and accomplishments. Descriptions provided by users can be crucial in emergency situations.
● Location Sharing: Lets users share their location in real-time with friends and family, allowing for seamless connectivity and updates on their whereabouts.
● Social Posting and Discovery: Empowers users to share their experiences, photos, and tips with the community, fostering engagement. Users can explore posts from fellow community members, discovering information about specific locations and activities.
● Provides convenient access to communication functionalities, emergency assistance features, and location tracking through a portable and wearable design.
After finalizing our idea, we proceeded to create two distinct personas that we believed would benefit from our proposed solution. We thoroughly assessed each persona, examining how our device addressed their pain points, goals, and tasks.
Through a narrative digital prototype, we envisioned potential scenarios where our product could be utilized, while also serving as a visual and interactive representation that communicated the intended user experience, features, and functionality in an engaging and accessible way. This prototype served as a powerful tool that helped us better understand how users would interact with our product, identified areas for improvement, and made informed design decisions. By immersing ourselves in the narrative of the digital prototype, we were able to refine and iterate on our ideas, ensuring that the final product aligned with our vision and met the needs of our target users.
After immersing ourselves in the narrative of the digital prototype, we visualized and understood how users would interact with our product. We then created the Mid-Fidelity prototype, which had an intermediate level of design and functionality for our application. This prototype allowed us to test and evaluate the core features and interactions of the product in a more realistic manner. It provided a higher level of detail and interactivity, which helped us gather more accurate user feedback and validate design choices. The Mid-Fidelity prototype played a crucial role in refining our product, ensuring that it met user expectations and aligned with our design goals.
The objective of this usability test is to gather feedback from potential users in order to identify any issues with the current mid-fi prototypes, understand their preferences regarding the app, and refine it to enhance user-friendliness.
The usability tests were conducted through a combination of in-person sessions and Zoom video sessions. Each team member individually conducted 1-2 usability tests, taking on the roles of both moderator and observer. Throughout the test, participants' facial expressions, comments, and interactions with the app were recorded as they navigated through the prototype.
The target users for our application are individuals aged 20 to 50 who frequently engage in solo outdoor activities and prioritize safety. To recruit participants for the usability test, group members reached out to friends who regularly partake in outdoor activities alone.
Age: 20’s
Gender: Male
Occupation: Software Developer
Frequency of outdoor Activity: Hiking once a week
Age: 30’s
Gender: Male
Occupation: Integration Developer
Frequency of outdoor Activity: Everyday
Age: 20’s
Gender: Male
Occupation: Communications
Frequency of outdoor Activity: Once a week
Age: 20’s
Gender: Female
Occupation: Graduate Student
Frequency of outdoor Activity: Everyday
1. Categorize - input information needed to start activity
2. Map - Select a trail from the map and navigate hazards
3. Call for help - Push help button, point out injury, and track ambulance
4. No Signal - Call for help using satellite mode and manage messages
5. Watch - Start recording and call for help using watch interface
After each task, we engaged participants with post-task questions to gather valuable feedback and insights regarding their experience and perception of the usability test. This feedback helps us gain a deeper understanding of their interactions with the product/service and aids in refining the overall user experience.
During the usability testing, several issues were identified across different features of the mobile and watch channels:
All users did not understand the purpose of the "start new activity" button.
● MAPOne out of four users expressed uncertainty about the need to tap "trail" first and preferred using the search box to choose a trail in the Map feature.
● EMERGENCYAll Users experienced confusion regarding the status of calling 911 and hanging up. User 3 reported uncertainty due to the visibility of both green and red phone icons. User 1 used both buttons, while Users 2 and 4 directly tapped the red hang-up button.
Three out of four users had difficulty finding the screen that displayed the ambulance location.
All users did not understand the purpose of the "arrive" button.
Three out of four users had difficulties contacting their family. Two of the users took some time to find the right place, while one user failed to complete the task.
All users encountered confusion regarding the status of calling 911 and the interaction of hanging up.
Two out of four users expressed confusion about the rectangular help button, mistaking it for a technical support button rather than a call for help button.
Two out of four users were perplexed by the "Nice work!" message displayed on the watch after they had to prematurely end their exercise due to the emergency scenario outlined in the task.
Only keep the hang up button during the call. This simplification minimizes confusion and reduces the chance of accidental taps on other buttons that could disrupt the call or lead to unintended actions.
Changed the rectangle help button to be consistent with the circle to improve the visual consistency and overall design aesthetics of the application.
End the tracking automatically under emergency situation to ensures that the user's privacy and safety are prioritized. This feature helps conserve device resources and battery life by preventing ongoing tracking when it is no longer necessary or relevant.
The label "start new activity" has been modified to "enter activity info" in order to provide clearer instructions and improve the user experience.
Create more distinction between emergency contact and Emergency feature in the main menu. This ensures that users can easily differentiate between the two functionalities. The main menu becomes more organized and intuitive, allowing users to locate and access the desired features with ease.
Seperate the emergency contact from the tracking the activity and simplify the process of inputting information. This separation ensures that users can easily access and manage these two distinct functions without any confusion.
Merge the custom route function into the searching box. Users can conveniently search for a specific location or enter their desired custom route directly into the searching box. This integration eliminates the need for a separate function or interaction for creating custom routes, making it easier for users to plan their own routes while exploring the map.
Change “the Help is on the way” message to “check ambulance location”. This change aims to provide users with more relevant and actionable information, allowing them to track the exact location of the ambulance and stay informed during emergency situations.
Delete the “confirming arrival” function. This change simplifies the user experience by eliminating the need for users to manually confirm the arrival of emergency vehicles. Instead, the focus is on providing real-time information about the location and status of the emergency vehicle to keep users informed.
Indicate the calling 911 function clearly by green phone icon. This change improves the visibility and accessibility of the emergency calling feature, making it easier for users to identify and initiate emergency calls when needed.
Only keep the hang up button during the emergency call. Having only the hang-up button visible can prevent confusion, users can quickly and intuitively end the emergency call when necessary
Add top bar to switch between different conversations. Users can easily access and switch between ongoing conversations with family/friends or emergency rescue team.
Delete the “confirming arrival” function. This change simplifies the user experience by eliminating an additional step and reducing complexity during the emergency response process.
The usability tests conducted on our mid-fidelity prototype provided valuable insights and feedback that guided the design and development of our high-fidelity prototype. We refined the user interface, addressed usability issues, and incorporated design modifications based on the feedback received from users. As a result, the high-fidelity prototype has been enhanced with an interface that closely resembles the intended look and feel of the final product.
The style guide we have created serves as a comprehensive reference that outlines the visual and design elements of our product, ensuring consistency and coherence throughout the application.
With a focus on accessibility, our color scheme was meticulously chosen in the past to promote readability and usability, taking into account the unique requirements of users with color vision deficiencies. We selected colors that offered clear distinction and sufficient contrast, aiming to create an inclusive experience for all users. Adhering to the Web Content Accessibility Guidelines (WCAG), we ensured in the past that our buttons met the recommended contrast ratio to enhance accessibility and ensure optimal visibility for everyone.
We created three logo designs for our brand. After careful consideration and deliberation, we made the strategic decision to select the logo design that did not include any text inside. This choice was driven by our goal to prioritize clarity and minimize potential confusion, particularly when the logo is displayed on small phone screens. By opting for a clean and visually impactful design without text, we aimed to ensure that our brand identity remains easily recognizable and legible.
We chose the Roboto font for its excellent readability on digital and print mediums, making it suitable for various applications. Its well-designed letterforms and balanced proportions provide a comfortable reading experience for users. Font weights were used to convey visual hierarchy, emphasize important information, and create a balanced and visually appealing layout. Regular font weight was utilized in body text and general content to provide a clean and readable appearance for text that didn't require special attention. The medium font weight was employed in secondary text that needed to stand out more than regular text. Lastly, bold font weight was applied to headings, titles, and buttons to draw attention to important elements in the design. Consistency in font usage was maintained throughout the application to ensure a cohesive and harmonious visual experience.
Our team demonstrated a strong understanding of the importance of a structured design process. By starting with individual sketches and progressing through prototypes, our team was able to incorporate user feedback to refine the final design. This iterative approach allowed for continuous improvement and ensured that the product met the needs and preferences of the users.
What we did well?Our team successfully implemented a variety of strategies for prototype development, including the creation of personas and the use of a narrative digital prototype. These techniques helped visualize potential scenarios and refine the user experience. Our attention to visual consistency and clean design aesthetics improved the overall usability and accessibility of the application.
What could we improve?One area for improvement is conducting further research on integrating satellite technology into the product. Understanding the operations and functionality of satellite systems will be crucial in seamlessly incorporating them into the application and accommodating the various activities of the users. This additional research will enhance the capabilities of the product and ensure it provides reliable and comprehensive safety features for outdoor activities.