Role: UI/UX Designer
Project Brief: Create a smart device and create its a mobile interface using figma. Consider UIUX, interaction, and usability principles.
Tools: Figma, Midjourney AI, Miro, Adobe illustrator
Terräng is a compression wear line that uses fiber technologies to control your body temperature, track activity, heart rate and sweat output battery powered by thin solar panel strips. The compression wear is connected, monitored and controlled by the user through a mobile app.
To what demographic am I catering?
This app and smart device is targeting anyone who stays active in the outdoors whether thats for work or as a hobby.
What problem(s) am I solving? ( User Goal)
Terräng was designed to address the challenge of maintaining personal body temperature comfort in changing environments and during physical activity.
Easy control, giving users simple, intuitive control through a mobile app.
Temperature control, help users cool down, warm up, and maintain their preferred temperature.
Sustainable charging, reduce reliance on traditional charging through integrated solar technology.
Competitor Analysis A
abacus is a wearable technology brand focused on making smart apparel through fabric feel less like technology and more like everyday clothing.
Pros: It's "tech" free, no wires and buttons, all fabric. Just put it on and it will work! Probably really comfy to wear.
Cons: Higher price range, won't be as affective as something with more technology than just fabric. To expensive to buy and try out if it works. Limited designs, only targeted to golfers.
Competitor Analysis B
Amazon Heated Zip Up is wearable heating garment that uses integrated technology to provide warmth and comfort during outdoor activities, offering a more accessible alternative to traditional cold-weather layers.
Pros: More affordable options for the common consumer. Variety of options between colors, fit and style.
Cons: Still quite pricey generally for a piece of clothing. The rechargeable aspect could be a pain point for some consumers. Only heats up but doesn't cool down.
Interviews/Findings
I interviewed a couple of people around me one with outdoor hobbies and one who works in outdoor climates.
This was my conclusion:
The interviews revealed that Terräng could provide value by helping users manage temperature, comfort, and physical strain during outdoor activities and demanding work. One interviewee highlighted the need for support with sweating and knee discomfort, particularly during cold-weather work and physically demanding tasks such as shoveling snow. Another interviewee focused on temperature regulation while hiking, explaining that they often start cold, become hot during the hike, and have to carry extra layers. Overall, the interviews suggest that users would appreciate clothing that adapts to changing body conditions, reduces the need to carry extra clothing, and potentially improves comfort and performance during physical activities.
Jack
Age: 22 years old
Gender: Male
Occupation: student in College
Jack is a college student who loves the outdoors and will take a road trip spontaneously. He often goes on early-morning hikes where temperatures can change significantly throughout the trip. Jack prefers to travel light, but he usually has to carry extra layers because he gets cold at the beginning of a hike and overheats once he starts moving. He is interested in technology that can improve his comfort and performance without adding extra gear.
Needs:
Easy way to track activity and heart rate.
Clothing that helps him stay comfortable throughout the entire hike.
A simple mobile app to monitor and control his gear.
Pains:
Finds it difficult to maintain a comfortable body temperature.
Wants to improve his hiking performance and endurance.
Doesn’t want to constantly stop to adjust or change clothing.
Benny & friend
Age: 42
Gender: Male
Occupation: Blue Collar Worker
Benny, 42, is a blue-collar worker who spends most of his days doing physically demanding work. He often works outdoors in changing weather conditions and deals with sweating, cold temperatures, and physical strain throughout the day. Benny values durable, practical products that can make his job more comfortable without getting in the way.
Needs:
Temperature-regulating clothing that adapts to his body.
Comfortable, flexible clothing for long workdays.
Sweat management to stay dry and comfortable.
Pains:
Gets hot and sweaty during physically demanding work.
Works in changing weather conditions.
Experiences physical fatigue and strain during long shifts.
Information Architecture
My information architecture went through many hours of revisions as I explored different questions and ideas throughout the design process. One of the main questions I considered was, “What is the easiest and fastest way for a user to complete a task?” I also kept the user’s environment and the activities they would be using the device for in mind.
For example, the device can calculate a user’s sweat output. If their sweat output is high, it indicates that they are losing a significant amount of water, which could become dangerous, especially in high temperatures. Another example is the temperature control screen, which provides the current climate conditions so users can determine what temperature to set their garment to without having to switch to a separate weather app. Throughout the process, I considered many different features and scenarios while keeping the needs, behaviors, and environments of the target user at the center of the design.
Wireframes
The wireframing process helped me plan out the different screens and features of the device before creating the final design. I tried different layouts to see what would be easiest for users to understand and navigate. I focused on where to place buttons, information, and controls so everything would be simple to use. Making different versions also helped me find areas that could be confusing and make changes. Overall, the wireframes helped create a clear foundation for the final design and user experience.
Design Decisions
Organic & Outdoorsy
This was initially catered to those who do outdoor activities like hiking, biking, all the INGS. However, after much research I discovered that this can be used outside of that (no pun intended). But I did want to keep some of the outdoorsy design aspect still. Which is why I include and make the main graphics topographic maps. Topographic maps are maps to illustrate the surface features using contour lines to show the elevation and shape of the land. I also enjoy how these could also represent a heat map which ties in very beautifully with this concept.
Digital & Sleek
Sometimes organic means the design can't also feel digital so that's when I tried to merge the two in this project. Because of the nature of this device, you could argue it quite futuristic and digital so I wanted to bring some of that feel into the design specially with the colors. Black and neon green felt perfect when it came to this concept. Green still felt organic enough tying in the graphics but the black making the neon green to strike gave it the digital touch.
Final Designs
UI Kit
Key Screens
User Flows
Reflection
This idea was inspired by a trip I took to Colorado, where I completed a 14,000-foot hike. During the hike, I experienced firsthand how difficult it can be to manage body temperature and stay comfortable in changing outdoor conditions. This made me realize there was a gap in the hiking and outdoor industry: body temperature control had not been fully addressed in a way that could benefit a wide range of people, not just hikers. What started as an idea to solve discomfort in the outdoors eventually blossomed into Terräng.
As I continued my research, I discovered that temperature regulation could also play a role in reducing discomfort related to bone and joint pain, expanding the potential impact of the product beyond outdoor recreation. From a design perspective, this project taught me how to create an interaction between the user, mobile app, and smart garment. I explored how interface design and smart-device features could work together to make these interactions feel simple, intuitive, and seamless.