z-define

Online dictionary for Gen Z slang, featuring definitions, & popular terms

Academic Project

Role

UI/UX Design, Prototype, and Presentation Deck

Duration

February 2022 - May 2023

Meet The Team

Bach Le:

Full Stack Developer

Phuong Le:

Back-end Developer & Business Researcher

Chanbin Moon:

UX/UI Designer

About

For this project, I got the opportunity to work as part of a team of exceptional peers to complete the semester-long project for the "Web Application and Development" class at Fordham University during the 2022/2024 Spring semester. For this project, we were tasked to create a website that can benefit users in their daily lives.

Z-define has been developed and it is now live!

Mission Statement

Our focus revolved around a captivating mission statement: To be a leader in the edtech industry and to create products that are both innovative and accessible to all.

Vision

During the early stages of the project, we had four key visions in mind to follow throughout the creation process.

Problem

Despite our visions, there were still problems that needed to be addressed via our website. The following are the primary issues that we sought to address:

Solution

z-define

Developing a cutting-edge and user-friendly dictionary website that addresses the communication gap between generations and the shortcomings of traditional dictionaries in keeping up with current slang. This website aims to use web scraping techniques to stay up-to-date with the latest slang used on social media platforms such as TikTok and provide a seamless user experience.

Features

Logo Design

After finalizing on visions and features, it was time to design the z-define logo.

When designing the logo, I had a specific objective in mind: to combine the letter Z with a book silhouette.

For the original design phase, I used Procreate to sketch up the concept, which was divided into four steps:

Combining the letter z with book silhouettes.

Utilizing shapes to improve the logo's overall balance and design language.

Outlining the relevant areas of the logo sketch from step 2.

Filling in the outlined logo from step 3 to make the logo branded.

After completing the design on Procreate, I moved the design to Figma to vectorize the logo. During this phase, there was a slight design change which led to the final design of the z-define logo.

UX/UI Design

Page Map

The page map below shows how and where users will interact with the features described in the previous section of the case study.

Design

As the team's UX/UI Designer, I used Figma to translate the page map and design features/ideas into high-fidelity mockups.

Home:

  • Users can use the search box on the home screen to look up any word they like.

  • The daily word/phrase popularity rating list is located below the search bar, allowing users to stay up-to-date with modern slang.

  • The options to the right of the ranking allow users to access the Chrome extension, set up an account, and suggest words/phrases.

  • Finally, the navigation panel on the left-hand side of the screen can be used to navigate z-define.

Dictionary:

  • The trending slang chart searched/viewed on the platform is displayed at the top of the navigation page.

  • Users can view the definitions and use cases of the trending words/phrases by clicking on the arrow buttons below the chart.

  • Users can also view the definitions by scrolling down to reach the definition cards, where they can also share them.

  • Finally, the synonym and antonym cards are displayed on the right-
    hand side, allowing users to read the sample words/phrases and access the synonyms and antonyms page.

Tablet & Mobile Versions:

  • z-define was designed and developed to be a responsive design so it could also be used on tablets and mobile devices.

Synonyms & Antonyms:

  • A list of synonyms for the slang will appear and when clicked on, users will be directed to that slang's dictionary page.

  • The antonyms page will be the same, except it will display the antonyms of a particular slang and will be represented by a teal color card on the right-hand side.

Sign up & Sign in:

  • On the sign up page, users will be able to input their credentials to create an account for sign up with their Google account.

  • The sign in page will be similar to the sign up page, with the exception that the user will just need to provide their email address and password.

Chrome Extension:

  • Chrome extension of z-define was created to allow users easily look up slang that they are curious about when browsing the web.

  • Please click on this link to download the z-define Chrome extension to your Chrome account.

Constraints

One of the major challenges in completing this project was a shortage of time. Since this was only a semester-long project, there was a limit on the amount of time we could devote to it.

We were also unable to conduct usability testing during the production process due to a lack of time. This may have truly aided us in building an experience tailored to z-define's users.

Next Steps

I worked very closely with the developers and researcher of our team to work on any missing elements throughout weekly meetings to ensure that the design was aligned with our vision before handing it over for development.

Development

Front & Back End

After the UX/UI design process was completed, I handed over the design to our developers Bach Le and Phoung Le to make z-define come to life

Live Website:

Click here to access the live website

Chrome Extension:

Download the z-define Chrome extension here

Prototype:

Please note that not all of the designs were developed 1:1 due to the time constraint of the project. If you wish to view the interactive prototype of the z- define website, please click here.

Presentation

Presentation Deck

A 20-slide presentation was created to describe the product that we have created and with the help of my team members, we were able to finalize our presentation. (Please note that we do not have real-life data due to the time- constraint nature of the hackathon)

Lesson Learned

What I have Learned

This project challenged me by allowing me to experience the hardships of those undergoing mental health treatment in order to determine the best experience for users on both ends. This hackathon was extremely meaningful because I was able to collaborate with a developer and put myself in their shoes to improve the experience of collaboration.