Ulta Day of Code

Coding is essential for helping students thrive in a future driven by technology. Apple & Ulta Beauty believe that everyone should have the opportunity to learn to code.

The Everyone Can Code initiative expands opportunities for students to develop coding skills and explore career pathways.

Ulta Beauty is proud to participate in this initiative by hosting its first ever “Day of Code” from which we hope to inspire the next generation of innovators by volunteering our time and expertise with Chicago Public Schools.

Transcript

1. CONFIDENTIAL & PROPRIETARY 2018 1
2. CONFIDENTIAL & PROPRIETARY 2018 2
3. CONFIDENTIAL & PROPRIETARY 2018 3
4. CONFIDENTIAL & PROPRIETARY 2018 4 Ulta Beauty Day of Code Company Overview
5. CONFIDENTIAL & PROPRIETARY 2018 5 Differentiated Offering 1,074 convenient locations in 48 states, 90% off-mall More than 35,000 Employees 20,000+ SKUs, 500+ brands: All Things Beauty. All In One Place. Full service salon with hair, skin, brow and makeup services TM Locations Products Services
6. CONFIDENTIAL & PROPRIETARY 2018 6 Loyalty Program Is One Of Our Most Valuable Assets DRIVERS OF ACCELERATED GROWTH RATE 27.8M active members as of February 2018 Strong member retention Enhanced brand partner engagement Increasing focus on targeted CRM campaigns Rolled out credit card program to gain greater share of beauty wallet Launched Diamond tier for guests who spend more than $1,200/year Increasing personalization of offers and content
7. CONFIDENTIAL & PROPRIETARY 2018 7 $0 $100 $200 $300 $400 $500 $600 2013 2014 2015 2016 2017 E-COMMERCE SALES ($ MILLIONS) Top line growth of 65% in 2017, ~10% of total sales E-commerce sales are largely incremental Guest behavior focused on trial and discovery Enhancing omni-channel capabilities and expanding assortment with online only brands Improvement in fulfillment capabilities, targeting 95% of orders delivered in 3 days by 2018 $96 $150 $221 $345 $569 Driving Rapid E-Commerce Growth
8. CONFIDENTIAL & PROPRIETARY 2018 8 Ulta Beauty Day of Code User Experience
9. CONFIDENTIAL & PROPRIETARY 2018 9 USER EXPERIENCE DESIGN KNOW HER & CREATE FOR HER • User Experience (UX) is the experience that a guest (user) has while interacting with our product (digital, physical, or service). • UX Design is the process by which we determine what that experience will be: knowing our guests’ needs, knowing the business’s goals, and creating the experience that marries the two. OUR GOAL • Understand our guests’ and business’s needs to create useful, usable, delightful, and engaging interactions that will increase guest loyalty to Ulta Beauty. Jenny Urban Sasha Smith Sr. Digital Experience Manager User Experience Associate EXPERTISE • eCommerce • User Experience (UX) • UX Process & Strategy • Mobile EXPERTISE • Beauty SME • Customer Ratings & Reviews • User Experience • Content
10. CONFIDENTIAL & PROPRIETARY 2018 PROCESS | UX 10 RESEARCH • Journey Mapping • Stakeholder Interviews • Customer Interviews • Customer Survey • Competitive Analysis • Heuristic Analysis • Metrics Review • Heat Map Reviews • Session Cam Reviews • External Research Review • A/B Testing • Analytics Review • Card Sorting • Tree Testing Discover & Define
11. CONFIDENTIAL & PROPRIETARY 2018 PROCESS | UX 11 wires/comps prototype internal input user testing RESEARCH • Journey Mapping • Stakeholder Interviews • Customer Interviews • Customer Survey • Competitive Analysis • Heuristic Analysis • Metrics Review • Heat Map Reviews • Session Cam Reviews • External Research Review • A/B Testing • Analytics Review • Card Sorting • Tree Testing TEAM COLLABORATION • Brainstorm Sessions • Cross Team Working Sessions • Design Review CREATE • Use Case & Scenario Creation • User Flow • Sketching • Wireframe Creation • Prototype Creation RESEARCH • User Testing • Identify A/B Testing Opportunities Concept & Design Discover & Define
12. CONFIDENTIAL & PROPRIETARY 2018 PROCESS | UX 12 wires/comps prototype internal input user testing RESEARCH • Journey Mapping • Stakeholder Interviews • Customer Interviews • Customer Survey • Competitive Analysis • Heuristic Analysis • Metrics Review • Heat Map Reviews • Session Cam Reviews • External Research Review • A/B Testing • Analytics Review • Card Sorting • Tree Testing TEAM COLLABORATION • Brainstorm Sessions • Cross Team Working Sessions • Design Review CREATE • Use Case & Scenario Creation • User Flow • Sketching • Wireframe Creation • Prototype Creation RESEARCH • User Testing • Identify A/B Testing Opportunities TEAM COLLABORATION • Brainstorm Sessions • Cross Team Working Sessions • Design Reviews CREATE • Flow Maps • Wireframe Spec • Copy w/ Copywriter Concept & Design Discover & Define Document
13. CONFIDENTIAL & PROPRIETARY 2018 PROCESS | UX 13 wires/comps prototype internal input user testing Develop & QA RESEARCH • Journey Mapping • Stakeholder Interviews • Customer Interviews • Customer Survey • Competitive Analysis • Heuristic Analysis • Metrics Review • Heat Map Reviews • Session Cam Reviews • External Research Review • A/B Testing • Analytics Review • Card Sorting • Tree Testing TEAM COLLABORATION • Brainstorm Sessions • Cross Team Working Sessions • Design Review CREATE • Use Case & Scenario Creation • User Flow • Sketching • Wireframe Creation • Prototype Creation RESEARCH • User Testing • Identify A/B Testing Opportunities TEAM COLLABORATION • Brainstorm Sessions • Cross Team Working Sessions • Design Reviews CREATE • Flow Maps • Wireframe Spec • Copy w/ Copywriter TEAM COLLABORATION • Review in Progress Dev • Work through Needed Changes CREATE • Update Wires and Design as Needed VERIFY • UAT Testing & Reporting Concept & Design Discover & Define Document Implement
14. CONFIDENTIAL & PROPRIETARY 2018 PROCESS | UX 14 Launch Learn wires/comps prototype internal input user testing Develop & QA RESEARCH • Journey Mapping • Stakeholder Interviews • Customer Interviews • Customer Survey • Competitive Analysis • Heuristic Analysis • Metrics Review • Heat Map Reviews • Session Cam Reviews • External Research Review • A/B Testing • Analytics Review • Card Sorting • Tree Testing TEAM COLLABORATION • Brainstorm Sessions • Cross Team Working Sessions • Design Review CREATE • Use Case & Scenario Creation • User Flow • Sketching • Wireframe Creation • Prototype Creation RESEARCH • User Testing • Identify A/B Testing Opportunities TEAM COLLABORATION • Brainstorm Sessions • Cross Team Working Sessions • Design Reviews CREATE • Flow Maps • Wireframe Spec • Copy w/ Copywriter TEAM COLLABORATION • Review in Progress Dev • Work through Needed Changes CREATE • Update Wires and Design as Needed VERIFY • UAT Testing & Reporting RESEARCH • Analytics Review • A/B Testing • Benchmarking • Usability Testing Concept & Design Discover & Define Document Implement Live
15. CONFIDENTIAL & PROPRIETARY 2018 15 PROCESS | UX Launch Learn wires/comps prototype internal input user testing Develop & QA Concept & Design Discover & Define Document Implement Live
16. CONFIDENTIAL & PROPRIETARY 2018 UNDERSTANDING BEST PRACTICES 16
17. CONFIDENTIAL & PROPRIETARY 2018 UNDERSTANDING BEST PRACTICES 17
18. CONFIDENTIAL & PROPRIETARY 2018 UNDERSTANDING BEST PRACTICES 18
19. CONFIDENTIAL & PROPRIETARY 2018 UNDERSTAND OUR GUEST 19 She transcends age, income, and other demographics - it’s all about attitude. She’s the woman who gets “BEAUTY BUTTERFLIES” as she shops for and experiments with beauty for FUN, EXCITEMENT, AND ESCAPE. Her world… She takes PRIDE in her SAVVY MIX of high and low She enjoys beauty and believes it is a PLEASURE, not a chore She is interested and is OPEN to ideas and TRENDS She looks at beauty rules with HER OWN filter
20. CONFIDENTIAL & PROPRIETARY 2018 20 Try On vs. Real Life Competitive Landscape DISCOVER & DEFINE | Competitive Analysis
21. CONFIDENTIAL & PROPRIETARY 2018 CONCEPT & DESIGN 21
22. CONFIDENTIAL & PROPRIETARY 2018 CONCEPT & DESIGN |Paper Sketching & Prototyping 22
23. CONFIDENTIAL & PROPRIETARY 2018 CONCEPT & DESIGN | User Testing 23
24. CONFIDENTIAL & PROPRIETARY 2018 CONCEPT & DESIGN | User Testing 24
25. CONFIDENTIAL & PROPRIETARY 2018 DOCUMENT | Wireframes & Creative Comps 25
26. CONFIDENTIAL & PROPRIETARY 2018 IMPLEMENT | Test During Implementation & Make Updates 26
27. CONFIDENTIAL & PROPRIETARY 2018 IMPLEMENT | Test During Implementation & Make Updates 27
28. CONFIDENTIAL & PROPRIETARY 2018 LIVE WE USE IT • Review the analytics • Gather feedback from guests and Ulta Beauty employees • A/B test • Identify areas of opportunity • Determine how the feature/experience should evolve WHO WANTS TO TRY?! 28 Launch Learn
29. 29 ULTA BEAUTY DAY OF CODE Designing for Mobile Apps (Demo)
30. 30 ULTA BEAUTY DAY OF CODE Welcome to Xcode (Demo)
31. 31 ULTA BEAUTY DAY OF CODE Web Services & Data Models
32. 32 APP DATA • Hard-coded data o Requires developer intervention o Violates separation of concerns o Encourages bad design o No way to update nameLabel.text = “Joe Rago” titleLabel.text = “Director, Digital Innovation” descriptionLabel.text = “Something about a comma…”
33. 33 APP DATA • Structured Data o Standardized o Easy to change o No code modifications o Encourages good design • JSON o Key-Value structure o Value types: • string • integer • number • boolean • null o Object: { } o Array: [ ]
34. 34 JSON { "name":"Joe Rago", "title":"Director, Digital Innovation", "shortDescription":"Lifelong Chicago resident who lives with his family in the West suburbs, enjoys playing/coaching sports, and listening out for the for the next big song. Huge fan of the oxford comma.", "twitter":"@joerago", "imageURL":"profiles_jrago", "favorite":"Apple Music" } nameLabel.text = data.name titleLabel.text = data.title descriptionLabel.text = data.shortDescription
35. 35 JSON { "profiles": [ { "name": "Joe Rago” … }, { “name”: ”Jeff Hamm” … }, { “name”: ”Jenny Urban” … } ] }
36. 36 JSON { “name”: ”Joe Rago”, “sessions”: 2, ”hungry”: true, “favoriteThings”: [ “commas”, “question marks”, “exclamation points” ], coworker: { name: “Nicholas Eby”, title: “Lead Developer, Digital Innovation” } }
37. 37 WEB SERVICES • Still no way to update • Web Services: JSON contract o Data is hosted outside app o Can change without app update • Data no longer controlled by you o Missing keys, null values o Changes in contract • Version your APIs • Offline app o Caching o Databases
38. ‹#› PANEL DISCUSSION
39. 39 ULTA BEAUTY DAY OF CODE Quality Assurance
40. 40 • Quality Assurance: o A process to ensure quality meets business requirements • Quality Assurance Analyst o In Short, a tester or problem solver o Document- Everything that’s found • Types of Testing o Many – System integration, comparison testing, Functional testing, Happy path Testing, Load testing, Automation testing WHAT IS QA? WHO IS QA ANALYST?
42. 42 • Why Dev can’t test their own code? o UNIT TEST !! o “Parental feelings” o Oversite the flows o Less experience with common bugs (/previous bugs) o Bandwidth ULTIMATE QUESTION!
43. 43 HIGH LEVEL FLOW Requirements Design Build Testing Release Maintenance Req. Review Test Plan Test Cases Test Execution Test Reporting Environment Set-up Bug/defect/issue PROD Support
44. 44 • Famous Tools o JIRA o Application Lifecycle management (ALM) o Visual Studio Team Services (VSTS) Automation – Cucumber, Visual Studio- CodedUI, SOAPUI TOOLS
45. 45 • ECC application o Requirement 1: Homework page Test Cases (scenarios): 1) Click on Homework - normal flow 2) Click on Homework exit app and comeback 3) Click on Homework kill the app and comeback 4) Add an item to display – Click on the Homework EXAMPLE
46. 46 ULTA BEAUTY DAY OF CODE Code Debugging
47. 47 OVERVIEW SUBHEAD SUBHEAD • What is debugging? • Approaches and techniques • Tools available • Example of debugging code • Key Takeaways Debugging Overview
48. 48 WHAT IS DEBUGGING? SUBHEAD SUBHEAD • Debugging is a process of solving a problem in an app • Much of your time developing will involve debugging! • Origin of the term o Admiral Grace Hopper o working on a Mark II Computer at Harvard University in 1947, her associates discovered a moth that was stuck in a relay • Some Types of Bugs o Compile time errors (syntax errors) o Run time errors (crashes) o Logic errors (functional errors) What is debugging?
49. 49 APPROACHES & TECHNIQUES SUBHEAD SUBHEAD • Obtain steps to repeat the issue • Define and isolate the issue (by action, environment, build, device, etc.) • Try to have a working version to test against and change one variable at a time • Complex bugs don’t always require lots of code to fix • Use any tools to help you understand what is happening Approaches & techniques
50. 50 TOOLS SUBHEAD SUBHEAD • Xcode debugger – catches compiler errors / runtime exceptions • Xcode view debugger – look at view layers • Xcode console – can view logs • Xcode breakpoints – walk thru code step by step • Xcode debug navigator and instruments – profile performance • Charles Proxy – view network traffic • Unit tests, code reviews and beta testing help prevent bugs Tools available
51. 51 EXAMPLE OF DEBUGGING CODE SUBHEAD • Runtime bug Example of debugging code
52. 52 KEY TAKEAWAYS SUBHEAD Takeaways • Debugging is a process of solving a problem in an app • Debugging includes identifying a problem, isolating the source and then fixing it • Debugging can be made easier and can be prevented by using tools and employing strategies such as unit testing, code reviews and beta testing
53. 53 ULTA BEAUTY DAY OF CODE Releasing an App (Demo)
54. ‹#› THANK YOU, STUDENTS!