Project Overview

Internship project: LinkedIn China

Time: Aug 2016

Team: Beth (mobile designer), Chun (PM), Zhenghao (web dev)

My contribution: UX & UI design (web)

Audio live lecture is a new function for Chitu, a mobile app for Chinese professionals to network. This project is to address the need for speakers to upload slides through website.

 

ABOUT CHITU

Chitu is a mobile app for China's professional market developed under LinkedIn China's double brand strategy. Since its launch in July 2015, it quickly became one of the most popular professional platforms in mainland China. Below are some of Chitu's interfaces.

Try the app HERE, and view its website HERE.

 

Background

Slides uploading feature for live lectures

Recently Chitu launched its live lecture feature (similar to an audio version of Facebook Live). To achieve a better lecture experience, Chitu wants to enable speakers to upload slides through a website (which sync into mobile app) before the lecture. 

"Compromised" feature due to limited time

However, due to Chitu's rapid iteration speed, the engineering team can't finish the whole uploading function within the next several versions. After several meetings and negotiation among PM, engineering and design teams, a "compromised" user task is set as:

Users will firstly convert their PPT/Keynote into separate picture files, then upload pictures onto the website.

Here is the basic user flow:

Design challenges

Due to this extra step of "convert slides to pictures", some challenges are:

  • Informing users about the extra step
  • Instructing users to convert slides format
  • Addressing the increased chances of misoperation (missing pages, duplicate pages, internet break, etc)
  • Being adaptable when the technical constraint is removed

Ideation

Drafts

I discussed with PM about specific features and the task flow. We came up with several drafts and decided on the following one:

firstdraft-chitu.jpg

Features

  • (Re)upload pictures (core)
  • Sync with mobile app
  • Preview

Information to display

  • Lecture and speaker information
  • Tutorial as to how to convert file format

Initial Design

My initial design is a fleshed out version of the draft. I added color so that we can explore the visual design in an early phase.

drafttry.png

ITERATIONS

After the first design, we had a design critique with PM, design and development teams. Based on the feedback, I conducted further iterations. Some highlights in the iteration process are:

1. Enabling minimal editting for slides  

The initial thought was that the website doesn't allow any editing to uploaded pages in order to prevent misoperation (e.g. messing the picture order). In other words, users need to re-upload all pictures if he wants to change one slide. Considering the inconvenience and frequency of such work, we added deleting and re-uploading functions for each picture.  

Note: the slides are ordered according to their file name number (numbers are generated when files are converted)

2. Errors and edge cases

I designed pop-up windows for state changes and edge cases. E.g. repetitive file names, files failed to be uploaded, re-upload confirmation. 

3. From thumbnail to list view

I adopted list view for uploaded slides, so that users can focus more on the order and completeness of their slides, instead of the specific content within each slide. 

4. Tutorial

I asked several users to convert slides into picture format. Based on how familiar they are with the process, I designed a tutorial page for both OS X and PC systems. 

 

Final Design

User flow 

 

Highlights

Visual style, icons and specs

The visual design is set according to Chitu's design guidelines as well as its current webpages. Then I completed design specs and slicing all the UI elements.

Implementation

After the final design is decided, I worked with front-end developers to make sure the design is implemented as precisely as possible. The website was launched as http://chitu.cn/ppt (however, only invited speakers can access the website through the QR code).

It's been months since the website was shipped in Aug 2016. So far, there has been almost no reports of confusion for this confusing task. And the website has remained unchanged since. 

 

My Takeaway

  • Design is to find a best solution within constraints (e.g. technical feasibility, timeline)
  • In real-world industry practice, there is constant tradeoff between user experience (especially when they're a small portion of users) and overall product consideration