Udemy's landing page (left) vs. Skillshare's landing page (right)
Udemy Sprint
A two-week design sprint where I modernized Udemy's UI to enhance the customer experience for web and mobile.
Overview
The Company: Udemy is an open online course platform that provides courses for learning or enhancing particular skills.
Task: For this personal project, I redesigned the key screens that users would land on when looking to sign up for a course.
Target Users: Professional adults and students
My Role: UX/UI designer
Practices: UX/UI, Visual Design
Timeline: 2 weeks, April 2021
Problem
Udemy offers an impressive collection of affordable courses but is often overshadowed by its popular competition, Skillshare.
I believe an update on their UI would improve the site's first impressions of visitors. Visually, it's a bit plain and text-heavy, it did not appear as engaging/eye-catching to me.
Screenshots of the featured courses section (left) and CTAs (right) on the same landing page look like they're from two separate websites.
Existing design
Udemy's site presented a simple visual style and minimal colour scheme.
Some things that stood out to me:
The branding wasn't so apparent due to the absence of their brand colours throughout the site.
There were too many text styles used, making the typography choices look inconsistent.
The pages were long and didn't exactly flow visually.
Important information and CTAs do not appear to be prioritized
Feel free to hover your cursor over the mockups below and scroll through their site design at the time of this project.
Rough sketches of the three key screens
Scope & Goals
Since it was a short-term project, I focused on three key screens that users would come across when visiting the site to sign up for a course:
Landing page
Course library
Course information page
The goals are to make the content hierarchy more apparent, reduce crowding, and create a more consistent visual style.
Outcome
I designed high-fidelity mockups of the landing page, course library page, and course information page for both web and mobile layouts.
Landing page
I designed their landing page with a focus on conversion, to get users to sign up for a course. Doing so consisted of cleaning up their current landing page contents and only including elements that were necessary for conversion, some of these include previewing a few popular courses and adding call-to-action buttons throughout the page to make the task more accessible.
Course library
When users browse through courses or categories, they are brought to this course library page. Here, they can look through a variety of courses and filter them based on their preferences.
I found that there was a lot of redundancy in their current course library, since "Popular courses," "Most popular," "Featured," and "Trending" all seemed to refer to the same thing. I thought it was unnecessary to make multiple sections so I decided to merge them into one section and present the rest of the courses beneath it, similar to how an online shopping site displays its catalog of items. I made filters available on the sidebar for easy access as well.
Course information page
Once users click on a course, they will be brought to this page for more details about the course. Udemy's current course information page felt very text-heavy which, due to the nature of this page, made sense but could be improved with some layout changes.
I broke the text into sections and put the interactive sections into cards to make them feel more inviting to click on. I modified the page arrangement similarly to how a product in an e-commerce site would be presented:
Product name & image // Course title & video preview
Description, features, and price
Company/seller // Instructor information
Ratings and feedback
I thought that this layout was effective in online shopping sites, and since this page's goal is to make a user purchase a course, I thought it would be fitting to apply it here.
Mobile layouts
Mobile traffic is sometimes overlooked in websites, but is actually more common than it used to be. Because of this, I wanted to make my design responsive by creating mobile layouts for Udemy's site.
Style guide and component library
UI Design
Visual Style
Since this website looked a bit outdated, I decided to use this project to apply current UI trends, like rounded corners, drop shadows, increased padding, bold colours and fonts, and more whitespace.
By keeping the background light, the buttons and courses were able to stand out. This was important to me since I wanted them to feel inviting enough for users to interact with.
Style guide
I used the font "Raleway" for my headings/subheadings because it was legible, yet stylish. The current font being used in Udemy's site was a bit too simple and bland. I thought that giving it a more stylish font made the site look more elegant. For the body and button text, I went with "Avenir" because it is readable even in small text sizes.
The colour scheme I used is based on a dark teal that was being used throughout their existing site. I initially worked with their logo's red colour, but it looked a bit alarming when used throughout the entire site. Red is often associated with errors or stops, so I tried to keep it at a minimum.
Closing thoughts
I really enjoyed working on this project in the spare time I had between my final semester and graduation. I was so used to designing digital products from scratch (from UX research to high-fidelity outcomes) and thought that it would be interesting to do a re-design of an existing product/service this time.
I learned that there are definitely more limitations in designing something that isn't your own product, like trying to meet the company's goals, maintaining the type of textual language used, following branding guidelines, use of images, etc. It was a fun, intensive challenge and I look forward to taking on my next one!
Key skills I learned from this experience
Competitive research, rapid prototyping, information architecture, responsive design, basic HTML/CSS.
What I could have done differently
If given more than two weeks to work on this project, I would spend more time testing my designs and potentially add more screens to the redesign to demonstrate a more refined user flow.
In the future, I would also like to redesign Udemy's mobile application and create interactive prototypes.