Background
Online Education Platform Redesign
During my internship at QuinStreet, I created new user flows for education verticals. The client is OnlineDegrees, which offers accredited online degrees & programs. Its competitive advantage over the competitors is the ability to empower users to plan their prospects and choose the most promising outcomes in an unconstrained way. I provided iterative designs in web and mobile to reduce task times and improve users’ subjective satisfaction.
Problem Space
With faster launch of AllStar Form Flow comes greater design challenges
Due to time constraints, our engineers had to quickly ship AllStar Form Flow (UX Flows of Online Degrees & Programs Searching) with the compromise of UX. However, after I did some quick usability testings, I discovered some horrendous usability issues.
Inefficiency of Use
Users have to constantly shift between pages to search among the mixed data.
Low Visibility of Searching Process
Users mess everything up easily because they can easily lose track of each individual searching progress.
Poor Mental Model of Program Recommendation
Users have no idea what comprise a program recommendation and what key info they need to focus.
Fuzzy Information Architecture
Users are struggling with what to do next when they finish the searching process. There is no way to get back to the landing page.
Now, here come the design challenges:
How might we communicate the searching process to people?
How might we empower users to find the expected degree programs efficiently?
How might we inform users of searching progress?
Fast Iterations
Through an interactive design process, I was quickly moving between paper and digital prototyping, testing prototypes with users, and getting feedback from my manager, social media team and engineering team. From each iteration, I learned something valuable. Some helped me make small usability improvements, some helped me make major changes in my design direction.
According to the data analysis by Marketing and Media teams, we found that 90% traffic comes from mobile, so we made the decision to start with mobile then desktop. We chose the most common mobile screen resolution in 360×640 (17.9%) and desktop screen resolution in 1366×768 (23.49%) according to the statistics from StatCounter Global Stats.
Initial iterations for a clear searching process
After a few brainstorming sessions, I experimented with all different ways of walking users through degree programs searching process and designing delightful user experience: steppers, a searching guide section, tips, navigation bar, searching guide page…
I settled down with creating a degree program searching flow with steppers because users can can have detailed control over searching progress without burden of switching pages. I experimented with a few options and went with the version of the least visual clutter to effectively lead users to use the searching guide.
Second-round iterations to improve efficiency of use
As I was making progress on clear searching process, I was also thinking about what would be an easy way for people to gather key info efficiently.
I worked with social media team and engineering team to try different design solutions to figure out a balance among user needs, business goals and technical constraints. Users can see all the info at a glance without digging deep into the website.
Design Decisions
Landing Page: A more effective and intuitive design to lead users to use the searching flow.
POI Page: Users customize and limit the result.
Requesting Info Page: High Visibility of Searching Process.
Additional Programs Page: More degree program recommendation to help users find the best one.
Visual Style
Before v.s. After
Blue Color
Regarding color choices, I chose blue color. The blue create a professional identity, yet the hues upgrade the perception of the company in a techy way.
Layering Levels of Navigation from Top-to-bottom
To direct their attention to the right info, I settled down to layering levels of navigation from top-to-bottom. It not only creates beautiful hierarchy but also logical connection between views.
Persistent Stepper
A persistent stepper simplifies navigation and help users keep track of searching progress.
Validation
The changes I made were received positively from users. I also did two usability testings to gauge the effectiveness of the new design.
With the original design, the set of tasks took 65 seconds. With the new design, the set of tasks took 50 seconds. Save nearly 23%.
Users’ subjective satisfaction with the new design was higher than the original design.
Challenges
The biggest challenge for this project was to find the balance between fresh and familiar design in a redesign project. Users hate change, so it’s usually best to stay with a familiar design and evolve it gradually. In the long run, however, incrementalism eventually destroys cohesiveness, calling for a new UI architecture.
Generally, it’s best to evolve a UI with gentle changes rather than offer a totally fresh design. I thus strongly recommend getting the basic design right in the first place, before we launch, so that it can live for several years with minor updates. Before we release anything to customers, use techniques such as rapid iterative design and agile paper prototypes to thoroughly explore the design space and polish the usability.
Online Education Platform Redesign 