CourseNetworking v5 Mobile Redesign
In this project, I was tasked with redesigning the mobile site for CourseNetworking (CN), a Learning Management Software, updating it from Version 3 to Version 5. This was an opportunity for me to use many of my UX skills, including user-centered design, organization, information architecture design, streamlining content, and making intuitive user interfaces.
My goals for this project included:
- Reduce visual clutter: On many pages in CN, there were more than 20 options presented on screen as soon as you load the page. This is frequently overwhelming, and sometimes it is not even an object you can interact with, so I looked to move or reduce the lesser used options.
- Efficient UI: Many excess options were moved to collapsable menus or settings buttons so that advanced users could still access them quickly, while newer users learning the user interface would not be distracted or overwhelmed.
- User-centered design: Many of the buttons and menus have been moved so that they could be easily accessed by a mobile user holding a phone in their hand.
- Simplicity: The ultimate goal of this exercise was to greatly simplify the site and reduce choice anxiety, and focus on the most common usage.
Problem: The v3 mobile site is unoptimized for mobile users and is visually cluttered, leading to confusion. How can we design a user-centered mobile site, with physical and visual elements considered?
Process: The design process began with identifying the issues with the current site, and reimagining them with mobile users in mind. I did this by drawing from my own experiences, researching competing LMS and social media mobile sites, and considering the most frequently used parts of a page.
Solution: By greatly reducing the amount of visual clutter on screen, the user can focus on the task they need to complete without being distracted or intimidated by a confusing user interface. Excess options can be moved to collapsable menus or settings buttons, retaining focus on the main interactions.
The Home Page
Choice reduction: the top filter tab was reduced to a menu to cut down on over 17 options. Floating buttons were removed and replaced with a bottom nav bar, as well as a hamburger menu for the left pane.
User-centered: the post button was moved to the right side, with consideration to mobile users holding a phone in their hand and using their thumb.
Clear visual language: the top left button previously opened a menu, despite looking like a “back” button. Changes like this were made to make the page easily readable and usable at a glance.
Posting in v5
Simplicity: many of the excess text options were moved to the bar directly below the text field. Title and placeholder text was also grayed out.
Clarity: visual clutter was greatly reduced, allowing user to focus on the main task and post section. The options and text on the post themselves were also simplified.
Minimalism: Excess text was removed and options were realigned to the page, allowing for ease of use.
In August of 2019, CourseNetworking Version 5 launched after multiple months of iterative testing, design finalization, and development. Reviews from users were overwhelmingly positive, and the team continues to build from feedback and test the site regularly to ensure a great user experience.