TrekAssist
Creating a Style Guide for E-Ink Devices Tailored for National Park Visitors
ROLE
TEAM
UI/UX Designer
-Design user flow
-Define user persona
-Prototype
1 UI/UX Designer
2 UX Researchers
TIMELINE
SKILLS
TOOLS
Figma
Microsoft Excel
User Research
UI Design
Nov - Dec 2023
4-week project
Context
This is a design challenge assigned in my Computer Interface Design class. We were tasked with creating a solar-powered e-ink device with color capabilities for guiding visitors at the Yellowstone National Park. The device features an innovative color e-ink display, minimizing energy consumption while offering limited color options. Some key things to look out for is that it has to be in a landscape orientation due to solar sensor placement; no automatic tilt detection. Charging speed and power capacity vary based on weather conditions, potentially reducing battery life.
Display resolution: 800 x 600 pixels on a 10-inch diagonal screen (22.2 x 12.5 cm)
Increased color usage drains battery faster (black & white suggested)
Exposure to bright sunlight for one hour enables 6-10 hours of operation
Challenges
Limited use of colors is required, and saturated colors are not permitted due to the constraints of the e-ink device.
Problem Statement
How might we help park visitors have an up-to-date, accessible guide to the park without worrying about running out of battery?
Stakeholders
National Park Visitors
The organization responsible for managing Yellowstone National Park. They would be interested in the effectiveness of the device in enhancing visitor experience and facilitating navigation within the park.
Park Visitors
People who visit Yellowstone National Park and would potentially benefit from using the device to navigate the park's trails,
landmarks, and attractions.
What I did
1. Utilize low-saturation colors.
2. Incorporate pops of green and red to ensure visibility for users while hiking.
3. Enlarge critical buttons, such as the emergency chatbox and SOS, for easy access in emergencies.
4. Implement alert systems that freeze the entire screen for user safety.
Ideation
As outlined in the user flow diagram, users will first choose their language in the home screen, then as they begin using the interface there are short tutorials guiding users on how to use specific features. Following this, users will navigate to a menu screen where there are four buttons: “Weather & Wildlife Alerts,” “Chatbox,” “SOS function,” and “Audio Guides.” These constitute the primary features we intend to incorporate into our design. Since battery life can be influenced by the weather conditions and the colors presented on the screen, it is crucial to display the battery status on every screen. This ensures that users can monitor their device's power level at all times and make informed decisions about its usage.
Based on the user flow, I created a few ideation sketches with my team to visually represent how the device will function. Key features we discussed include a quick tutorial for users, a home screen displaying major functions such as alerts, home, history, health, sustainability, and maps. The settings menu allows full control of the device, and we also added informative resources, like a sustainability page, aligned with the TrekAssist theme.
Our team created a design concept focused on user flow, illustrated in the wireframe below. We developed an informative and resourceful device where users can select specific locations within Yellowstone National Park to explore and learn about their history. The design also includes alert systems, emergency help, and a chatbox feature to ensure a safe and guided experience throughout the park.
Initial Design
The initial design concept incorporated vibrant colors to enhance user engagement and visual appeal. We also included special features like dark and light modes for optimal device operation during nighttime and daytime.
Usability Test
The usability testing aimed to assess the TrekAssist National Park Guide interface with a focus on user interaction, navigation, and satisfaction. Participants' demographics varied, including interests and academic backgrounds.
Method:
The usability testing method for TrekAssist aims to comprehensively evaluate its interface by assessing overall usability, clarity, and fundamental functionalities such as language selection, navigation, and mode switching. The testing involves a diverse sample of 7 users with varied technical proficiency based on industry and educational background. We chose six tasks based on our anticipation of their high frequency of use by users. Tasks range from language selection and navigation assessments to exploring specific features like the Chatbox and evaluating the visual experience in dual-screen mode. Measurements include task success, user satisfaction, feedback on features, and suggestions for improvement. Testing occurs either in person or through Zoom with screen sharing, utilizing a Figma prototype on a computer. The subsequent steps involve thorough analysis of collected data, summarizing areas for enhancement, and adjusting the prototype based on the identified findings, with the acknowledgment that iterative testing won't be implemented due to time constraints.
User Tasks
-Language Selection
-Navigation
-Use the Dual Screen Mode
-Information Exploration
-Navigating in Settings
-Using the Emergency Assistance
General User Information
Feedback
1. Enhance the display of the language selection button.
2. Improve visibility of alerts: dim the background & adjust visual elements.
Additional Participants’ Feedback
Our users also said to…
Improve map navigation with more details and alternative routes.
Reorder settings based on frequency of use.
Consider adding time predictions for weather alerts.
Tone down the brightness of sustainability icons.
Professor Feedback
The use of full-color graphics and high-resolution images will strain battery life
Maintain and use more black-and-white images and colors
Style Guide
The DM Sans font was chosen for its clean, geometric, and highly legible letterforms, making it perfect for a minimalist, user-friendly experience across various screen sizes. Its simple, modern style enhances readability, ensuring users can quickly absorb information—especially crucial when designing for an e-ink device used by users engaged in physical activities like hiking.
Additionally, we implemented a color scheme ranging from dark gray (HEX #3A3C3C) to white (HEX #FFFFFF), as the device constraints limited us to low-saturation colors, optimizing visibility and contrast on the e-ink display.
Key Features
Filters & Our History
Enhance your trip planning with filters that sort recommended trips by distance, rating, expiration, and connections with friends. Additionally, delve into the rich history of Yellowstone National Park through our history page, curated for users to explore.
Settings
Brightness adjustment and text size changes. Settings have various features for users to adjust their needs accordingly. There’s also data on how much battery life is left.
Alert System & Dark Mode
Users are equipped with emergency alert systems within the park environment, as well as the option to enable dark mode for their screen preferences.
Sustainability & Health Tips
Offering sustainable and health-conscious tips to assist users as they explore the trails of Yellowstone National Park. Also provides essential guidance for handling emergencies.
Maps & Chatbox
The map displays routes for navigating the park's terrain seamlessly. Moreover, a Chatbox system is available for users to seek assistance or engage in interactive support.
Prototype
What I Learnt
Designing the interface for an e-ink device with numerous restrictions was a challenging yet enlightening experience. The most significant challenge stemmed from the limitations on color choices, necessitating the use of low-saturation colors and avoiding saturated hues. Despite these constraints, my primary focus was to create a user-friendly interface that prioritized user safety, particularly for those using the device while walking or hiking.
To address the color limitations, I learned to strategically incorporate subtle pops of green and red, ensuring that critical elements stood out against the muted palette. This careful selection of colors enhanced the device's visibility in outdoor environments without compromising battery life.
Additionally, I emphasized the importance of user safety by enlarging essential buttons, such as the emergency chatbox and SOS buttons, making them easily accessible in urgent situations. This design choice was crucial for ensuring that users could quickly respond to emergencies, even while on the move.
Moreover, implementing alert systems that temporarily freeze the entire screen was a vital safety feature. This function prevents distractions, allowing users to focus on their surroundings and stay safe during their outdoor activities.
Through this project, I learned that designing within strict constraints requires creativity and a deep understanding of user needs. It taught me to think critically about every design element, ensuring that each choice contributes to a cohesive, functional, and safe user experience.