1.0_CourseraMobile@2x.png

Coursera // Mobile Redesign 

A redesign of the iOS and Android app focused on reducing navigation complexity, increasing course progress and aligning with brand voice and tone.

 
 
1.1_CourseraMobile@2x.png
 

Complex and inconsistent 

Coursera's mobile experience has had the unfortunate label of being a "companion" to the primary web learning experience and as a result, few resources have been allocated to driving mobile product innovation. The experience today is overly complex, has significant inconsistencies between iOS and Android, and generally feels poorly considered and quite dated. 

 
 
1.2_CourseraMobile@2x.png
 

A first class citizen  

With the goal of elevating the mobile platform to first class citizen, we kicked off an aggressive quarter of work aimed at revolutionizing the mobile user experience. We started with a comprehensive audit of both the iOS and Android apps, examining areas of friction and highlighting inconsistencies.

 
 

iOS Audit

 
1.3a_CourseraMobile@2x.png
1.3_CourseraMobile@2x.png
 

Android Audit

 
1.4a_CourseraMobile@2x.png
1.4_CourseraMobile@2x.png
 

Architecture

We emerged from the audit process with a refined application architecture that removed several layers of navigation and provided for cross platform consistency. 

 
 
1.5_CourseraMobile @2x.png
 

Ideation

Cross functional brainstorms helped uncover current pain points and reveal opportunities for improving the user experience. Sketching workshops, whiteboarding sessions and wireframe explorations helped refine our concepts. 

 
 
1.6_CourseraMobile@2x.png
 
1.7_CourseraMobile@2x.png
 

 

Validation

Moving into user testing, we built two high fidelity prototypes in Principle and tested the designs on device. The new designs illustrated significant changes to course navigation, progress and you are here indicators, next step suggestions and several smaller interaction changes like our "week switcher" concept that we were interested in validating with users. 

 
 
1.8_CourseraMobile@2x.png
 
 
 

Research findings

Emerging from research, we synthesized the findings and bulleted out key takeaways that served as guiding principles as we continued to iterate on and refine primary screens and interactions. 

 
 
2.0_CourseraMobile@2x.png
 

 

Detailed design

As we prepared for our final handoff with engineering, we refined our motion interactions and delivered spec documents detailing out states and interactions across all our primary screens.

 
 
FinalCardSwipe.gif
 
 
 
 
 

 

New web experience beginnings

 
2.4_CourseraMobile@2x.png
 
 
 
CourseHome.gif