Air Lookout คือโครงการด้านข้างที่เปลี่ยนขั้นตอนการออกแบบของฉันไปตลอดกาล

ในเดือนกุมภาพันธ์ปี 2015 ฉันเริ่มทำงานกับแอป iOS ชื่อ Air Lookout เป้าหมายของแอปนี้คือเพื่อลดความซับซ้อนและขจัดความสับสนของข้อมูลคุณภาพอากาศ หลังจากทำงานทั้งคืนและวันหยุดสุดสัปดาห์มานานกว่าหนึ่งปี รายได้สุทธิทั้งหมดนับตั้งแต่เปิดตัวในปี 2559 นั้นน้อยกว่า 1,000 ดอลลาร์ แม้จะมีตัวเลขเหล่านั้น ฉันก็ยังหวนคิดถึงทุก ๆ ชั่วโมงของการทำงาน

สิ่งหนึ่งที่ฉันไม่สามารถประเมินมูลค่าเป็นตัวเงินได้ก็คือประสบการณ์ในการสร้าง Air Lookout ได้เปลี่ยนความคิดของฉันอย่างสิ้นเชิงในกระบวนการออกแบบและพัฒนาสำหรับทุกโครงการที่ฉันทำตั้งแต่นั้นเป็นต้นมา

หมายเหตุสั้น ๆ เกี่ยวกับคุณภาพอากาศ

คุณภาพอากาศทั่วโลกเป็นปัญหาร้ายแรง ไม่สำคัญหรอกว่าคุณจะอาศัยอยู่ในมหานครที่เต็มไปด้วยรถยนต์และรถประจำทางที่มีท่อไอเสียหรือเมืองเล็กๆ ที่มีต้นไม้มากกว่าผู้คน คุณภาพอากาศจะส่งผลต่อชีวิตคุณ ที่อาศัยอยู่ในซอลท์เลคซิตี้ เราพบการผกผันในฤดูหนาว การผกผันคือชั้นของอากาศร้อนที่ดักจับอากาศเย็น รวมทั้งมลภาวะในอากาศที่เกิดขึ้น ทำให้เกิดหมอกควันในหุบเขาซอลท์เลค การผกผันเหล่านี้บางครั้งอาจอยู่นานเป็นวันหรือเป็นสัปดาห์ และอาจเปลี่ยนแปลงได้ทุกวันทั้งนี้ขึ้นอยู่กับสภาพอากาศ

ก่อนเปิดตัวแอปที่เสร็จสมบูรณ์ ดังที่แสดงไว้ข้างต้น ฉันมีคำถามนับล้านข้อที่ฉันต้องเข้าใจก่อนจึงจะเริ่มสร้างการออกแบบตามโซลูชันและสมมติฐานเพียงเล็กน้อยได้

งานโดยรวมในการสร้างแอปตรวจสอบคุณภาพอากาศนั้นน่ากังวล แต่เมื่อผมแบ่งมันออกเป็นชิ้นเล็กๆ มันดูไม่น่ากลัวเท่าไหร่ อันที่จริง ขั้นตอนแรก: เพื่อสร้างการออกแบบด่วนที่สามารถช่วยให้ฉันเข้าใจการจัดระเบียบข้อมูล ดูเหมือนจะตรงไปตรงมา ฉันได้ดำเนินการตามกระบวนการเริ่มต้นนี้มาก่อนร้อยครั้งสำหรับลูกค้าหลายราย ทุกโครงการเริ่มต้นด้วยโครงลวดไวท์บอร์ด และผู้ออกแบบทำงานเพื่อสร้างการออกแบบเบื้องต้นจากนั้น อย่างน้อยนั่นคือสิ่งที่นิสัยของฉันบอกฉัน

จำนวนสมมติฐานที่ฉันทำในโครงร่างด้านบนและการออกแบบเบื้องต้นที่ฉันพิสูจน์แล้วว่าผิดในระหว่างกระบวนการทั้งหมดนั้นน่าประหลาดใจ

ปลอมมันจนกว่าคุณจะสร้างมัน

ฉันอัปโหลดการออกแบบคงที่สองสามแบบที่ฉันทำ — หลังจากที่ฉันสร้างโครงร่างโครงร่าง — ไปยัง InVision ด้วยเหตุนี้ ฉันจึงสามารถเปิดแอปปลอมได้ตลอดทั้งวัน รู้สึกอย่างไรกับการใช้แอพในขณะที่ฉันรออาหารเย็นเพื่อทำอาหาร? ระหว่างที่ฉันกำลังขึ้นรถ? ฉันสังเกตเห็นได้อย่างรวดเร็วว่ามีคำถามเกิดขึ้นซ้ำๆ มากมาย สีหมายถึงอะไรอีกครั้ง? สีส้มแย่กว่าสีเหลืองใช่ไหม? แต่ดัชนีคุณภาพอากาศ (AQI) อยู่ระหว่าง 0–500 ทำไม? และเหนือสิ่งอื่นใด คำถามที่ฉันเคยมีคือ คำถามนี้ส่งผลต่อวันของฉันอย่างไร ฉันสามารถออกกำลังกายข้างนอกได้หรือไม่?

จากคำถามซ้ำๆ มากมายที่ฉันมีเกี่ยวกับมลภาวะและผลกระทบที่มีต่อวันของฉันได้อย่างไร ฉันจึงเริ่มเพิ่มหน้าจอปลอมใน Invision ที่อาจทำหน้าที่เป็น "แผ่นโกง" สิ่งที่เริ่มต้นจากคำจำกัดความง่ายๆ ของสารก่อมลพิษ มีไว้เพื่อช่วยเตือนฉันในขณะที่ออกแบบและพัฒนาแอปจบลงด้วยการเพิ่มแอปเป็นคุณลักษณะขั้นสุดท้าย ในตอนนี้ ในแอปปัจจุบัน การแตะที่ชื่อสารก่อมลพิษจะนำผู้ใช้ไปสู่คำจำกัดความพร้อมรายการแหล่งข้อมูลและลิงก์ไปยังข้อมูลเพิ่มเติม (ขั้นตอนดังกล่าวแสดงอยู่ด้านล่างในภาพหน้าจอของแอปปัจจุบัน) ฉันพบว่าบางครั้ง ข้อมูลที่เป็นประโยชน์ต่อผู้ออกแบบหรือนักพัฒนาก็มีประโยชน์กับผู้ใช้ เช่นกัน

ตามปกติ ดังที่แสดงในโครงร่างโครงร่างก่อนหน้านี้ ฉันหันไปหา UI เพื่อเพิ่มและจัดการสถานที่ผ่านรหัสไปรษณีย์ แต่หลังจากใช้ต้นแบบปลอม ฉันพบว่ากระบวนการนั้นลำบาก เหตุใดจึงต้องให้ผู้ใช้ดำเนินการตามขั้นตอนทั้งหมดนั้น จะเป็นอย่างไรถ้าฉันขับรถไป Park City เพื่อเล่นสกีหนึ่งวัน หรือเกาะละมั่งสำหรับวิ่งเทรล? Salt Lake City สถานีตรวจวัดคุณภาพอากาศ จะไม่อยู่ใกล้ที่สุดอีกต่อไป

ในแต่ละวัน ฉันพบว่าฉันใส่ใจเฉพาะคุณภาพอากาศที่ตำแหน่งปัจจุบัน ของฉัน ไม่จำเป็นว่าจะต้องอยู่ที่ตำแหน่ง บ้าน ของฉัน และโชคดีสำหรับฉัน iPhones มาพร้อมกับ GPS ระดับผู้บริโภคที่ดีและ API บริการระบุตำแหน่ง ดังนั้นฉันจึงลบตำแหน่งทั้งหมด สร้าง/อ่าน/อัปเดต/ลบ UI และโฟลว์จากแอป ฉันตัดสินใจว่าภาพรวมตำแหน่งปัจจุบันจะเร็วและมีประโยชน์มากที่สุดสำหรับทุกคน ผู้ใช้คนเดียวที่ฉันสามารถจินตนาการได้ว่าสิ่งนี้จะทำให้หงุดหงิดคือผู้ใช้ระดับสูงกำลังตรวจสอบสถานที่หลายแห่ง แต่การย้ำเตือนถึงเป้าหมายเดิมของฉัน—เพื่อลดความซับซ้อนของคุณภาพอากาศ—เพิ่มความมั่นใจให้กับการตัดสินใจของฉัน

เพื่อทดสอบสิ่งนี้ ฉันได้สร้างหน้าจอปลอม ขึ้น เพื่อทดสอบใน InVision แทนที่จะแตะผ่าน UI ปลอมและดูโฟลว์ ฉันตั้งค่าต้นแบบให้ทำตามขั้นตอนอัตโนมัติของการอัปเดตตำแหน่ง GPS ปลอมของฉันด้วยการเปลี่ยนเวลาตามกำหนดเวลา จากนั้น เมื่อฉันไปที่ร้านกาแฟในนอร์ทซอลท์เลคหรือขับรถไปที่พาร์คซิตี้ ฉันจะเปิดแอปปลอมและดูการอัปเดตและแสดงข้อมูลใหม่สำหรับสถานที่ต่างๆ ให้ฉันดู

ครั้งแรกที่ฉันใช้ต้นแบบใหม่นี้ ฉันสามารถบอกได้ว่าเป็นการปรับปรุงครั้งใหญ่ เมื่ออุปกรณ์มีคุณสมบัติในตัวบางอย่าง การ ใช้คุณลักษณะเหล่านั้นอาจส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้นโดยการออกแบบ อินเทอร์เฟซ น้อยลง มันคงเป็นเรื่องยากสำหรับฉันที่จะได้ข้อสรุปนี้ หากฉันไม่เคยออกจาก Photoshop และไม่คิดว่าจะมีแอปตรวจสอบคุณภาพอากาศในโทรศัพท์ของฉัน

เริ่มต้นด้วยรหัส

ในโครงการของลูกค้าจำนวนมาก ฉันได้แนะนำและควบคุมการทดสอบผู้ใช้ สำหรับ Air Lookout นั่นไม่ใช่ตัวเลือก ฉันรู้แล้วว่าจะมีกำไรเพียงเล็กน้อยและการทดสอบโดยผู้ใช้นั้นอยู่นอกงบประมาณของฉันอย่างแน่นอน ฉันรู้ด้วยว่าจะมีผู้ใช้และข้อเสนอแนะเมื่อเปิดแอป ทุกสิ่งที่ฉันทำได้เพื่อลดความซับซ้อนของแอปจะทำให้สิ่งนี้เร็วขึ้น ในใจของฉัน ฉันอยากจะเปิดตัวแอพที่ออกแบบมาอย่างดีที่ง่ายกว่า และรับคำติชมจากผู้ใช้ แทนที่จะต้องเสียเวลาเป็นเวลานานในแอปพลิเคชันที่ซับซ้อนมากซึ่งมีการสันนิษฐานที่ผิด

นิสัยของฉันบอกฉันว่าขั้นตอนต่อไปหลังจากใช้ต้นแบบ InVision ควรเป็นการทำซ้ำการออกแบบ นี่จะเป็นกระบวนการสำหรับโครงการของลูกค้าในลักษณะนี้ อย่างไรก็ตาม ฉันมีคำถามมากมายเกี่ยวกับคุณภาพของข้อมูลและข้อกังวลว่าฉันสามารถรับข้อมูลบน iPhone ของฉันได้อย่างน่าเชื่อถือโดยใช้ UIKit หรือไม่ แทนที่จะกลับไปที่ Photoshop ฉันเปิด Xcode

เพื่อให้บรรลุฟังก์ชันการทำงานที่ต้องการ ฉันได้สร้างแอป iOS แบบมุมมองเดียวที่เรียบง่าย (และเสียเป็นส่วนใหญ่) ซึ่งจะแสดงข้อมูล จริง ในขั้นต้น แอปไม่แม้แต่จะรีเฟรชด้วยตัวเอง ฉันต้องฆ่าแอปด้วยตนเองและเปิดใหม่อีกครั้งหากต้องการข้อมูลใหม่ แต่อย่างน้อยก็มีข้อมูลล่าสุดและข้อมูลที่เกี่ยวข้อง (รวมถึงตำแหน่งของฉันด้วย!)

…และกลับสู่การออกแบบ

มีการตัดสินใจในการออกแบบมากมายที่ฉันทำในโค้ดในขณะที่สร้างต้นแบบคร่าวๆ นี้ซึ่งจบลงด้วยดี ที่เห็นได้ชัดเจนที่สุดคือบล็อคสีขนาดใหญ่ที่แสดงสี AQI และข้อความแสดงตำแหน่งขนาดใหญ่ ฉันไม่เคยทำงานในลักษณะที่ขั้นตอนการพัฒนาแจ้งการออกแบบภาพเช่นนี้ แต่ฉันไม่แน่ใจว่าฉันจะค้นพบสิ่งนี้ในขณะที่ทำงานในเครื่องมือออกแบบแบบดั้งเดิม เช่น Photoshop หรือ Sketch ท้ายที่สุด ฉันแค่เปลี่ยนสีพื้นหลังเพราะฉันขี้เกียจเกินไปที่จะสร้าง UIView อื่นเพื่อแสดงสี AQI

จากนี้ไป การนำภาพหน้าจอมาไว้ใน Photoshop และปรับแต่งเพิ่มเติมทำได้ง่ายพอสมควร การเล่นด้วยการเว้นวรรคและขนาดการพิมพ์ใน Photoshop ทำได้เร็วกว่ามาก แทนที่จะรอให้แอปคอมไพล์ใหม่หลังจากการเปลี่ยนแปลงทุกครั้ง (โดยเฉพาะอย่างยิ่งเมื่อพิจารณาว่าสิ่งนี้กลับมาใน Swift 2 วัน)

กระบวนการออกแบบซ้ำสำหรับมุมมองที่ตามมาหลายๆ ครั้งจบลงด้วยรูปแบบที่คล้ายคลึงกันในเรื่องนี้ ฉันจะสร้างต้นแบบการทำงานแบบคร่าวๆ ซึ่งก็คือการทำอิมโพรไวส์การออกแบบอย่างรวดเร็วในโค้ด ใช้งานได้สองสามวันหรือหลายสัปดาห์ จากนั้นจึงสร้างและแก้ไขมุมมองใหม่ใน Photoshop เนื่องจากฉันเคยใช้ต้นแบบมาก่อนก่อนที่จะมีการออกแบบสแตติกใดๆ เกิดขึ้น ฉันจึงเป็นผู้เชี่ยวชาญในมุมมองที่ต้องการหรือไม่ต้องการ และการจัดลำดับความสำคัญและลำดับชั้นควรอยู่ที่ใด

หนึ่งในความประหลาดใจที่ยิ่งใหญ่ที่สุดสำหรับฉัน จากขั้นตอนนี้ คือการสร้างต้นแบบการทำงานที่แสดงข้อมูลและการอ่านอย่างถูกต้อง ฉันเข้าใจข้อมูลก่อนที่จะเริ่มขั้นตอนการออกแบบสแตติกด้วยซ้ำ ในฐานะนักออกแบบ ฉันจะเริ่มทำตัวเป็นผู้เชี่ยวชาญในการอธิบายความซับซ้อนของคุณภาพอากาศได้อย่างไร หากตัวฉันเองไม่เข้าใจว่ามันทำงานอย่างไร การสร้างและการใช้ต้นแบบคร่าวๆ เหล่านี้ทำให้ผมได้รับประสบการณ์และความเชี่ยวชาญในระยะเวลาอันสั้น

…ตลอดไป

หลายคืน ฉันจะกลับไปกลับมาระหว่าง Photoshop และ Xcode หลายครั้ง ในที่สุด ฉันก็รู้สึกสบายใจที่จะใช้เครื่องมือใดๆ ก็ตามที่รู้สึกว่าเร็วที่สุดสำหรับปัญหาใดๆ ที่ฉันกำลังแก้ไข บางครั้งก็เป็นโค้ด และบางครั้งก็เป็นเครื่องมือออกแบบดั้งเดิมอย่าง Photoshop ที่น่าสนใจคือ Photoshop ไม่ใช่เครื่องมือที่เร็วที่สุดในการค้นหาโซลูชันการออกแบบภาพเสมอไป โดยเฉพาะอย่างยิ่ง หากต้องจัดการกับข้อมูลแบบไดนามิก

ชันสูตรพลิกศพ

หลังจากเปิดตัว Air Lookout เป็นเรื่องยากที่จะบอกได้ว่าการตัดสินใจของฉันถูกต้องหรือไม่ ฉันได้รับอีเมลบางส่วนจากผู้ใช้ที่บ่นว่าการค้นหาและเพิ่มสถานที่แบบเดิมหายไป อย่างไรก็ตาม ฉันดีใจที่ได้ใช้แนวทางที่ง่ายกว่านี้ การค้นหาตำแหน่งเป็นคุณลักษณะที่ฉันสามารถเพิ่มลงในแอปได้เสมอหากมีการขอความคิดเห็นจากผู้ใช้มากพอ ฉันรู้สึกมั่นใจว่าข้อสรุปของฉัน ซึ่งมาจากการใช้ต้นแบบปลอมเป็นประจำ เป็นการตัดสินใจที่ถูกต้อง

ในทำนองเดียวกัน มีการตัดสินใจด้านการออกแบบมากมายที่ฉันทำในโค้ดที่ลงเอยในแอปสุดท้าย หากไม่มีบล็อคสี (และการตัดสินใจอื่นๆ ในลักษณะนี้) มีโอกาสดีที่แอปของฉันจะดูเหมือนแอปคุณภาพอากาศอื่นๆ ที่มีอยู่

ถ้าฉันต้องทำขั้นตอนนี้ซ้ำแล้วซ้ำเล่า มันคุ้มค่าที่จะสร้างต้นแบบโครงร่างแบบโต้ตอบที่มีส่วนประกอบ UIKit ในสต็อก โดยพื้นฐานแล้วการข้ามต้นแบบ InVision และเริ่มต้นด้วยรหัสต้นแบบ จากจุดนั้น มันจะง่ายกว่ามากในการเริ่มการออกแบบสแตติกโดยรู้ว่าส่วนประกอบ UIKit นั้นคุ้มค่าหรือไม่น่าสนใจ และ มีความเข้าใจอย่างครอบคลุมเกี่ยวกับความสัมพันธ์ของข้อมูลและข้อมูลที่ฉันต้องทำงานด้วย จากนั้น แทนที่จะแตะรอบๆ ต้นแบบ InVision ปลอม ฉันจะได้รับประสบการณ์แอปที่สมจริงยิ่งขึ้นด้วยข้อมูลจริงเร็วกว่านี้

ความเป็นจริงและการประยุกต์ใช้

ในอดีต โดยเฉพาะอย่างยิ่งเมื่อฉันเคยทำงานที่เอเจนซี่ ฉันจะแนะนำให้สำรวจการออกแบบอย่างละเอียดและทำซ้ำก่อนที่จะเสียเวลาอันจำกัดของนักพัฒนาในการสร้างบางสิ่งโดยอิงจากสมมติฐานในช่วงแรก (โดยเฉพาะอะไรก็ตามที่อาจจะต้องเปลี่ยนหรือปรับปรุงในภายหลัง) ). อย่างไรก็ตาม ตอนนี้ ฉันรู้สึกทึ่งมากขึ้นกับความเป็นไปได้ของนักออกแบบและนักพัฒนาที่ทำงานร่วมกันเพื่อสร้างต้นแบบแอป wireframe ที่แตะได้ซึ่งสร้างขึ้นจากส่วนประกอบดั้งเดิมเพื่อทดสอบและตรวจสอบสมมติฐานหรือแนวคิดในช่วงแรกๆ

บางทีทีมอาจสร้างขึ้นจากบุคคลที่มีความสามารถในทั้งการออกแบบและพัฒนาเพื่ออำนวยความสะดวกในกระบวนการนี้ (และขจัดอุปสรรคทางความหมายระหว่างสองบทบาทต่อไป) ฉันมั่นใจว่านี่เป็นกระบวนการที่มีประสิทธิภาพมากขึ้นสำหรับการออกแบบและการพัฒนา ซึ่งจะทำให้พื้นฐานการออกแบบของโปรเจ็กต์แบบโต้ตอบมีรากฐานที่แข็งแกร่งขึ้นมาก

ตอนนี้ ความท้าทายสำหรับฉันคือการหาวิธีขายลูกค้าในกระบวนการที่แปลกใหม่นี้

หมายเหตุ : Air Lookout เปิดตัวในปี 2559 และสามารถดาวน์โหลดได้จาก App Store