HIYA

An online emotive sticker gallery catalogue website for people to get inspiration for and share sticker designs.

Methods

User Research

Graphic Design

Database Design

Web Design

Back End Programming

Tools and Software

HTML

CSS

PHP

MySQL

Figma

My Role and Responsibilities

UI/UX designer, graphic designer and full stack developer designing and developing the Hiya website from conception to delivery.

Duration

4 weeks: March, 2023 - April, 2023)

Overview

This project was completed as part of Cornell University’s INFO 2300: Intermediate Design and Programming for the Web curriculum. Students were assigned an individual project in which they designed a catalog website of their choosing, which caters to an administrative audience as well as a consumer audience.

My project topic of choice is an emotive sticker gallery website for which the administrative audience consists of sticker designers and the consumer audience consists of any individual who is in search of or enthusiastic about unique sticker designs.

Primary features incorporated into this website include:

Browsing & filtering stickers by tags
Sharing & “posting” a sticker design to the public catalog via a sticker-sharing form
Deleting a sticker design from the public catalog through a page where administrative audience members can view and manage their own shared works
Login sessions, through which administrative audience members have access to special features (i.e., sharing, seeing personal works they have posted, deleting stickers, etc.)

Target Audience Identification & Understanding

For the Hiya website, the target users are a cohesive audience of individuals searching for a similar niche set of products for a similar wide set of purposes: that is, sticker enthusiasts all around may explore this website, whether to decorate their digital planners, enliven their cell phone conversations, or provide some visual enhancement to their flashcards, they are sure to find something to inspire their personal expression.Specifically, this site is designed with, in mind, a consumer audience of online shoppers looking for a selection of unique, originally-designed, easily-accessible stickers for personal decoration and expression purposes – and an administrative audience of sticker designers who may likewise have exploratory goals but also are excited to share, contribute and maintain their portfolio of sticker designs to an online gallery:

Alexa

Age: 24

Occupation: Freelance Product Designer; Creative Collector

Education: Bachelor's in Fine Arts

Consumer

Audience

Factors That Influence Behavior

Purposes for Using Stickers: Functional (organizing, labeling) or creative (personalizing, gifting).
Variety of Stickers: Diverse styles, materials, and customization options to suit all preferences.
Emotional Appeal: Stickers that reflect identity, moods, and values build personal connections.
Navigation and Accessibility: Easy navigation, clear categories, and a smooth checkout process.
Customizable File Formats: Clear options for editable digital formats for personal or professional use.

Goals

Find stickers that match her aesthetic
Find stickers that support or inform her use for them

Desires

Explore a wide variety of sticker offerings
Find new, interesting, expressive sticker designs

Obstacles

May not have a clear idea of what she specifically wants to use stickers for

Amanda

Age: 35

Occupation: Graphic Designer

Education: Bachelor's in Graphic Design

Administrator

Audience

Factors That Influence Behavior

Motivation for Maintaining Sticker Gallery: Driven by a passion for organizing and showcasing a cohesive collection.
Confidence for Sharing Sticker Works: Feeling assured about the quality and uniqueness of designs encourages public sharing.
Ease of Content Management: Simple tools for uploading, organizing, and categorizing stickers boost productivity.
Feedback and Engagement: Positive responses from users and community interactions inspire continued efforts.
Technical Skills: Comfort with website platforms or gallery tools influences the ability to maintain and update the collection.

Consumer Audience Goals and Design Choices

Goal 1: Discover and browse unique selections of stickers

Design Ideas and Choices: I can meet these goals in my design by including organized sections for filter buttons bar at the top by sticker style/aesthetic. The catalog layout might utilize a grid-like layout with cards utilizing a thumbnail/sticker name format.

Rationale & Additional Notes: Including filters buttons by sticker style would communicate to audience members that they are able to customize the sticker selections available to them, whether they want to explore sticker varieties or know the specific aesthetics of stickers they are looking for; sectioned buttons in a bar at the top would also be a more appropriate option as there is only 1 specific filter category that more efficiently utilize the wider space and give more space to view more entries, as similar to many online catalog websites (e.g. clothing shopping websites filtering with sections by color and size). A visual, grid-like layout for the catalog would help to maximize browser width while allowing audience members to scan a greater selection of stickers at a time (more efficient as sticker designs typically do not contain significant amounts of information or levels of detail and would less require zooming in to view).

Goal 2: Learn about and get inspiration for sticker design and use

Design Ideas and Choices: I can meet these goals by providing a details page for each design, including example inspiration for sticker use and/or sticker descriptions, in a list or stacked-section format. I would also incorporate a back to catalog link.

Rationale & Additional Notes: Including sticker descriptions helps to provide both a visual and text-based explanation for how audience members might decide to implement sticker designs into their own expressions or creative hobbies; if included, knowing more about the story behind the sticker's design could potentially also provide a more accurate understanding of sticker meanings, inspire a stronger feeling of meaningfulness, and provide ideas and motivation for how they can structure their projects or expression around these stickers. A list-like or stacked format is familiar and organized, and would make scanning this basic information that consistently applies to all details pages easier, while a back to catalog link would make navigation easier for further browsing.

Administrator Audience Goals and Design Choices

Goal 1: Share their sticker designs and/or passions for sticker design on the website

Design Ideas and Choices: I will meet this goal by providing a form designed to meet the typical scanning pattern, as well as an example entry on the side. Form entries are ordered to increase response input space width and complexity (closed to open-ended questions).

Rationale & Additional Notes: Utilizing a form for input insertion provides a more organized and consistent method for administrator audience members to be able to share and view each other's designs; example entries help provide inspiration for one another in how to communicate and showcase their designs. Implementing a form that supports typical arch scanning patterns, as well as an example prompt, facilitates the sharing process (so that it does not bog down on their experience with their design-sharing desires) and provides a consistent and efficient checklist for administrators to think as they are writing what they want to "blog" about their designs to the community; formatting questions by complexity/width of response space not only can support the arch scanning pattern but also give administrators more time/prompters to develop their response for the last question.

Goal 2: Manage an online portfolio for their sticker designs

Design Ideas and Choices: I will meet this goal in my design by providing a way for designers to be able to edit sticker designs by also deleting them (e.g., via a toolbar when selecting the item), as well as customize the site during login sessions (e.g., header greeting) to indicate they have access to modification privileges and are currently active in their session.

Rationale & Additional Notes: Providing the option to delete inputs via a toolbar is a potentially more convenient way of editing data inputs. Customizing specific details in site styling (e.g., header greeting, log in/out button) adds clarity to the availability of personalization functions for administrator audience members.

Consumer Audience Goals and Design Choices

Goal 1: Discover and browse unique selections of stickers

Design Ideas and Choices: I can meet these goals in my design by including organized sections for filter buttons bar at the top by sticker style/aesthetic. The catalog layout might utilize a grid-like layout with cards utilizing a thumbnail/sticker name format.

Rationale & Additional Notes: Including filters buttons by sticker style would communicate to audience members that they are able to customize the sticker selections available to them, whether they want to explore sticker varieties or know the specific aesthetics of stickers they are looking for; sectioned buttons in a bar at the top would also be a more appropriate option as there is only 1 specific filter category that more efficiently utilize the wider space and give more space to view more entries, as similar to many online catalog websites (e.g. clothing shopping websites filtering with sections by color and size). A visual, grid-like layout for the catalog would help to maximize browser width while allowing audience members to scan a greater selection of stickers at a time (more efficient as sticker designs typically do not contain significant amounts of information or levels of detail and would less require zooming in to view).

Goal 2: Learn about and get inspiration for sticker design and use

Design Ideas and Choices: I can meet these goals by providing a details page for each design, including example inspiration for sticker use and/or sticker descriptions, in a list or stacked-section format. I would also incorporate a back to catalog link.

Rationale & Additional Notes: Including sticker descriptions helps to provide both a visual and text-based explanation for how audience members might decide to implement sticker designs into their own expressions or creative hobbies; if included, knowing more about the story behind the sticker's design could potentially also provide a more accurate understanding of sticker meanings, inspire a stronger feeling of meaningfulness, and provide ideas and motivation for how they can structure their projects or expression around these stickers. A list-like or stacked format is familiar and organized, and would make scanning this basic information that consistently applies to all details pages easier, while a back to catalog link would make navigation easier for further browsing.

Planning-Design

The consumer and administrator personas for Alexa and Alex, respectively, above summarize their audiences requirements. A process of gradually planning the website’s design, frontend and backend code results in the embodiment my target audiences’ needs into a functional product, via the following technical objectives and functionalities:

Utilizing design patterns to enhance website usability (e.g. within catalog and form layout to support scanning patterns)
Structuring a database (which includes multiple tables and foreign keys)
Establishing relationships between tables with common fields via JOIN queries to broaden feature functionality (e.g. tag filters)
Enabling user login and logout sessions, as well as building user access controls for enhanced site security and personalizability of user experiences
Ensuring best practices for user uploaded content on dynamic websites

Goals

Share inspiration and ideas for stickers and sticker use
See the creative ways other designers have developed their own ideas for stickers

Desires

Grow an online portfolio of passion works
Get inspiration for sticker ideas and sticker use

Obstacles

Obstacles
Level of inspiration for producing sticker ideas

Final Project Outcome

The final product employs a welcoming, bright, and minimal theme that leaves extra room for attention to unique sticker designs.Additional measures taken to ensure an enhanced user experience include secure login and database requests when involving sensitive information. WAVE accessibility audits were conducted to make sure that all information on the website could be communicated effectively for a more enjoyable user experience, and HTML validation was conducted as well for SEO purposes and an extra measure for ensuring the code was structured ideally.

Takeaways

During this assignment, I have learned how to create a more interactive, functional, and personalized website experience for users. These include learning how to implement a details page for users to be able to view further information on a catalog entry of interest, filtering by tags to allow for users to be able to look through entries based on interest, for users to insert entries using a form to contribute content to the website, and for access controls to be implemented for administrator and consumer audiences so that the website content value can be maintained. In short, this project has provided me a valuable lesson on a holistic and planned approach to delivering user experiences that are secure, effective, and exceed user expectations.

Previous Project