YUHAO ZHONG Guangdong, China Tel: +86 138-1075-9599 Email: zyh3313748@hotmail.com Web: issuu.com/chung1264
No catalogue here
Please enjoy every part of it.
1 1
Website
1
Website Design
Confucius Institute Digital Library
Brief: The design process of Confucius Institute Digital Library. Confucius Institute is an organization which is responsible for the dissemination of traditional Chinese culture. The main target of the website is to provide a library-like online platform that allows people all over the world to obtain resources like books, newspaper, photos and other materials related to traditional Chinese culture. It was a gigantic project that we had modified several times. In this project, I was responsible for interface design and interaction improvement.
2
1
Website Design
Confucius Institute Digital Library
Challenge: The website is open to everyone, like children, students, scholars etc. So differentiation is what we should think about. In addition, considering the huge number of books in the library, how to navigate the readers to find their books seems to be the crucial task.
Original 1
2
Public
Homepage
Adolescent
3
Education
Universal homepage
Sinologist
Navigation by categories of people
Books Videos
Newspapers Magazines
Pictures ...
What a mess! 3
...
Collection of resources ( Hard to find )
1
Website Design
Confucius Institute Digital Library
Solution: By simplifying the process of obtaining resources, the website became more efficient and user-friendly. In the meantime, according to client’s need, we redesign the UI with flat style.
Improved *
Public
Adolescent
Education
1
2
Books
Newpapers
Homepage
Pictures
Sinologist
...
* One-time group selecting
( Most people select their group and won’t change again )
Magazines
...
Clear categories of resources
The improved process reduces the steps that users need to obtain their resources. Moreover, navigation that shifts from categories of people to that of resources gives users a more explicit guidance.
Seems much better! 4
2 5
Website
2
Website Design
Touchscreen System
6
2
Website Design
Touchscreen System
Brief: This is the user interface for our clients’ touchscreen Windows devices. They are often placed in a public area, like the hall of a library, or near the gate of a museum. In this project, I was responsible for wireframing and interface design.
Challenge: Since the device is based on Windows OS, we should make the interface and interaction compatible with the gestures Windows OS can recognize. In addition, the device is always set up with a 50-inch or larger monitor, so we should also consider the user context.
Solution: The design process below demonstrates how we design the prototype.
Analysis
Location - Library - Museum - Hall of department
Audience - Students - Teachers - Staffs - Visitors
Purpose
Limitation
- “Welcome” screen - Company/department introduction - Reading newspaper/books - Seeing pictures/Watching videos
- Too large monitor - Based on Windows IE browser - Limited available gestures
Frequently Touched Area
On the wall 7
On the desk
According to these two common user contexts, we found the most frenquently touched area of the screen.
2
Website Design
Touchscreen System
We drew a conclusion that the user context and the height of user determine how elements should be placed on the interface. And we made it compatible with Windows OS device.
Homepage Menu
Diplay Zone
Navigator of the homepage, is not a fixed element and can be replaced by other elements.
An area to diplay introduction, photos and videos.
Tool Bar
As it is an embedded browser, we provide similar functions.
Shortcuts to other resources.
Windows device can not recognize “swipe” gesture. We added “Page Up” and “Page Down” buttons.
We placed the tool bar at the bottom to make sure everyone can easily touch it, for it is the main navigator.
8
3 9
Case Study
3
Case Study
Apabi Reader
Brief Apabi Reader is one of the core products of my previous company, which is geared toward individual users. It is designed for mobile device reading, and supports EPUB, PDF, TXT and its own CEBX file format. I was responsible for designs of two new versions (including an iOS 7 compatible version), which covered interaction design and user interface design. And two interns helped me finish the work. I devoted most of my time to this product, when I was working at the company. Thus, I want this product to be written in the case study. Challenge The old version of Apabi Reader seemed to be out of date, for its old-fashioned UI, unfriendly interaction and complicated settings. Though it had many functions and some advanced customization, the majority of our users were normal users, which had no interest in those abstruse things.
Original Version
In addition, its bookstore part lacked a clear information architecture, so it was inconvenient for users to find books.
10
3
Case Study
Apabi Reader
Research
1. Rivals Comparison We selected 10 popular e-reading applications in Appstore for comparison and analysis. We did the research from several aspects below: - Visual Style - Interaction - Target Audience - Features - Ways of obtaining books
11
3
Case Study
Apabi Reader
Visual Style
Splash Screen
Skeuomorphism Design
Yes
Flat Design
No
In the late 2012, the mainstream of UI design was still skeuomorphism. Bookshelf with wood texture was the homepage of most e-reading apps. Icons and other elements were often with heavy shadow. Most flat designs were found in apps developed by foreign
Buttons on Homepage
We found most apps would display a splash screen when first launching the app. Though it would in some sense affect user experience, it was an efficient way to advertise their product.
Steps needed to obtain a book
4
<2
5
3-5
6
>5
Too much choices on homepage could bring users distractions. We should appropriately reduce the numbers of buttons on homepage.
Buttons on Reading Page
Book resources are essential to an e-reading app. The accessibility to resources might determine that the app could be successful or not. Also, some apps provided several default copyright-free books, which was a good solution.
Audienceâ&#x20AC;&#x2122;s Age
6
<16
7
16-25
8
26-40
9
>40
Some e-reading apps provided many functions, but some of them with low usage rates are not must-have functions. We could simplify the functions and hide some of them.
Since e-reading apps were popular among users under 40, we drew a conclusion that our product should be vivid enough to attract young people.
12
3
Case Study
Apabi Reader
Research
2. Self Analysis In this step, we focused on discovering and solving problems in Apabi Reader. The app could be divided into 4 parts: Bookshelf Page, Reading Page, Bookstore Page and Setting Page. We needed to gain some professional opinions, so we did the research on a small scale. We design a flow to perform the analysis. The specific method is shown below: - Testers: 10 people in our team and other department of our company - Test Time: 5 in the daytime, 5 at night - Duration: 3 hours - Scenarios: at office, at home, on the bus etc.
Flow
13
1
Run the app
Bookstore
China Digital Library
2
Run the app
Wi-Fi Transfer
Choose a book on PC and upload it into the app
(our exclusive resources)
Download a book
Read it
Read it
End
End
3
Download several books through 1
2 , then tap â&#x20AC;&#x153;Editâ&#x20AC;? on the bookshelf page to arrange the books.
4
Pick four favourite books (including books of TXT, EPUB, PDF and CEBX) to read for a long time period, and try all the functions.
5
After reading for half an hour, adjust the settings according to his/her preference.
3
Case Study
Apabi Reader
We gathered and analysed testers’ feedback, then made a table to list problems in each part of Apabi Reader. In the meantime, we gave our solutions, according to the “rivals comparison” .
Solutions
Problems Bookshelf
Sizes of book covers are extremely inconsistent
Too much buttons
The interface of Wi-Fi transfer was too brief and lacked guidance
Bookstore
Reading
Settings
Everytime “login” needed
Chaotic logical relationship between buttons
Unify sizes and design some default covers
Simplify functions
Redesign the interface and the upload process
Simplify “login” mechanism
Redesign the buttons’ functions
Books are directly listed in the interface, as much as 35,598 pages ( horrible experience!!! )
Change the way of displaying books to a flow mode to reduce page-turns
Lack of animations and tips
Enhance detail experience
Settings had too many unnecessary options
Make reading settings focus on reading part
Custom gesture operations could lead to misoperations
Restrict custom gesture operations
Too many advanced options and unclear classification of options
Simplify and rearrange options / Seperate the reading part settings from the global settings 14
3
Case Study
Apabi Reader
Design
1. Bookshelf Page (Homepage) Design In this part, we designed a brand-new interface, to let users pay more attention to their books. We reduced the amount of buttons by hiding some of the functions.
} swipe down {
Original ( 8 buttons ) 15
New ( 5 buttons )
New ( 3 hidden functions )
3
Case Study
Apabi Reader
Design
2. Reading Page and Settings Page Design Based on our early research, we not only redesigned the interface visually, also added new features.
Bookmark functionality appreared.
An easier entry to common reading adjustment.
We used colors close to paper to provide a immersed reading circumstance. And orange is the color of Founder Group.
Original
New 16
3
Case Study
Apabi Reader
Design
2. Reading Page and Settings Page Design Process below is a new feature we added, according to our usersâ&#x20AC;&#x2122; feedback. This process would illustrate how this new feature interacts with user.
1 Customize your background/font color
Instant preview of font color and background
3 color brightness regulator 2
17
Hold and drag the buttons to pick color. One button is for background, the other one is for font. In order to avoid confusion, they could not be activated simultaneously.
4 Choose to use single color as background or your photo
3
Case Study
Apabi Reader
Design
2. Reading Page and Settings Page Design In addition, we had redesigned the settings part, which is an essential improvement. We believe that settings are the last function users want to use. Therefore, how to reduce the learning costs of users, was our primary task. We divided the settings into two parts, reading part and global part.
(Reading part) The same button, the same funtion.
Original
Different buttons, different functions. (Global part)
New 18
3
Case Study
Apabi Reader
Design
2. Reading Page and Settings Page Design In addition, we had redesigned the settings part, which is an essential improvement. We believe that settings are the last function users want to use. Therefore, how to reduce the learning costs of users, was our primary task. We divided the settings into two parts, reading part and global part.
Global settings
Global settings
Common reading settings
Global part TXT format settings PDF format settings EPUB format settings
19
Common reading settings
CEBX format settings
Current format settings
Settings
Reading part
Sketches
Original settings
Improved settings
( for categorization and simplification )
( Too many complicated options at the first level of settings )
( A clearer hierarchy of settings. Hide advcanced options and combine similar options. )
3
Case Study
Apabi Reader
Design
3. Compatible with iOS 7 At the beginning of 2014, we released another new version compatible with iOS 7. In this version, we changed the interface into flat style with more vivid elements and enhanced specific interaction experience. Bookshelf page was the one changed the most. Bookshelf ( initial )
Wireframe
2
“Recently Read” gives a shortcut to last book.
New Bookshelf Page
Folder
Books Editing
1 3
Bookshelf ( swiped down )
A new element, “folder”, provides users a more intuitive way to manage their books.
+
=
After swiping down the bookshelf, users would find the extra functions like “search” and “sorting”. In the meantime, “Recently Read” would be hidden through an animation.
20
3
Case Study
Apabi Reader
Design
3. Compatible with iOS 7 Moreover, we redesigned all the in-app icons and the app icon, which seem to be vivid enough to attract more potential users.
Old
21
New
3
Case Study
Apabi Reader
Design
4. Coding I was also responsible for the front-end development of the WiFi upload page. In this part, I used jQuery and CSS 3 to finish the work.
CSS 3 : linear-gradient box-shadow
Default
Hover
Click
22
3
Case Study
Apabi Reader
Final Presentation
23
4
Logo
Design
24
3 4
Case Design Logo Study
Apabi Reader
Brief: In this part, I will illustrate how I communicate with client during the design process. It is a logo design project for bank credit. In this project, I was responsible for the logo design.
Challenge: I started this project as a freelance after resigning from Founder. So I did not have the chance to face my client. Communication would be an obstacle. Client: Wecash & Bank of Beijing
client
We want a logo for our product, which is called “Thumb Credit”. No specific requirement.
Thumb ----
#eb5514
Credit ----
#ffbf12
“Thumb with a coin” means you can get money easily.
client
25
x x
Um...but we do prefer to have a thumb on the logo.
“Coin with fingerprint texture”, a more abstract one.
me
me
3 4
Case Design Logo Study
Apabi Reader
What’s client’s favourite style? Those two drafts seem to be a little abstract.
...... A concrete thumb?
me
me
client
Just Okay but not good enough. We hope a vivid one, not a rigid one.
me client
Personification!
a tiny “vivid” modification
I got it!
me 26
3 4
Case Design Logo Study
Apabi Reader
Final Design Clients always have no idea about what they want. How to guide them to find their taste with less detours and mistakes, depands on communication. 27
5 Research Social Science
28
5
Social Science Research
Signs of Beijing Public Transportation
Brief: Beijing is a city with the population of 21 million (2014). It is no doubt that transportation must be a severe problem in such a metropolitan area. During my six-year life in Beijing, I was one of them in the crowd. After I devoted myself into design field, I started to pay attention to the public transportation problem.
“Everyday I go to work, I just wonder if I could be alive after such a great migration...”
“The last thing I want to do is to take the subway or the bus on weekdays moring...”
29
5
Social Science Research
Signs of Beijing Public Transportation System
Bus Stop Board
Why do I choose this topic? Riding on the bus in Bejing is my everyday activity, so I want to share some of my thoughts. For me, I often catched the wrong bus as I could not be quick enough to find the information I needed. And sometimes I missed the stop, because of no stop announcements and could not get the stop name from the stop board.
On the bus - Noisy - Crowded - No stop announcements - Got asleep
Departure ---- Terminal
Current Stop
Bus Line Number
Stops List
At the stop - Waiting for the bus - Catching the bus (in a hurry) - Invisible (dirty stop board)
Bus Route Direction
Bus Stop Board
30
5
Social Science Research
Signs of Beijing Public Transportation System
Bus Stop Board
Analysis: - for the people at the stop Pro: - clear “bus line number” | - full list of stops Cons: - no intuitive distance estimation (hard to find current stop on the list) | - direction confusion - for the people on the bus Pro: - clear “bus line number” Cons: - unconspicuous “current stop” sign (miss the bus)
Advice: Prototype of the new bus stop board:
Current Stop
Departure ---- Terminal
New Bus Stop Board 31
Current stop and Bus Route Direction
Thank you for your patience.