SEAC Tool Shed Database Program - Related Course: Senior Development Project I & II
A functional database application and interface developed for the South East Area Coalition (SEAC) Tool Shed Tool Rental Project. Our project aims to redesign and optimize the existing SEAC Tool Shed application to make it more efficient, user-friendly and in line with modern usage requirements.
Github Link: https://github.com/Cookiesaurus/toolshed-app
Serve as the Lead UI/UX Designer in this project, responsible for user interface and user experience design. Specific responsibilities include:
- In-depth understanding of user needs, through research and analysis of user behavior, to provide users with a high-quality user experience.
- Create prototypes and low-fidelity models based on user needs and design plans, conduct user testing and collect feedback.
- Use professional design tools to create detailed wireframes and high-fidelity prototypes that showcase the overall layout and interaction details of your interface.
- Organize and implement user tests, collect user feedback, analyze test results and optimize designs accordingly.
- Work closely with front-end developers to provide design specifications and component libraries to ensure designs are implemented correctly during the development process.
- Write detailed design documents to record design decisions and standards to provide clear design guidance to the development team.
Photographer Support App Prototype - Related Course: New Media Design: GUI
The purpose of this project is to develop a product that helps visitors and/or local residents complete specific tasks or activities in the City of Rochester. I work on photography support applications.
Link: https://www.figma.com/design/S5VGX9XUWxKprXMd690b7b/NMDE.302_Project2?node-id=54-94&t=VLg2q6gy6wYfN067-1
- Ideation and research, by brainstorming and studying existing products, to explore how smartphones, tablets and augmented reality technology can be used to provide unique and beneficial functional additions to urban living.
- Map user flows and journeys, analyze and visualize the steps and possible pain points users need to complete specific tasks, and explore how your product can help users successfully achieve their goals.
- Create high-fidelity wireframes to demonstrate the relative position, grouping, and prioritization of information and functionality, not only revealing the structure of static content but also helping to understand design plans for interactivity.
- Develop an aesthetic direction and visual design style guide, considering how the elements and principles of design promote creative and intuitive design.
- Prototype and use dynamic elements to enhance the concept and give the design personality by showing how the product works and how each step of the user flow is navigated and connected.
ROC City Site Redesign - Related Course: New Media Design: GUI
Link: https://www.figma.com/design/TKKqHa28dRw35BeBBQeXsI/NMDE.302_Project1?node-id=159-2&t=ZKzGaVetzuYIcOjk-1
This project was designed to re-skinning the home page and some user flows for the City of Rochester's website. content include:
- Research and identify advantages and problems in existing designs.
- Establish design and interaction goals to improve the overall user experience.
- Research other available solutions and identify any additional design and interaction opportunities.
- Create user stories that show how to improve the experience for a specific user group.
- Prototype novel interactions and improved user flows.
- Produce comprehensive process documentation that demonstrates each design step.
Digital Pet Prototype - Related Course: New Media Design: Interactive
Link: https://www.figma.com/design/9RTYVgB1SV9MavqMgkDITx/Pet_Final?node-id=0-1&t=ODnd9In7U9iMdwLL-1
The project is based on the Tamagotchi toys, a virtual pet care simulation game launched by Bandai in the 1990s, to create a redesigned modern electronic pet experience prototype that will only use simulated physical interaction control methods. Specific contents include:
- Designed a character image based on an animal. The character is able to display current states, actions, and emotions.
- A device model about the size of a palm is designed, and the interaction method is to simulate physical input.
- The interactive system consists of a navigation menu with four main sections, two options per category. Free navigation between sections is possible with simulated physical inputs, including exiting any action.
- Animated characters interacting with user commands. The animation is produced based on the prototype interaction method of Figma Smart Animate.
- Includes an introductory interface that guides users to the main interface.
Cards Playing App Prototype - Related Course: New Media Design: Interactive
Link: https://www.figma.com/design/HGWFaHTwDTCdeh99j2hYbn/P1_final?node-id=0-1&t=ZDIoD6gYfMz7Gy2P-1
The goal of this project is to build a prototype of a simple poker playing application. Specific contents include:
- Designed a set of six original playing cards, all designed based on standard bicycle brand playing cards and adapted and derived.
- Conceive and design solutions to implement interactive functionality to view all playing cards, add a playing card, delete a playing card, display the number of cards in hand, and calculate the sum of the points of playing cards in hand.
- Added filtering and sorting functionality, allowing the application to sort or filter displayed playing cards based on playing card suit or/and point value.
- Explore at least three different functional solutions, make simple prototypes to test the feasibility of the solution and decide on the final solution.
- Optimize the final prototype, debug and debug the prototype, and integrate all interactive functions of playing cards.
Re-skinning RIT University News - Related Course: New Media Design: Elements
Link: https://www.figma.com/design/dR3sLLHC0AJguJuqBSo5C6/P1-Final?node-id=0-1&t=sdogCe81OZvjd6JG-1
This project aims to re-skinning the current RIT University News web page. Specific contents include:
- Created a new web design with strong visual hierarchy that is visually appealing, engaging, relevant and informative.
- Refreshed the look and feel of the page to appeal to the target audience and was not limited by RIT's visual design system, adding a personal touch as needed.
- Proportion, layout, and a clearly defined typographic system are used to structure the visual elements of the web page.
- Existing content structure was rearranged and modified to support the audience's reading behavior. Not limited to current content, some modules are added or removed as needed.
College Dining Kiosk System Prototype - Related Course: Designing The User Experience
Link: https://www.figma.com/design/zvdkVXZwDiearS6q1LxZvd/RIT-Dining-Check-out?node-id=0-1&t=L0iKMCCaFoXI83ep-1
- Developed a prototype of a college dining kiosk system to solve long wait times and crowded dining hall environments.
- Generated different personas through the development process to ensure the system met the needs of different groups of people.
- Created paper sketches and paperboard model that went through hardware level user experience testing before converting to wireframes for further testing.
- Generated mockups representative of the concept of the system, went through software level user experience testing, and created the final prototype.
Pen Pal Application Prototype - Related Course: Foundations Of Mobile Design
Link: https://www.figma.com/design/SjhKg6QAoBOHcJORVQUvt4/P1_Prototype?node-id=0-1&t=gHXFTJjUTXKyVdxd-1
- Understood the goals and needs of the user, develop the necessary requirements for the app in order for it to fulfill and satisfy these goals.
- Experimented with different design patterns and utilize platform guidelines to begin building the structure of the app.
- Created digital wireframes showing the controls, content areas, and screen organization for both iOS and Android platforms.
- Implemented the interactive features and visual design elements, produced a high-fidelity, interactive prototype and final design documentation.
Simple Graphic Card Info Checking Web App - Related Course: Foundations Of Mobile Design
- Created a data-driven mobile website for a simple graphic card information checking function through an iterative process.
- Developed three main pages that the application mainly include: Home page, Collection List page and Details Page.
- Conceptualized and implemented imagery, typography, color choice, and layout in a Figma sketch.
- Used a method to transfer the ID of the clicked item in Collection List page to Details page.
- Displayed all of the details for the item clicked and dynamically loaded data from a JSON file.
Halloween Event Poster - Related Course: New Media Design Digital Survey I
- Designed and produced unique posters for a Halloween Haunted House event in the Rochester community.
- Researched the campaign, better understood the campaign's message, target groups and main goal, produced several sketches to determine the style of the final design.
- Used Adobe Photoshop, mainly focused on copyright free images as the main material, combined with font styles to produce the final unique posters.
Famous Book Cover & Dust Jacket Design - Related Course: New Media Design Digital Survey I
- Selected the world famous novel "The Old Man and the Sea" and designed three different styles of covers for it.
- Reread the book to better understand the main theme of the story form helping decided the main direction of design.
- Generated several sketches were made to determine design ideas and design elements on different covers.
- Created A five-sided dust jacket cover was further designed based on the cover design of one of the styles.
- Used Adobe Illustrator to complete all digital designs, using different design tools to achieve different design styles.
Company Logo Redesign - Related Course: New Media Design Digital Survey II
- Selected a pizza fast food store located in Rochester area and redesigned two unique logos for the store.
- Created a mindmap to help think about associations with chosen brand and new potential for how to execute it.
- Sketched more than 20 sketches that show how I consider the merging of text and a brand mark.
- Created a variety of iterations of logo design using Adobe Illustrator, and completed digital final version using Illustrator.
Typographical Hierarchy Menu Design - Related Course: New Media Design Digital Survey II
- Selected a Italian Style restaurant located in Rochester area and created a menu design with focus on clear, creative, and consistent hierarchy of typographical content.
- Went to the site to conduct research to understand the restaurant's style, atmosphere, target people and other information to better choose the design direction of the menu.
- Explored typeface possibilities that will be suitable for easy reading and help match the character of the restaurant.
- Assessed importance of menu elements and establish set styles titles, names, descriptions and prices.
- Finished designing the final digital version using Adobe Illustrator and printed a paper version to evaluate the menu in situation.
Boston Highlights Introduction Website - Related Course: Web and Mobile II
- Developed a responsive website individually about a place I have lived or visited, which is Boston I chose.
- Separated the project into two stages with the first stage completing all the basic wireframe, structure and designing and the second stage adding the advanced functions and improving the user experience.
- Divided the content up into appropriate chunks of information and designed the site in the way that enhances the presentation of the content.
- Programmed the website using HTML, CSS, JavaScript, and basic PHP to form the different levels of interaction.