PROJECT OVERVIEW
My Contribution
Developer, UX Designer, Artist
Project Size
Team of 2 for 11 weeks
Nora Fan (UX, Developer, Art)
-
Developed Avatar Maker using HTML/CSS/Javascript
-
Produced low to high fidelity prototypes
-
Conducted usability testings and wrote UX report
-
Drew art assets (faces, eyes, hairstyles, eyebrows, noses, mouths) using Illustrator
Tools
HTML, CSS, Javascript, Sketch, Illustrator, Firebase
Methods
Paper Prototype, Wireframe, Web Programming, Interview
Project Link
PROPOSAL
Purpose
The purpose of the website is to allow users to create their own Christmas-themed personal avatar that they could use as the profile picture for their social media accounts. The website will allow users to choose their hairstyles, eyes, nose, mouth, and facial structure. Moreover, they can choose accessories (jewelry, antlers, Christmas hat, etc.) that are Christmas-themed, as well as backgrounds with a Christmas atmosphere. There should be at least a way for the user to save or download what they have created so they can eventually share it with others.
Audience
The audience will be mainly young people who use social media frequently and would like to share content with others, but anyone could use this website if they want an illustrated personal avatar.
Challenges / Risks
-
How to make sure all facial features fit with each other
-
Downloading function
Layout
-
Home page: “Create your avatar”
-
Avatar page
-
Pop-up: Click on “share/save/download” then pop-up of final avatar appears for the user to share. If clicked on download, then the download will start automatically. Note: The download icon was later changed to be on the game page instead of having its own separate page.
UX REPORT
Introduction: For the UX report, we let 10 people try out our website. Five of which tried out our prototype, and the last five tried out our final version and gave us feedback.
UX Report Stage 1: Feedback for Prototype
Questions we asked:
-
Did the experience of using the website meet your expectations of what a “make-your-own-avatar” site should be like?
-
How easy was it to navigate the website (in terms of layout, labels, or organization)?
-
How is the visual design of the website?
-
How are the functions of the website performing?
-
What potential improvements do you think could be made to the site?
UX Report: What did we change?
Feedback:
-
Make use of the space we had -> Layout and labels
-
More options/features
-
People liked our visual design and navigation.
And so we...
-
“Checkmark” to “download”
-
Widescreen version
-
“Start” page
-
Sidebar menu’s animation for mobile screen
-
More skin tones
Suggestions received that were out of scope:
-
Body customizations
-
“Photo Book” for logged-in users
-
More features (hairstyles, noses, mouths etc…)
UX Report Stage 2: Feedback for Final Version
-
More colors, features (hairstyles, accessories etc.)
-
Logo, colors
-
Randomizer function
-
Many didn’t give any suggestions for improvement.
What People Liked:
-
Non-binary
-
Visual Design
-
Simple and clear navigation