CONTACTS

Let's get in touch!

  • LinkedIn Social Icon
  • githublogo
  • Twitter
  • Instagram
  • emaillogo_edited

©2020 by Nathalie Ye.

Avatar Maker

Christmas-themed game and responsive website made with HTML/CSS/Javascript

PROJECT OVERVIEW

My Contribution​

UI UX Design, Programming, Art

  • Produced low to high fidelity prototypes

  • Conducted usability testings and wrote UX report

  • Drew art assets (faces, eyes, hairstyles, eyebrows, noses, mouths) using Illustrator

  • Programmed responsive website using HTML/CSS/Javascript

Project Size

Team of 2 for 11 weeks

Nora Fan (UI UX Design, Programming, Art)

Tools

HTML, CSS, Javascript, Sketch, Illustrator

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.

WIREFRAMES

After completing the paper prototype, we went on and created the wireframes and wrote a style guide.

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