M AY 2017
onecoat UI/UX
research report DANIEL KAMMERER
and C H R I S T C A S TA N E D A
TABLE OF CONTENTS Introduction Abstract
3
3
Schedule
4
Audience
6
Possible constraints
Research
6
7
Preliminary research design Findings from the research Persona Goals
7 8
9 9
Competitive Analysis Potential Competitors
10
Visual Language References
User interaction design Scenario
13
Sketches
13
Wireframes
10 11
13
14
Usability analysis
15
Usability analysis tests
15
Usability analysis results
15
Changes from the results of usability analysis
User interface design Annotated layouts
18
Final product
19
Future enhancements
19
18
17
INTRODUCTION Abstract OneCoat is a lightweight jacket that heats itself automatically or as the user wishes. Electromagnetic conduction wirelessly heats the sleeves and body of the jacket. The jacket monitors temperature and movement to ensure dynamic regulation of the user’s body heat. Users will be able to select their preferred temperature from a smartphone or smartwatch application in addition to built-in controls. This product differentiates itself from its competition by using wireless electromagnetic power transfer for heating and chargins in addition to dynamically regulating the user’s temperature by analyzing external measurements.
Schedule WEEK 2 1/17–1/20 By Tuesday: Update weekly report. By Thursday: Establish our three main goals we want to achieve and finalize interview questions. Friday: Interview users and gather findings for report. WEEK 3 1/24–1/26 By Tuesday: Update weekly report, establish our persona for the project By Thursday: Summarize and analyze research findings. Adjust product concept. Incorporate research into persona development. WEEK 4 1/31–2/2 By Tuesday: Near completion of persona’s goals. Start UI and product competitive analysis. By Thursday: Complete UI and product competitive analysis. WEEK 5 2/7–2/9 By Tuesday: Write scenario, generate interaction frameworks. By Thursday: Create and complete wireframe. WEEK 6 2/14–2/16 By Tuesday: Conduct usability testing. By Thursday: Make modifications to concept based on testing findings. WEEK 7 2/21–2/23 By Tuesday: Add to report research findings and resulting modifications. By Thursday: Update wireframe based on test findings.
WEEK 8 2/28–3/2 By Tuesday: Find and add visual language references to report. Start generating directions for visual language in the next prototype, settle on color palette and typeface choices, determine imagery required and how to create/obtain it. By Thursday: Generate variety of layouts for 3-4 different screens of the user interface. Final color palette, images, typeface. WEEK 9 3/7-3/9 By Tuesday: Add final layout screens to report. By Thursday: Determine and generate text about technology requirements, as well as technological constraints. WEEK 10 3/14- 3/16 By Tuesday: Make final layout adjustments. Brainstorm and add future enhancements. By Thursday: Flex day for printing and final modifications.
Audience Our audience are those ranging from university students to business professionals who live in areas where fall and winter temperatures are unpredictable. The garment is also useful to business travelers who can save luggage space by bringing a single outerwear item instead of many.
Technical requirements Battery packaging and the correct combination of battery weight, capacity and waterproofing for ease of maintenance and wear. Wireless charging exists for smartphones; a similar application of conductive charging for the jacket as it hangs from a-charging hook could be a significant convenience/ QoL upgrade compared to competing products.
Possible constraints Maintaining a low purchase cost for the younger demographic may not be possible depending on manufacturing and material costs.
RESEARCH Preliminary research design Our main goals through the interview process were to determine the lifestyle of our consumers, the desirability of heated garments, and what audience expectations would be once introduced to our product and interface. 1. What decisions are you making when you’re deciding on an outfit for the day? 2. What is your weather preference? 3. Describe a typical commute. 4. How often do you travel, and what has been your favorite place to visit? 5. Would you describe yourself as a thrifty, moderate, or enthusiast clothes shopper? (Also, favorite clothing stores?) 6. How many jackets do you own for different situations? 7. Do you find yourself bringing an extra outerwear with you in anticipation of weather later in the day? 8. Do you use any smartphone apps related to shopping? Home automation? Fitness (any app that you tend to use often)? 9. What would you hope the price of app-controlled heated jacket would be? 10. Do you tend to have a preference between form and function, or are both equally important to you? 11. Do you have any experience with heated clothing or blankets? Any comments about them?
Findings from research Cindy Jones, 55, said the weather dictates her choice of clothes for the day. She prefers warmer climates and one of her favorite vacation spots is hawaii. She is a moderate shopper who has about twelve jackets in her closet and commutes around three miles everyday to work. She does not bring extra outerwear for the day and she is familiar with only shopping applications such as amazon. At the conclusion she stated that she would not be interested in a heated jacket due to possible dangers she fears. Elaine Sullivan, 58, reported that she prefers cooler climates and her daily commute is fro 25–40 minutes on the freeway. She is more of a shopper enthusiast and finds herself bringing extra outerwear in anticipation of weather changes. She uses shopping application on her phone and estimates a heated jacket to cost around two hundred dollars. In regards to form and function of products, she feels that quality and aesthetics are most important. When we asked if she had any experience with heated clothing or blankets she mentioned using blankets but that they became too hot for her. John Haphner, a 22 year old male college student, lets the weather choose his outfits and prefers colder climates. Their commute, being a student, is a two mile bike ride to campus. He is a moderate shopper and owns around four jackets. He doesn’t really use shopping or home automation applications. Aubrei Estrada, 24, college graduate, considers the weather and activities she will engage in throughout the day in determining her outfit. She prefers cold weather and loves to visit florida when she can for family. She drives thirty minutes daily to work and considers herself a moderate shopper. She owns about ten jackets and will occasionally bring extra with her. She uses many shopping applications and social applications. She prices an application-controlled heated jacket to be at a hundred dollars and is very familiar with heated blankets. She uses her current blanket nightly. She considers both form and function equally important. William Symanski, 58. Style was of less importance to him, he mostly chose clothing for the day based on anticipated weather. Enjoys a variety of weathers and seasons, doesn’t commute but does canoe frequently on a lake. Uses amazon and ebay to shop but neither of the other application categories. Not much experience with heated blankets, but indicated interest in the proposed product.
Persona Taylor Taylor is a twenty-nine year old marketing director at a publishing company in New York City. She maintains an eye towards fashion but focuses primarily on how much quality and style she can get for her dollar rather than chasing prestigious brands. She uses a Mac for her work and carries an iPhone, so she’s used to interfaces that are legible and easy to navigate. She commutes to work via subway, with a mile of walking to get there and to the office. Currently, Taylor finds herself wearing a thick down jacket on her way to the subway station. As she walks her internal temperature rises, at which point she takes her down jacket off and has to carry it the rest of the way. Taylor often travels for business as well, and finds herself using more luggage space than necessary when bringing coats for a cold destination. “I want to be able to travel light while commuting to and from work without worrying about how the weather might change.”
Persona Goals »»Taylor wishes to find a stylish piece of outerwear that she can keep on for all phases of her commute. »»Taylor wants to find one lightweight jacket that could replace two or three different jackets taking extra space in her luggage during trips.
COMPETITIVE ANALYSIS Potential Competitors Heated Jackets available in the current market all function very similarly. Batteries are kept in the pocket for easy removal when charging. The Ravean jacket features a USB port for device charging. All feature manual control of jacket heat, none feature an automatic or dynamically adjusting mode. Materials range from traditional polyester and down to hydrophobic surface materials which chemically repel water.
12 Volt Cordless Milwaukee Jacket
M12 Cordless Milwaukee
Volt Heat Jacket
Venture Heat 690M Soft Shell Jacket
Visual Language References Simple navigation, color coding, and large button/control size are used consistently across temperature control interfaces. The set temperature is ususally displayed in bold, large type with high-contrast between background and text to aid visibility.
Color References We’re aiming to create a simple interface that is easy to comprehend by all users; competitive analysis and interviews indicate that for a temperature controlling application this is best achieved with a neutral color pallete and warm-to-cool accent colors which indicate hotter and colder temperatures.
USER INTERACTION DESIGN Scenario Taylor is getting ready to clock out of her nine-to-five job as a marketing director for a publishing firm in New York City. She’s exhausted, but it was a productive day and she’s looking forward to a long-postponed night out with friends. She zips up her OneCoat and dials in her “walk home” preset using her iPhone. As she steps out of the office into the chilly New York air, the OneCoat senses the temperature drop and warms up to maintain her favored temperature of 74 degrees. Along her walk to the subway station, the jacket lowers heat output as Taylor’s heart-rate and internal heat rise. Once she’s riding on the warmer and more crowded subway, the jacket turns off heating cores, activating once more as she leaves the subway for her walk home. When she arrives at home she hangs OneCoat up on its wireless charger. After not sensing any movement or body heat for five minutes, OneCoat shuts off automatically, ready to be worn again when she later leaves for her-night out.
Sketches
Adobe XD Wireframes
Possible temperature adjustment screens
Possible home screen with icons for presets and automatic functions
USABILITY ANALYSIS Usability analysis tests Tested two times with both a college aged male and female. We asked them both to do three tasks as we silently recorded and observed their activity. Both were eventually successful in doing so but we noticed a few minor problems with the navigation and icons on our wireframes. Tasks: »» Activate and raise the temperature of the jacket »» Access the presets and scroll through them »» Navigate back to the home page
Usability analysis results »» Navigating to the jacket’s temperature control was slightly unintuitive due to the button’s wording and lack of distinguishment from the other button (profiles) but the tester was able to carry out the command without additional help. »» Prominent image icons to go along with (or replace) the word buttons may speed up comprehension of their function. »» Button operation in general was finicky. Larger effective area (plenty of invisible active space outside of the apparent button) should help in ensuring a registered press. »» While executing the second command, the tester tried to swipe left to return to the home menu from the temperature adjustment screen. This should be added since it is a convention for navigation from screen to screen in the top most-used apps. »» An ‘x’ might make more sense to close the profile and adjustment screens to return to the home screen in addition to swipe navigation.
Changes from the results of usability analysis »» Added a ‘save’ button to the jacket adjustment screen. »» Added a label to the battery icon for clarity. »» Added an option to type in a temperature rather than use the buttons. »» Next steps are to link the screens together in Adobe XD and develop final visual language and elements.
USER INTERFACE DESIGN Annotated layouts
temp scroll up/down, manual type option automatic setting bottom nav, battery indicator
temperature zones can be toggled
profiles
Annotated layout iterations
slide adjustment now wraps around the temp. display
60 Revised the jacket graphic, got rid of ‘auto’ since saved profiles fulfill the same purpose.
brought the plus/minus closer together (easier for left and right-handed users)
exploring a narrower typeface
»»
revised jacket illustration
»»
changed to gradient color scheme to better indicate temperature scale
»»
swapped from icons to words for less ambiguity, switched hamburger menu icon to a settings icon
FINAL PRODUCT
Main adjustment screen—users can adjust temperature by tapping the number and typing, tapping up and down, or moving the adjustment slider.
Users can save and load profiles. Both functions are always accessible through the bottom-nav. The gear icon of the bottom-nav navigates to gneral and is where remaining power will be displayed.
Technical requirements and possible constraints If the jacket is to function for extended periods of time without charging, a robust set of lithium-ion cells is necessary; the right size, shape, and weight should be used to avoid adding unnecessary heft to the jacket. RFID or another wireless communication standard is necessary for communication between the garment and the user’s device
Future enhancements The app is laid out such that various other ‘smart’ garments could also be adjusted or automatically from it. In a high-end idealized variant of the garment, the heating elements would be woven throughout the fabric. For power users, a passive analytics collector or schedule creator may allow even finer adjustment of how warm they would prefer the jacket to be at various points in their weekly routine. There are hazard-management and military applications for garments that regulate heating; the interface could be adapted to suit such needs, including more thorough measurement and monitoring functions. A version of the application for a heated sleeping bag or tent for outdoor/ camping enthusiasts is worth investigating.