PORT FOLIO
UX DESIGN
QING MU
ABOUT ME
QING MU A passionate UX designer and innovative digital player.
Skills
EDUCATION Sun Yat-sen University, Department of Creative Media & Design
Visual
09/2015 - 06/2019
Adobe Photoshop | Illustrator | InDesign | After Effects
GPA 3.90/4.00
Candidate for Bachelor of Arts in Internet and New Media
Experiences 07/2018 - 10/2018
durotanmu@gmail.com
Axure RP | Adobe Xd | Invision Engines Cocos Studio | Unity 3D
UI Design Intern, UEDC NetEase Games Inc. Onmyoji Studio & Xuan-yuan Sword Studio
behance.net/7517083333d2
Prototype
Language
04/2018 - 05/2018
Design Intern, Healthcare Center Heungkong Group Co.Ltd
English | Mandarin
Brand Design & Advertisement Design 09/2017 - 12/2017
Art Manager for minigame project held by Tencent Cube Studio Game Interface Design & Modeling
3
Contents
01 AR Library UX ¡ UI Design | Augmented Reality
02 Wilderness Ferryman Game Design | An indie adventure game
03 Dream Odyssey UX ¡ UI Design | A Literary Platform
04 BANG Brand Design | A science and art club
5
1
UX · UI Design |
AR LIBRARY
AR library is a mobile application with the support of augmented reality technology. It aims to promote the efficiency of borrowing books in library.
Ideation
User Research
The application is set up to help readers to easily get the correct location Sketch
of the books that they would like to borrow through AR navigation system. Also, readers can search books and remarks, recommend applicants of library to purchase books, check the status of books borrowed from another campus. In conclusion, AR Library can really help you to solve problems and get real-time feedback when borrowing books.
Prototype
Information Architecture
Background The original motivation to build AR library In the area of digital reading, both the demand for books and the volume of collection have been greatly improved. At the same time, the combined services of online and offline can bring readers a richer reading experience. However, the huge collection of library and puzzling design of the architecture can lead to the low borrowing efficiency of users who are not familiar with the situation of library. They cannot quickly find the way to the books they want. In addition, the development of AR technology makes AR navigation become a mature application system. It can provide readers with intuitive book information and can flexibly solve users’ problem when positioning.
Problems
User Research
Data analysis
Two user research methods contributed to our discovery: online
quantitative data to validate the core features and also to discover if
survey and interviews. I convey my warmest thanks to those
other features are required.
kind-hearted friends who has offered help. A survey with 50 potential users was conducted in combination with
The target users were students in Sun Yat-sen University. And we col-
4 interviews from personal network to collect the qualitative and
lected some statistics from their feedback.
User Research persona 1
9
User Research persona 2
10
User Research UPDATED INFO
comments
Main Functions Through the personas, we organized the findings of users' main features and summarized the core functions of the app.
1 Detailed and updated information of on-shelf books 2 AR navigation to promote the efficiency of borrowing books 3 Personal book-list for those who enjoy individualized reading.
booklist
AR NAVIGATION
SEARCH BOOKS
recommend
CROSS-CAMPUS RESERVE
11
Journey map
university students——users; borrow books in school library——scenario; search, borrow and return books efficiently——expectation;
Pre-visit
At Library pus
am ss c
o
acr
yes
Behaviors
Browse website
Search
loca
Reserve books
l ca
mp
View books’ information
no
us
Record relevant information
Demands
Post-visit
Enter library
Confirm information (smartphone/computer)
Look for books
Borrow books (manually/automatically)
Renew books
Return books (manually/automatically)
Quit Find out if the books they want to borrow are available
Know the details about available books, such as location and number
Find the books wanted efficiently
Borrow books efficiently
Renew books conveniently Return books efficiently
yes
Emotion calm
Pain Points
Opportunity Points
calm
no
satisfied
Seats Posters Computers Guidance tools across campus loc
discouraged
al c
Bookshelves and books Self-service book lending machines Staff (security guards, student assistants,receptionists) Washrooms, elevators, other indoor facilities
expectant
am
pus
a little agitated
ish
Points
Logo Web page about search,information and reservation
fin
Touch
calm
a little agitated
agitated ne up li bored
· A lack of detailed feedback on reservation process
· Taking a long time to find books
· No availability of some books wanted
· Similar layout indoor, which sometimes causes confusion
· Cumbersome procedure of recording
· Inconsistent information between offline and online
· Visual and detailed feedback on reservation process
· AR navigation for looking for books
· Purchase recommendation when books are inavailable
· Digital map
· My booklist to organize particular book information
· Feedback for inconsistent information or mistakes
· Book recommendation users might be interested in the search page
· Notification when books are expiring
Self-service book returning machine
happy
a little happy calm
· Renewal of books online
Stucture
Search Books
Enter the booklist
Book Information
Cross-campus Book Reserve
Feedback
N
Find Books
AR Navigation Y
User Flow
Remarks
Information architecture
13
sketch
prototype
Color pallette 209abf
e6b4a1
font book Century Gothic Regular Century Gothic Bold
Icon Prototype
prototype
16
19
Group Member QING MU YINGXING LIU
My Role Ideation User Research Stucture Sketch & Prototype
2
Game Design |
wilderness ferryman Wilderness Ferryman is an adventure game built in Unity3D with a 3D camera view. It combines combat, environment puzzles, and a narrative that tells the story of redemption. Monsters and aliens rule the abandoned world and the girl is the one that you have to save. You play as Tristan, a warrior and also a ferryman who challenges to save the lost souls by ďŹ ghting against the monsters and removing the barriers. After defeating the monsters, Tristan sets off to ďŹ nally send the souls to a safe place.
Download game ďŹ le here.
21
Design Goals Interaction Design
- Create a fun level in Unity3D using the vintage art assets. - Make a level with a 3D camera view to enhance the immersive experience of players. - Create an interesting game world and tell a story based on the novel
- Voice acting, recording and sound design for robotic voice effects.
Ferryman.
- Combat encounters(enemy position, waves, retreating, etc.)
- Optimize the effectiveness of the attack with real-time feedback of
- Checkpoint System
sound and visual effects in combat system.
- Onscreen tips and contextual hints when touching interactive objects
Sense of Attack
battle
Puzzle elements Wilderness Ferryman
ADVENTURE
The color of the enemy and the data overhead can effectively reect the sense of attack.
Checkpoint feedback
redemption
The bright checkpoint can give the player an active feedback during the adventure.
Design analysis Wilderness Ferryman grew from a simple level to become the ďŹ rst level of a game completed with gameplay mechanics and background music. From start to ďŹ nish, it takes approximately 10-15 minutes to complete. The levels and stories are designed speciďŹ cally based on the novel Ferryman, and the art we created to be vintage style so that the players can have a
Battle Level
strong immersive experience in the given background.
Level Design Room escape level
We designed three levels. At each level players need to take the NPC to overcome the obstacles and eventually send her to a secure place. However, different levels have different gameplay.
Puzzle level
Design analysis Level 1 battle
At ďŹ rst level, the operation capability of players is important. The control of strike distance and the proďŹ ciency of operation are also considered. Note: There is a limit of safe distance between players and non-player character so you should stay next to her at any time.
Design analysis Level 2 room escape
At second level, the players' abilities of ďŹ nding clues and seizing the opportunities are considered. Players entered an abandoned hospital to rescue the NPC and return to a safe destination by searching for scattered clues.
Design analysis Level 3 light puzzle
At third level, some puzzle elements are integrated in this level and players should consider the reection angle of light to achieve the goal of the game.
These two mirrors are what you need to move to achieve goals.
When the blue line and white line arrive at the given lighthouses through reection, the victory tip will be presented on the screen.
My Role Ideation Modeling Art Resource Management
For more details, please watch the demo reel on Vimeo: vimeo.com/297531596
3
UX ¡ UI Design |
dream odyssey
Dream Odyssey is a magical app designed for dreamers. It provides dreamers with a private space to record their dream stories. Ideation
The application allows users to build up their own dream world through a special platform where users could record, create dream diaries with inspiration. In addition, dreamers could invite professionals to interpret their
User Research
Sketch
dreams. Moreover, dreamers can get predictions from diviners from the platform or the AI system. Incredible things may happen through your own creativity. Prototype
Information Architecture
28
Background Why we want to build a dream platform? / painpoints Freud believes that dreams are the gratification of subconscious desires and the camouflage of childhood desires. Some people who remember their dreams clearly are used to writing them down in their diaries and enjoying sharing them with others. However, there is no specialized platform for dreamers to build their own dream world where they can make friends with people who share common interests. Given this problem, we plan to build a dream odyssey for dreamers.
29
User Research User research was conducted to get known the dream makers and to understand their needs and expectations. It focuses on understanding user behavior, needs and motivation.
Data analysis Two user research methods contributed to our discovery: online survey and interviews. I convey my warmest thanks to those kind friends who has offered help. A survey with 120 potential users was conducted in combination with 3 interviews from personal network to collect the qualitative and quantitative data to validate the core features and also to discover if other features are required.
User Research
PERSONA
31
User Research
PERSONA
32
User Research
GOALS
voice record
Through the personas, we organized the ďŹ ndings of users' main
Dream Record
features and summarized the goals of the app.
dictionary payment
1 Build an immersive writing platform for creators and dreamers. 2 Provide a friendly space for users to share dream ideas. 3 Provide adequate and reasonable interpretations for dreams.. 4 Secure regulations to protect the rights of writers, including privacy and copyright.
sharing platform
Dream analysis continue to create dream
User centre
33
stucture & sketch
34
wareframe
Main Page & User Centre
35
prototype insights To better design for the dream application, we analyzed some findings from our initial research, user testing and generated two insights. · People value their emotions when recording or reading others' dreams, not the words. · Copyright matters. As a story sharing platform, Dream Odyssey should have regulations to protect the right of authorship and fight against plagiarism.
prototype
Group Member QING MU YINGXING LIU DAN LUO QIAOXIN LAI
My Role Ideation Persona & Goals Wareframe & Sketch Hi-Fidelity Prototype User Testing
4
Brand Design | For people who love science and technology
bang
Technology
environment-freiendly
The Concept of Bang sponsors
COLLECTIONS
“We have always believed that art and science have some commonality and confrontation. The mainstream physics recognizes
Science & Art Works
uncertainty, just as the possibility of artistic identity is diverse; and the order of science forms a collision with the disorder of art. We hope to form a new interpretation of science and art in this
exhibitions
connection and collision." children-friendly
Customers FASHION TREND
For people who enjoy fashion culture & knowledge
ECOLOGY
35
LOGO DESIGN
All-color Version C74 M67 Y64 K23
BANG's logo strongly demonstrates BANG's unremitting efforts in the ďŹ eld of science and art. In a rational way, it strives to express the scientiďŹ c concept and the spirit of exploration through art. Bang's brand logo can be used as vertical or horizontal layout, unless you have a special case, please use horizontal layout.
Pantone 426 C/U
font & business letter Business applications Company-speciďŹ c fonts are an important element of the BANG brand. The company-designated special font is the Wlakway series font in the English version. The Walkway series features a modern look that matches the brand's logo and is highly readable at a wide range of sizes.
W a l kway Sem i B o l d W a l kway Bol d W a l kway U l t ra B o l d W a l kway Black
Social media Bang on facebook
Bang on twitter
official web
Homepage and other pages of BANG on phone
Title: segoe UI - 40 points Text: Noto Sans CJK SC (Bold) - 16 points Page size: 1920 × 1080 px Grid system: as shown left Image specification: adjustment based on grid system
Exhibitions Therefore, every exhibition of BANG is based on the classic design elements of an artist or designer. Tickets & Posters
Based on Van Gogh's "Starry Sky", using PROCESSING's random vector track generation technology, it is transformed into BANG's exclusive "contour style", and a new "Starry Sky" is drawn as the
3D signboard
The BANG exhibition should have both sides of science and art. The exhibition covers all areas of serious science, while the art side is mainly expressed by visual art effects.
main decorative element.
Group Member QING MU DAN LUO YEQING REN JIAMING ZOU
My Role Ideation Website & Social Media Business Card Brand Layout
For more details, please see our brand guildline here. issuu.com/durotanmu/docs/bang
THANKS FOR watching QING MU