top of page

Fin

Integrated Data Analysis System

Team (13 in total):

Taveesin Sae Xu, Weihang Shao, Junxiang Ren, Kai Zhang, Xinyu Wang, Wandong Lin, Ke Chen, Xin Xin, Chuping Yi, Mengyu Xue, Weiqian Li, Junhe Piao, Xiaoke He

Role:

UI/UX designer

Programmer

Duration:

4 Weeks

Tool:

Axure RP 10, Python, HTML

Platform

Web

01

Background

Fin was a 4-weeks summer project, an essential part of my major’s curriculum ("Design Studio in the Specialty Field"). The goal was to build a web-based integrated data analysis system. Our team had chosen douban.com, the largest online community for movie reviews in China, as the subject.

douban.png

douban.com

02

Design & Leadership

We formed into 4 smaller functional groups within the team, each leaded by a small group leader to complete a responsible task: web crawler, UI/UX design (include front-end programming), back-end programming, algorithm design, and the documentation group.

My role was a small group leader for UI/UX design, and also a member in the web crawler group.

I adopted 5-level UX Design Model as the mean of guidance and scheduling for the group.

model.png

5-level UX Design Model

Prior to everything else, as I was the only one who had experience in the UI design, I held a "small lecture" to ensure other group members had an idea of how things would be going to work. Several things had been achieved:

  1. Presenting my previous UI design prototype

  2. Introducing several fundamental concepts in UI/UX design

  3. Sharing my own experience on how to get inspirations, how to design, and the difficulties that they might encounter

  4. Introducing the usage of Axure RP 10 (an UX design tool), and sharing some learning materials

smallLecture.png

Document created for the "small lecture"

Strategy Level

The strategy level was to obtain and understand the user requirement. This had been done by the whole team when we were deciding on subject for our system.

​

​

​

The scope and structure levels were to decide the functional modules in our system. Based upon the research of the user requirement, we held up a meeting with all team members, and brainstormed the functional modules that should be included in our system, and the ways we could achieve them. On the meantime, I used the white board function on the online meeting to draw the low fidelity sketches.

Scope Level & Structure Level

图片3.png
图片2.png
图片4.png
图片1.png
图片5.png
图片6.png

Low fidelity sketches

I also created a use case diagram and activity diagram.

use case.png

Use case diagram

activity.png

Activity diagram

At the end of this level, I held a meeting within the UI group, several things had been discussed.

  1. Settling the standard (ex. Page dimension, font size, font)

  2. Settling the schedule and work division

  3. Expounding of the use case diagram, activity diagram, and the low fidelity sketches

Standard.png

Standard

Skeleton Level

The skeleton layer was where the interaction design take place. The goal was to design a wireframe, which the layout and most of the interactions should be presented.

​

To monitor the progress, I held a daily group meeting at night, so all members can resolve questions together and discuss the hall of fame and hall of shame in each design

​

I also worked super closely with the web crawler group, back-end programming group, and the algorithm design group, because it was important for us to have a common knowledge about what kind of data were needed, what form were they in, and what way could they be expressed. Based on the communication, we had continuously to adjust the layouts and interactions.

图片8.png
Y6E9]}%G$DL]PV8F4U7%SDY.png
_M$8T$Z4__%G3I2EM~6}TTM.png

Wireframes

Surface Level

The surface level was where the visual design take place. In order to have a consistence artistical style, I took four efforts:

  1. Creating a mood board

  2. Creating a cloud drive where all group members can store images or materials that could be helpful

  3. Having one of interface fully decorated, so there was a sample for reference

  4. Being in charge of all final adjustments

Screenshot_20220711_224953_com.ss.android.ugc.aweme.jpg
Screenshot_20220711_225043_com.ss.android.ugc.aweme.jpg
Screenshot_20220629_075345_com.ss.android.ugc.aweme.jpg
Screenshot_20220629_080612_com.ss.android.ugc.aweme.jpg

Mood board

naming.png

Cloud drive for maaterials

03

Web Crawler - Python

Crawler.png
Data.png

04

Final achievement

Fin1.png

Login

Login

Affective design - When entering the password, the man would put on a 3D glasses.

Fin2.png
Fin3.png

Register

A label would indicate whether the field is entered correctly. As the label has a "X" or "√" instead of just pure color, it is also friendly for color blinders.

Register successfully

(Reminding the user of their password)

Fin4.png
Fin5.png

Main page

Movie detail page

- 

Rita Hayworth and Shawshank Redemption

 I had intentionally to squeeze all analytical data in one screen. Because I hope the user could obtain all information at once, so that they don't need to scroll up and down.

Fin6.png
Fin7.png

Movie detail page

- 

Rita Hayworth and Shawshank Redemption

​

This is the bottom of the page; it gives recommendations for similar movie

Market analysis tab

Graphs are mostly in red tone. Because red is a complementary color of green, the graph could be more stand out to the user.

Fin9.jpg
Fin8.jpg

Market analysis tab

A sliding bar is very helpful and efficient in adjusting number in a small and fixed range.

Classification tab

Different groups of options are separated with color and boundary, as I believe it is more refreshing for the user when dealing with so many similar buttons.

 

Besides, there are 5 buttons that could travel the user to the 5 different graphs underneath.

Fin10.jpg
Fin14.jpg

Classification tab

Forecast tab

After the user had filling in the information of their movie, they can get a forecast rating of their movie based on machine learning

Fin11.jpg
Fin12.jpg

Forecast tab

Forecast tab

recommendation for similar movie

Fin13.png
bottom of page