Online Training in ATLAS

My role and deliverables

I was a UX Designer focusing on web applications and desktop/tablet website design. I worked on designing internal tools for employees and consumer facing websites for both Apple employees and external workers. Further, I was responsible for user research and user testing at various stages of the product design and development process. To comply with my non-disclosure agreement, I cannot share the full designs and have omitted confidential information. All information in this case study is my own and does not necessarily reflect the views of Apple.

• Help to define the user interface for Apple products
• User research, user testing, wireframes, mockups, prototypes and interaction design
• Assist in defining business objectives and goals
• Gauge the usability of new and existing products (through testing and heuristic evaluations) and making constructive suggestions for change
• Storytell and frame problems for a diverse audience of stakeholders, helping them envision the opportunities (Presentations and Business Requirements Docs)
• Collaborate with Product Management and Engineering counterparts and experience working with collaborators across time zones (UK for accessibility and India for engineering)
• Ensure that all designs are meeting accessibility standards and review coded designs through a usability and functionality lens

The team: Lines of communication 🗣️

Since Apple is a large company with many teams spanning multiple countries and continents, I interface with a number of individuals and teams throughout the world. Below is a summary of my main points of contact during a typical work week:

The broader team

18 individuals including Instructional Designers, Front-End Developers, Copy Editors, Project Managers and Executives.

My team

4 front-end developers and 1 manager. I sat with all members of my team and worked with the developers daily. Strong collaboration and communication was key to the success of launched projects and ones in progress. I ensured to involve the developers early and often. We had weekly prioritization meetings where we reviewed current work and discussed anything code or design related. I shared my sketches, mockups, prototypes and general ideas with the team to gather feedback and understand any code based limitation. This was also important to ensure the design vision is aligned with execution of the development. Moreover, we had a process and set system for naming conventions, margins, grids, file types and sizes. We also thought about edge cases often, which had an impact on design and development. Handoff included all working files, prototypes, specs and a style guide. Throughout the development process, we met daily to review the coded designs. I made notes on improvement as I reviewed the coded designs, and we often worked together on the spot to make fixes to the UI.

Back-End engineers

I interfaced with a back-end engineering team who are located in both Silicon Valley and India. This team focuses on much of the logic and mechanics of what I design. We primarily discussed functionality and localization of content for different languages. This team is very detail oriented, so I provided them with detailed specifications of my UI. This included participating in several in depth UX and UI meetings, providing the team with 100+ slide Keynote presentations that outline every iteration of every screen and element for the project(s) I'm working on, interactive prototypes and static high-fidelity mockups.

Accessibility

I met with an accessibility team based in the UK multiple times a week. We discussed usability and accessibility concerns, looking at the UI and code. This team primarily consists of accessibility engineers, and I consistently iterated the UI based on their feedback. Our general workflow included me sending static mockups and interactive prototypes to the accessibility team. Once they've had a chance to review my work, they'd send me "escalation tickets" if there were parts of my design that need iterating. We primarily focused on color accessibility, touch target sizing and positioning, hidden content, text size, how my design adapts when using a screen reader and state changes/visual cues to represent status and state changes.

Project #1: Internal tools ⚒️

My first project was redesigning an internal publishing tool to improve usability, functionality and overall design. This project was completed over a 4 month period, and has been live for almost 2 years.

The problem

Initially, employees were using 3 separate applications to complete the publishing process. From start to finish, employees expressed that it took anywhere from 10 minutes to several days to publish a single course. Employees also expressed a need for improved feedback from the application, ability to perform bulk actions and a UI that felt like "Apple."

The process

I began the redesign process with a heuristic evaluation of the original tool and conducted usability studies and interviews to understand how employees use the publishing application. I completed a full redesign, including UAT testing and close collaboration with the development team and project managers. This included initial sketches and wireframes, low-high fidelity mockups, interactive prototypes and presentations to key stakeholders and executives. I was also closely involved with the development team throughout the build out phase, and worked with accessibility to ensure accessibilities standards were being included in the new UI.

The solution

My redesign combined the 3 applications into 1 and reduced the amount of time required to complete the publication process by 90%. A large focus was placed on the ability to perform one action on an unlimited number of courses at the same time, in addition to reducing the perceived wait time while actions are being performed and a full redesign of the UI. The new publishing tool has been live for almost 2 years and the feedback has been very positive.

Solution prototype (Video)

Results

This solution saves the amount of time required to complete the publication process by 90%. What used to be a very monotonous process that took up to a week to complete for a single course, has become a fun and enjoyable process for employees. Instead of localizing 5-10 courses a day at most, employees have been able to localize hundreds of courses in hours!

Project #2: Online learning website 🌎

My second project was redesigning an online learning platform where any Apple employee (and select non-Apple employees) can go to take online training on any Apple product. This project was completed over a 10 month period, and has been live for over a year.

The problem

Any genius at an Apple store must be able to handle unique requests from customers. For example, if a customer would like their iPhone assessed and repaired, a Genius or Technician will need to know exactly what to do and how. These employees take training that my team produces and provides on an online learning platform. While previous versions have provided necessary content for Apple employees, my team has received feedback over the years on major pain points. These included an outdated design (the original site was designed by an intern in 2012), accessibility issues, non-responsive design, stale content, not intuitive, lacking functionality and a general feeling of being unmotivated to learn content because of a poor experience using the learning platform. In addition, since this website is viewed by Apple employees worldwide, localization of content has been overlooked over the years. Maintaining this as a focus throughout the design process was also key in producing a successful redesign.

The process

Similar to the first project, I began the redesign process with a heuristic evaluation of the website and conducted usability studies and interviews to understand how employees have used the site in the past. My questions were focused on design and function and the usability studies were task centric.

I completed a full redesign, including UAT testing and close collaboration with the development team and project managers. This included initial sketches and wireframes, low-high fidelity mockups, interactive prototypes and presentations to key stakeholders and executives.

The first phase was a style guide design and buildout with the development team. From there, we moved on to page buildout. As pages were being developed, I reviewed each page for design and functional consistency, in addition to ensuring accessibility requirements were being implemented.

Alongside this, I worked with my manager on a Business Requirements Document and a 150 slide Keynote presentation. Moreover, I was in contact with an accessibility team multiple times throughout the week. As they provided feedback on my designs from an accessibility perspective, I was constantly iterating them and updating the development team with the latest updates. Our general workflow included me sending static mockups and interactive prototypes to the accessibility team. Once they'd had a chance to review my work, they'd send me "escalation tickets" if there were parts of my design that need iterating. We primarily focused on color accessibility, touch target sizing and positioning, hidden content, text size, how my design adapts when using a screen reader and state changes/visual cues to represent status and state changes. Throughout the design and build phase, I was user testing with Apple employees to gather feedback, which led to quick updates.

The solution

The solution includes a redesigned UI, responsive layout for desktop, laptop and tablet, gamification elements for learning and many functionality updates to improve overall user experience. Further, the final site has one of the highest marks for accessibility amongst Apple sites (both in code and design).

As users expressed in interviews and usability studies, previous versions of the website focused on providing all content at once without taking users unique needs into account. Right from the homepage, the new design understands each unique user and provides them with personalized content that increases the value and effectiveness of their learning experience.

Results

The new ATLAS site had an initial launch to 200k global Apple employees in late 2019, and a week later there were 400-500k ATLAS users outside of Apple (Example: Sprint, Best Buy, T-Mobile). User numbers since then have continued to grow, and the feedback has been extremely positive. Users are engaged and motivated to keep learning to earn badges, work their way up the leaderboard, and have expressed gratitude in how far ATLAS has come since 2012.

Takeaways + What would I change? 💡

This project was a success in a number of ways. Being able to completely redesign an end-to-end website that hasn't been touched since 2012, and bring it up to Apple's design standard, is a challenge on its own. Something I contribute much of the success to is the team. Having the support from my manager and leadership to have full creative control, and working daily with my peers in a tight-knit group helped make ATLAS what it is today and set a strong foundation for what ATLAS will evolve into in the years to come.

One of the challenges was that since our team wasn't part of Apple's marketing and communications group, we didn't have to follow most of Apple's design guidelines and rules. This meant developing a complete style guide and design approach from scratch. While I drove the overall approach and execution of this, it took many months of feedback and iterating to perfect it.

Another challenge was aligning when our team pushed code to when the instructional designers were ready with updated courses. At times, this timing was off and we'd have a newly designed course, but the content itself was old. This happened in part because my team split from the instructional designers halfway through this project to form our own smaller team. We also sat in a different part of the campus and relied on non-in person methods of communication often.

You've reached the end of this case study!

If you made it this far, thanks so much for reading through this case study! This was one of the largest and most important projects I've worked on, from the overall global reach of the project to the project scope itself. Apple employees around the world are excited to learn with ATLAS, and that's the biggest win for me.

Want to see more projects? Click one of the links below:

Next: "eBay" - Returns on eBay
Previous: "LinkedIn" - Jobs on Flagship