Workday Learning

Provides companies with the ability to create, curate, and distribute media rich content to its employee's from within an intranet environment.

Companies use this product to engage their employees in many areas of their business as well as promoting personal growth through online educational offerings.

Today, it's commonplace for employees to only log into their company's internal web portal to handle basic tasks such as requesting time off, completing compliance training, and reviewal of benefits. The solution to this problem is to create an online environment that is compelling enough to encourage users to become frequent visitors without any notifications prompting them to log in. This product is comes preloaded with a multitude of videos, online courses, and has a personalization engine to tailor the content to the viewer (based on their company profile.)

My responsibilities

Companies use this product to engage their employees in many areas of their business as well as promoting personal growth through online educational offerings.

This project consisted of 4 designers and a dedicated researcher. I worked as the lead designer on the front-end experience. My role was to explore and vet existing UI patterns that could be used. I also help to identify new patterns that needed to be built for the product. This was a distributed team across the US, Canada, and 🇮🇪 Dublin, Ireland.

Project kickoff

Before the start of the project, the business goals and objectives got defined by executive leadership. From there a team of designers, engineers, and project management was assembled. The kickoff meeting provided context to the problem, product, and audience we are aiming at for development. During this time we also had a chance to perform a market fit analysis of this product idea. During the annual Workday tradeshow called Rising a hi-fidelity prototype was presented. The product concept created an extraordinary amount of interest which ultimately provided the approval for development.

Discovery and research

Early in the process of figuring out where to start first, the design team met with the researcher that was dedicated to the team. He had been doing early research studies with Workday partners prior to the assembly of the teams that would work on this product. 110 Hours of initial research was performed across 12 customer sites over 4 countries.

A common theme surfaced and we could see that the YouTube Generation (aka Millennials) loves to watch and explore online video-driven media. We also learned that for online education purposes people want to learn what they want and not have it forced on them. With this product being aimed at making an intranet portal for company employees we needed to make this an area that encourages repeat voluntary engagement.

We tested concepts mostly in focus group settings. Once a month we would host partner calls. We would grant early adopters access to early beta releases (and static prototypes) and gather feedback from them.

Competitive analysis

Before starting to sketch out ideas I did a competitive analysis of existing learning management systems and companies that offer online training. I focused my competitive analysis research specifically in the education space since Learning would be a product that allows you to create courses and lessons (along with other types of distributed forms of media.)

Personas

The researcher that helped with testing different aspects of this product created a series of personas. These personas were based on a collection of data and findings from his introductory partner interviews at the start of this project. The design team used these personas to align our targeted experience with the target audience that will use this product.

Roughing out ideas

After analyzing all of the available research data and competitive observation findings from existing LMS apps it was time to pick up the pace and sketch ideas. I worked on some quick high-level designs to get a sense for how the information architecture, navigation, and media items should be laid out. At this stage, things are in exploration mode. These are ideas meant to be shared with the team so that we could start discussions for layout and navigation schemas.

Wireframes

I moved through countless sketches and whiteboard collaboration sessions with the team. After locking down a decent flow and many meetings with engineering to sort out what existing UI components could be used for this product I worked on assembling low-fidelity wireframes. The user navigation paths started to present themselves to the team in which we could start to optimize the best possible experience for browsing this product.

A contentious area of the product was centered around navigation. We needed to use existing components for navigation vs creating a new paradigm. As we were working on an extremely tight deadline we simply could not invest engineering time into creating a new navigation pattern.

So, for navigation, we used the existing List Widget pattern as our primary menu. (Works but looks like 💩 !!!) I needed to provide guidance to the engineering team on how the navigation flow should work. Plus, show how the filtering should work within a selected category.

High-fidelity visions

It took more than three months to lockdown "final" designs. After rounds and rounds of design reviews and UX iterations, I was able to finish up the 1st round of designs that got shipped to the engineers. The high-fidelity mocks were assembled into prototypes that we could iteratively test 1-2 times every few weeks.

We ran some small usability studies around the use of the sticky footer action bar. Before registering for a course the footer button bar defaults to the button state that shows an Enroll action. Enrolled users can navigate between lessons of a course by using the Previous / Next Lesson buttons.

Menu style redesign + thumbnail widget explorations

The menu designs needed particular focus as we needed to work with engineering to see if we had scope to build a custom menu OR if we could customize the existing Workday list pattern to display icons to the left of the link text. (If forced to use the list pattern we needed to advocate to have it allow customizations. The design team and I agreed that if we could at least add icons to this list pattern, it may look decent enough until we could build a custom pattern after the MVP release.

Many of the thumbnail layout widgets for the Learning app were brand new. There was nothing in Workday's component library that contained thumbnail images. There were multiple areas of the app that had different aspect ratios. The image thumbnails on the category (Topics) page utilized a 4:3 aspect ratio while courses, lessons, and video thumbnails use a 16:9 ratio. Designing thumbnail widget containers was a fun aspect of the project. I've found it therapeutic to explore designs for different thumbnail widgets.

Challenges

As with any project, there were plenty of challenges to work through. Some of the challenges were easier to solve than others. There were a few that stood out as major headaches during the project.

1. Finding a suitable navigation pattern
Early in the project, we explored numerous menu/navigation patterns to use for this product. We wanted to use something that was not intrusive and could get the user to where they needed with ease.

We settled on the dreaded hamburger menu pattern and it tested terribly with our early adopters of Learning. The adjoining issue was that we did not have this menu paradigm anywhere within Workday's ecosystem. With little time left to get the MVP finished and into market on time we were forced to customize an existing pattern. We had a standard list pattern that we used as our primary navigation scheme. It looks terrible but tested fine as users were able to quickly get to their destination of choice.

2. Announcements banner style
Due to heavy time constraints, the engineering team could not build a new custom banner widget. Instead, we used an existing widget that displays simple text announcements. This widget severely lacked flexibility for customizations. Also, this announcement widget is utilized by other Workday products.

Any changes we would have made to this module it would impact other products that also use it. (We needed more time to properly invest in engineering efforts to make this banner widget into a one size fits all module.)

3. SCORM (Sharable Content Object Reference Model) video format woes
This is an industry standard for e-learning videos. 79% of available e-learning packages run on this format and legacy content relies heavily on Flash! No Bueno for iOS users as Apple does not support flash media.

This was a huge barrier for the product as this release was getting launched on iOS first before other platforms. The design team and I did what we could to work on null state screens that would give a soft explaination why they could not view some of the video content that was encoded in this format. Luckily, Workday acquired a company that had a workaround solution for this issue.

4. Users were confused after enrolling in a course
During user research testing we learned that after enrolling into a course users are shown a success page. The issue is that they have to manually dismiss the page using the close icon in the top left of the screen. Then they are returned to the same course page with little indication or info about their recent registration.

The solution based on user feedback was to add a way to download the course information to a calendar and also display a high-level view of the course time, directions, and misc information on the confirmation screen. There was also an issue where we were not sending email confirmations of the course enrollments. We fixed that issue and also built in proper in-app notifications for this feature.

5. Platform pivot
At the start of the project, it was determined that we would release this product first on the iOS platform then follow-up with building Android and desktop versions. Halfway through the development of Learning, we learned from research that many users would prefer to engage in online learning oriented tasks on desktop vs mobile. While it is good practice to have a 'mobile first' approach to building websites and products, in this case, it was not ideal.

We had to quickly form another team to quickly work on the desktop equivalent of the mobile Learning product. We had even less time to design and build the desktop version. Not so fun times!! 🤯

Retrospective

When I first got assigned to work as the primary front-end designer on this product I couldn't have been more excited. This was a great opportunity to not only collaborate with the other designers and researcher that worked on different areas of the app but also to have a major role in directly working with engineering. Their hard work and willingness to allow the design team to lead the overall experience made for a great working relationship and a solid product. Many challenges were faced but we all worked together to efficiently overcome them.

The start of the design always points toward the sky but the end result sometimes does not align with high-level, future-vision explorations. This image shot above classically illustrates just a few of the iterations we had to step through based on technical constraints.

Reality bites!