SMART CLOTHING DESIGN
OVERVIEW
01
In many special geographic countries that are close to the poles such as Canada, Russia. People have to wear many layers of clothing to keep warm in the winter time only to remove all the layers once indoors. This is extremely inconvenienced when people doing exercise.
Therefore, our team a product is the elimination of unnecessary extra layers of clothing-a smart clothing that can be heating or cooling automatically and enhance sports experience.
Exerciser
For many exercisers, Starting exercise is cold, once they finished warm up and felt hot, the first thing is taking off their jackets. Then put back on when they finished work out. And they have to do it over and over again until the winter goes away. How can’t we make their life easier?
Team
Duration
My role
Chenghe Zhang
Jason Zhang
Zipeng Tang Maple Thi
Sep, 2018 - Nov, 2018
Lead UX designer,
Sketching scenarios,
User Testing,
Design and Iterating UI
02
RESEARCH
We first distributed an online questionnaire/survey through different platforms and by further discussion, we later decided to do additional observations which took place at the UTM Athletic Centre. We decided to carry out a questionnaire survey before our actual observation as we believed that the survey would have comprehensively covered our questions. Therefore our observation will be more narrowed also gives us a direction of observation on user behaviors.
The survey used mixed research methods which quantitative and qualitative both applied. 19 questions in the total of the survey have multiple chooses and open comment types questions, observation conducting field observing and scenario experiencing exploration.
After analyzing the data, we found out people usually have no place for the cell phone, people feel hot and sweating after exercise. it would be excellent for them if there is a heating system and a cooling one. And people hate when their clothes are wet. Some people mentioned in the survey question, they would like to see their body status while they are exercising and have a reminder to drink water.
AFFINITY MAP
03
04
JOURNEY MAP
05
HAPPY PATH
06
LOW FIDELITY
We spent some time mapping out the flow of this application and revised it to better accommodate the user's needs. We then spent some time exploring ideas through hand sketches and created low fidelity wireframes from these sketches.
We decided that we want to be able to keep the app interface as user-friendly and simple to use as we can, therefore avoiding overcomplicating the interface with perhaps one too many features/functions and use symbols that are universal to all users,
Once users tap “Turn on Heat”, it will show a new page indicating the current temperature of the garment in Celsius or Fahrenheit depending on which users prefer. As the garment will automatically turn on and adjust to its appropriate environment, users are still able to manually adjust to a comfortable temperature for them using the plus/minus buttons given. When temperatures are adjusted, the user will know as they are given feedback whether that be seeing the temperature increase/decrease or if the user chooses sauna mode, they will receive feedback saying “Enjoy your sauna!”
USER TESTING ONE
07
The goal of our first testing is to justify if our design elements fall into a proper logic manner, therefore, we developed our nine scenarios assigned different tasks. All created scenarios have one or two certain pathways of achieving a task. For instance, asking users to adjust the temperature in given situations after introducing our initial product and ideas. Users were given freedom of app control and assistant of asking unlimited questions of understanding on anything.
The method we planned to use involve both naturalistic observation and true experiment. We take notes on steps of their actions and problems we found through observation on their interaction. Ture experiment was committed by given everyone same tasks but little changes in scenarios, this way a comparison on participants actions could appeal our initial problems more clearly. Pre-study and evaluation questions were also thoughtfully established which aimed to better understanding what does user think our design as a whole generally. Especially in the evaluation question, we focused on an open-end structure which user can think aloud themselves and potentially provide critical suggestion and expectation.
Though analyzing all notes and recorded videos, a total of eight problems encountered for first stage interface design. Problems involved tutorial pages misinterpret, unclear action completeness, icon misinterpretation, lacking feature explanation.
.png)
USER TESTING TWO
08
Our second studio test runs similar to first one but still with essential improvement on methods. We significantly improved our task-oriented test with more realistic stimulation within. We choose bike stimulation as our advanced method of sports orientation by asking participants setting backward of a chair and watching first person POV shot videos in order to create a more realistic feeling of sports environment.
Test two we achieved 8 participants testing and found 4 major issues and a great amount of detailed feedback. They are classified as recognition issues for calendar and power bottom, size of the back bottom, words confusion on calories page, intractability on the sports page.
Because we changed the calendar icon in health page to sliding integrated gesture control over calendar icon pressed control, users had lots of troubles of recognizing it. So we thought creating animation demonstration would be ideally. Some users also had some confusion of power bottom on temperature adjusting page, because our design was required users went back to Homepage for checking power status after the action was taken. Our solution was to delete the Homepage check step with exchanging of press bottom to a switch icon.
Words confusion on calories page has appeared in this test. The word ‘active calories’ confused users at first glance and everyone was asking for explains. So we word it as ‘Running calories’ which we believe will make more sense to readers.
Our previous Sports page design was divided into six different section with either informative static icon or clickable bottom. However, we received feedback from participants saying its distracting their sports activates and too small for reading it. So we went into solution where only display three main icons plus power switch and timer indication. With static icon it will be flashing or animation of the running person and vibration of heart beat but clickable bottoms will remain unchanged until manually adjusted.
USER TESTING THREE
09
After receiving feedback on our previous studio session, the comments had mentioned that there should have been more task analysis than our focus on user perception of our interface elements. Therefore, in our final session of hi-fidelity prototype testing our team decided that we still ideally want to ask questions on the thoughts of our UI from our users however to fulfill the need to a few more task-based testings we wanted our last session to have a little bit of both. From the user suggestions we received back the week before, we made minor changes to our interface including testing temperature control (on/off, adjust), entering sports mode, and lastly to check their health data (having them look at activity time, calendar, and the new graphs).
After conducting our tests, we found a few minor details that users had pointed out which could be changed. As our new design had become more minimalistic, we had changed the way our users accessed the calendar to check their statistics on a certain day from a calendar icon to a swipe up motion. As we imagined, people were having trouble getting access to the calendar even when asked to play around with it. Another question that we received from our users was whether the temperature was in Celsius or Fahrenheit as our current design only has a number without any indication of which scale it is using. Another minor detail that was brought to our attention was when asking our users to retrieve their health data, they would automatically assume that our “health” icon is simply for heart rate data as it was a red circle with a heart inside which would indicate for something like BPM rather than overall health. The last detail that was mentioned was that on some pages of our interface, we have quite a bit of real estate for space to shift a few things just so icons/buttons are not as cramped together as they were so that was something we noticed as well.
Therefore, in our last design iteration we wanted to address these last few minuscule details. As discussed above, we will make the motion of swiping up for the calendar more clear by using the extra space that we have to include text indicating to our users to “swipe up for calendar” to access this feature. We will also be adding the degrees that we will be using for users to know which scale they are working with and which can be changed in the settings if they choose to have Fahrenheit than Celsius, and vice versa. Last thing on our list is to make a small change to our home page where we will change the icon to indicate that it is to access health data rather than what users perceive as heart rate data as well as simply shift our icon to be beside the temperature icon that way we are relieving some cramped space in our final interface.
10
FINAL DESIGN
When the user first enters the smart clothing app, there will be a tutorial showing up to help the user connect the clothes with the smartphone. The final design of our smart clothing has three core functions, heating and cooling, sports mode and health data. We simplified many functions from our original concept such as the sauna mode. We also added features like health information interface to help the user keep track of their health. These functions are integrated into our smart clothing app.
On the home screen, there are only four buttons with three core feature and a setting button to achieve the simplicity overall feeling. The colorful contents and buttons are sitting on top of the dark theme across the app. Which creates an energetic looking. The vibrant gradient of wave color reflects the feature of the smart clothing and creates harmony through throughout app. The bottoms are placed at the bottom which can be easily reached by one hand. Each icon with unique symbols that adapt to their context so the user can immediately recognize. The connected visual system and controls like the same placement of the back button give the user a more frictionless experience.
At the top center, there is “My closet” for the user to swipe right to view different clothes and control individual. Temperature control can be accessed just by one tap on the temperature icon. By click on “Start Exercise”, the user will enter a newly added sports mode with three circles of interface design. It provides the essential information that the user needed during exercise like the user’s BPM/heart rate, calories burned, and temperature of clothing which can be easily adjusted by drag the handle of the temperate dial. The user can also freely leave sports mode by clicking on the power button at top right of the screen.
After exercise when the user wants to see the health data they can simply click on the heart icon, the health data page will show up with well-organized categories cards. By clicking on one of them will lead to a curve diagram in a beautiful waveform. For example on calories page, there are cards can be slide to view different information at top of the screen. Today's calories are clearly indicated with large size bold font inside of the wave. All though we pursue minimalism in every page of our app. We never want to give up the usability of functions. At bottom, by dragging up the wave will showing a full calendar for the user to select a specific data with animated text and arrow indication at bottom of the page. Therefore we can provide more space for the graph and important information.
Wave sleeve
to connect
The simplest way to connect smart clothing with your phone. This is achieved by W1 IOT soc module that was used on Apple's airpod. After wearing the clothes, the user only needs to wave his/her hands in front of the phone, then they will be automatically connected. As the result, the user can easily adjust clothing through the mobile phone without complicated connecting issues.
Temputare
Adjustment
HEALTH
DATA
Sports
mode
Conclusion
To conclude this smart clothing project we want to truly give thanks to everyone who helped us achieve a product that came from nothing. We started this whole project with a simple idea in mind and after weeks of preparations and adjustments, we have produced something that we as a team are extremely proud of.
We went through the whole process from conceiving the original idea, producing what our users would be, handing out surveys and conducting observations to get a good sense of who our users were and what problems they were having in which we could help solve.
Our initial design of the product and app interface has come a long way, The biggest challenge that I had to overcome during this project was having too many functions to the point where we almost lost the initial sense of our product. The initial contextual inquiry and rounds of usability testing really helped me forge an understanding of what these people's needs and wants were and how to adjust my designs accordingly. Then we come to a place where we can pinpoint exactly what situations our garments could be applied to. We now have a beautifully designed app interface which showcases everything that we had decided was the right fit.
Looking back, this smart clothing has a lot of potentials, but the scope of this project was so small that we only focus on the app user experience and simple product prototype. I believe the concept of this smart clothing will not only serving sportspeople but anyone in the future. It may become the best wearable IOT device in everyone's closet.
