top of page

hello, users!

Interactive educational platform to make UXUI learning fun and engaging

Hello, users!: Image

problem definition

BACKGROUND

Don Norman first termed "user experience" in the early 1990s, and numerous UX theories and methodologies have been developed afterwards, such as Jakob Nielsen's 10 usability heuristics and Peter Moreville's usability honeycomb. 


User experience encompasses all aspects of the end-users interaction with the product, making it a crucial and promising field of study. Proving this point, the number of UX professionals is forecasted to steadily rise as well. However, its approachability is an issue as many find it difficult to understand the concept of UXUI design, so did my own relatives when I tried to explain what I study at college.

Hello, users!: Text

so what really is UXUI?

Hello, users!: Infographics
Hello, users!: Image

desk & user research

COMPARATIVE ANALYSIS

In order to understand the strengths, weaknesses, and unique points of existing UXUI platforms, the 6 most popular UXUI mobile applications were tested and compared. It was possible to categorize the services based on their main function as the following, and the most representative application from each category was analyzed in detail:

  1. UXUI terminology glossary

  2. UXUI courses

  3. Intuitive display of UXUI elements

Most UXUI education-related websites were blogs or course providers except UX Myths. As the early stage of the project focused on correcting some popular UX misconceptions and the misunderstanding about its approachability, this website was also include in the comparative analysis.

Hello, users!: Text
Hello, users!: Resources
Hello, users!: Image

USER RESEARCH

To define the target users and user needs, research was first conducted on UX designers. I asked what are the most common UX myths that UX designers encounter by writing a post on UXDesign Reddit community. The post received more than 30 upvotes and 40 comments, and the key insights are as the following:​

UX designers' needs

  • Biggest myth is UX is not UI

  • Difficulty explaining UX design and its difference from other design jobs

  • Problems in collaborations when others don't appreciate UX design​​

In order to solve the problems UX designers are facing, the target users of this service were defined as collaborators of UX designers who need introductory knowledge in UX. UX designers are secondary users.

Hello, users!: Text

reddit responses

3 user interviews

Hello, users!: Resources

USER INTERVIEW

3 primary user interviews were conducted to hear their specific needs. The interviewees were either interested in UXUI design and/ or related to the field as a collaborator:

  • Professional graphic designer 

  • Undergraduate student studying marketing & branding who has majored in Communication Arts & Design 

  • Undergraduate student working as freelance programmer

Users' needs

  • Confused between UX and UI

  • Want friendly & familiar language

  • Wish to learn basic terms & concepts

Hello, users!: Text

UX vs UI

Biggest UX myth & confusion

collaborators

Target users who need introductory UX knowledge

approach

Easy & friendly approach is needed

Hello, users!: Infographics

To provide a fun and interactive web platform to users who are interested in or need an introductory knowledge of UXUI as a collaborator of a UXUI designer such as developers

Hello, users!: Quote

development

EXPLORATION

Many interactive websites were referenced to and ideas from the community post and user interviews were explored.

Hello, users!: Text
0413_Development 2_페이지_05_edited_edited.jpg
Hello, users!: Resources
0316_Idea Specification_페이지_6_edited_edited.png
0316_Idea Specification_페이지_5_edited.png
Hello, users!: Resources
Hello, users!: Resources

characterization

game analogies

Hello, users!: Infographics

IDEATION & DEVELOPMENT

Finalized idea and key features include:

  • Characterization of UX and UI to show their difference

  • Storytelling of UXUI analogies to introduce concepts and difference

  • Interactions with UXUI games for engaging education

Website and character moodboard, along with initial character design are as the following:

Hello, users!: Text
0413_Development 2_페이지_09_edited.jpg
0413_Development 2_페이지_08_edited.jpg
Hello, users!: Resources
0413_Development 2_페이지_07_edited_edited.jpg
Hello, users!: Image

WIREFRAME & STRUCTURE

Website structure and organization, together with wireframe were created. While developing the initial wireframe, the character design was changed to appeal its friendliness.

Hello, users!: Text
0413_Development 2_페이지_13_edited.jpg
0413_Development 2_페이지_15_edited.jpg
0413_Development 2_페이지_14_edited.jpg
Hello, users!: Resources
0413_Development 2_페이지_12_edited.jpg
0427_Midterm_페이지_13_edited.jpg
Hello, users!: Resources
0427_Midterm_페이지_11_edited_edited_edited.jpg
0427_Midterm_페이지_11_edited_edited.jpg
0427_Midterm_페이지_12_edited.jpg
Hello, users!: Resources
close1.png
close2.png
close3.png
close4.png
close5.png
close6.png
close7.png
close8.png
close9.png
close10.png
close11.png
Hello, users!: Resources

prototyping & testing

PROTOTYPE

Initial prototype was created with Figma.

Hello, users!: Text
Hello, users!: Video

USABILITY TEST & FOLLOW-UP INTERVIEWS

9 participants conducted the UT and follow-up semi-structured interviews to collect direct and crucial feedback on the prototype. There is a variety of UT users, from a developer to businessmen. Key insights are as the following:

Hello, users!: Text
0602_Progress_페이지_2_edited.jpg
Hello, users!: Image
051804_Testing_페이지_7_edited.jpg
Hello, users!: Image

clarifications

Many users pointed out confusions in animation, storyline, concept explanation, etc.

more interaction

Participants expected games to be more interactive

Hello, users!: Infographics

working game

UNITY

I wasn't skilled in HTML or Unity as I just started learning about them during the semester. I tried inserting all necessary images into HTML and making them appear and disappear with a click cue, mimicking how buttons actually work. However, Unity had more features such as animation and was easier to quickly adapt to. Thus, Unity was chosen and used for creating a working game.

Hello, users!: Text
unity.png
Hello, users!: Resources

hello, users!

Hello, users!: Image
Hello, users!: Headliner

further development

EXHIBITION & ADVANCEMENT

This project will be displayed as a part of the senior exhibition. The exhibition plan is to emphasize the unique point of the project, specifically characterization, by installing goods related to the UXUI characters. Meanwhile, further advancement of the service includes adding advanced game features, creating an input data field to collect and reflect user data, and includes inserting the game into the website through WebGL for higher accessibility.

Hello, users!: Text
mockup3.png
Hello, users!: Image
bottom of page