11111.jpg
 
 

WHICHONE

UX/Motion design/Prototype, 2017

WhichONE is a new personalized reading experience with more information and efficiency. Based on machine learning algorithms, it enables users to interact with the web-based content and learn from their choices and filters in order to access their desired information in a more systematic way. 

 
 

Overview

Toolkits: Javascript, HTML/CSS, Cordova, Illustrator, Sketch, Framer.js

Role: UX/UI Design, Prototype in Web and Framer

Prototype link: https://framer.cloud/YUUla

Code source: https://github.com/YuqiaoQin/WhichOne

 
 

 

CHallenge

Create a reading experience help commuters read in a more efficient way.

 

OUTCOME

A mobile application design supported by research, experience design and high-fidelity prototype

 

Conceptual map

 
 
 

Experience Diagram

Information Architecture

 
 

User Flow

 
 
 

Wire Frames

 
 

User Interface Design(By sketch)

Overview the top contents today based on user's pereference

Overview the top contents today based on user's pereference

Choose the interesting one to read full content, like it? Choose as WHICHONE. No interest? Explore more through left and right drawer panel.

Choose the interesting one to read full content, like it? Choose as WHICHONE. No interest? Explore more through left and right drawer panel.

Using the slider to filter content.

Using the slider to filter content.

 
 

User Testing(HTML/JS)

 

Test goal

  • When should the "which one" button be clicked?
  • How long is one article?
  • How many articles is reasonable in the "swipe view" ?
  • Is the abstract or tag necessary?

 
 

Interactive prototype(By Framer)

Prototype link: https://framer.cloud/YUUla