Join Drew Bridewell for an in-depth discussion in this video Case Study: Member homepage, part of Practical UX Weekly.
- Think about the first thing you see when you sign into Facebook, Netflix, Hulu, LinkedIn, or even Amazon. This is your homepage. When you take your first glance, what do you remember? Most likely, you'll see a feed or a grid of content that is tailored just for you. Today, I want to walk you through Lynda.com's latest homepage design and talk through how we approach this experience. Let's start with context. Homepages are crucial, because it's the first thing users will see when logging into your product.
What this means is you'll need to be able to address the top common use cases within the first two seconds after a user logs into the site. The trick here is finding the common use cases your members will be experiencing. For example, our users might be thinking about the following questions. Do I want to pick up where I last left off on this course? Do I want to start a new learning path because I'm now ready to become a user experience designer? What are the new courses in photography? I wonder what's popular right now for the marketing segment? I want to review, then organize, my playlist before the holiday break.
So I have plenty of content to learn during my long flight. These are a few typical scenarios we had to consider when designing the new homepage. Along with the primary scenarios, we had to solve the problems of existing designs, which were more targeted around engagement and discovery issues. Through numerous user feedback sessions, we've learned that the majority of users needed to jump back to the content they were previously watching. We followed suit and prioritized the remaining content based on its level of importance to the user.
Following the learnings we had from our other responsive design approaches, we decided to explore a modular design system for our new homepage. This would allow us to build our different components in sections and test the ROI of each section. We could also determine which areas were not performing well by breaking them up into different modules. The new homepage is divided into two quadrants: My Stuff and Discovery. My Stuff is positioned in the left rail and Discovery is positioned in the right rail.
In My Stuff, we'll present our progress tracker, Continue Watching, and Playlists. These are launchpads to motivate users and help them pick up where they left off. Each of these modules serve a different purpose as a user could be context switching as they explore other soft skills that they may need to brush up on. These will never move. And a user will see them consistently every time they log in. For the right rail, we explored a dense amount of content to focus on getting the most valuable content above the fold.
We display the content in priority order, starting with learning paths, series, and documentaries, followed by New, Popular, and Recommended courses that a member can filter by one of the 12 segments they're interested in. With content being produced on a week-to-week basis, it was important to us to assure that our members have access to the timely content which could give them the competitive edge in their next meeting or in their next line of code they create. With the right rail's goal being focused on discovery, we took a modular approach similar to the course page, so we could grow with this page and develop an infrastructure that could allow us to try new features and a way of organizing the content based on relevance.
This could also be looked at as showing you the right piece of content in the best possible time and location. Many content organizations across the globe are tackling a similar problem of content relevance. A pattern that you might see consistently throughout the web is a content card. A typical content card across the media industry consists of a box with a graphic and actions inside, and sometimes a graphic with text over top of it. There is also a list type which is used to display more information so a user can have more context about the actual piece of content.
Each card type throughout the product has specific actions that support the needs of the users depending on their context and what they're trying to accomplish. For example, when you hover over one of our cards, you'll notice that over top of the thumbnail a member has two choices: Preview and Watch Now. When you preview, you get a light box where a user can see a description of the course along with an overview video. When you click Watch Now, a user goes directly to the course page experience where they can begin engaging with the content.
Each of these actions have different use cases. A preview is similar to watching a trailer for a movie. You get a quick overview of what the content is about. This can help a user when they're unsure whether or not they want to invest the time. And on a learning product, any chance we have to save the user time, we're going to go for it. The Watch Now scenario is more for the member who knows exactly what they want. Now, with the amount of content that is being produced, a member will often want to do a fair amount of focused discovery.
We've placed an add-to-playlist action on every single card, which allows a member to save the content for later or organize it into their very own playlist. As a user scrolls, we wanted to keep them focused on which segment tab they're in, saving the member time and energy so they can spend more time finding the content that they want to learn. As you might have noticed, Lynda.com is not an entertainment product. It's the type of product that is going to evolve with the world and learn right along with you.
Our content and product teams' goals are to deliver high-quality, professional instruction, inspiration, and timely experiences that can help you stay ahead of the curve. Now, I know that sounded like an ad. But when you're intimate with the type of content you create, you realize that it's not about the shell. It's about what's inside the shell. Think about what's inside your shell. Is it being represented in the most efficient way with regard to your users' timely goals? I'd love to hear more about how you approached your latest homepage design on our Practical UX: Lessons from the Trenches LinkedIn group.
This will help our UX community see other perspectives and techniques when working through your homepage designs.
To continue the conversation started in this course, with Drew and other user experience professionals, join Drew's Practical UX: Lessons from the Trenches LinkedIn group.
Skill Level Intermediate
Q. Where can I ask the author questions about practical UX?
A. To continue the conversation started in Practical UX Weekly with Drew and other user experience professionals, join the LinkedIn group at https://www.linkedin.com/