Web & UX Designer
Dec 2023 - Mar 2024
Brand consistency, Responsive design, Cross-functional collaboration, User feedback integration
Figma, Collaboration platform(Slack)
Welcome to Sunrise - an innovation in lamp design that seamlessly unites the world of 3D modeling, printing, and laser cutting techniques to craft uniquely detailed and functional lamps.
Step into a world of cutting-edge design as I create beautiful lamps that marry form and function—a built-in makeup pen holder. This project redefines the landscape of lamp design, intricately weaving practicality within its aesthetic fabric.
Leveraging advanced 3D printing technology, I meticulously build intricate lamp structures layer by layer. The resulting designs bathe any space in an elegant light. Laser cutting techniques further heighten the lamps' visual allure, casting mesmerizing shadows and patterns that dance with the light, creating a captivating visual symphony.
Selected for Construct3D, the national academic 3D printing and digital fabrication conference and expo
Once trapped in MTA for 2 hours and spent 1 year figuring out how to take NYU shuttle efficiently, I deeply care about safety and convenience when commuting (between campuses) in New York City.
I believe that NYU students and faculties want to have a straightforward app to tell them if this train or shuttle is delayed today, or if there’s an accident without switching between Google Map, PassioGo, and even Google Sheets.
With this assumption in mind, I started thinking about research questions and methods.
Questions:
1. Do you need to commute between NYU's brooklyn and manhattan campuses? (If so, how do you commute between campuses?)
2. Have you ever tried to commute from Manhattan campus to Brooklyn campus via NYU shuttle? (If yes, tell me about your first-time experience taking a NYU shuttle.)
3. If you tried to use PassiGo before, what would keep you from using that again?
4. Describe your most ideal and successful commuting experience.
Findings:
1. 95% of the people I interviewed need to commute quite often and 80% of them take the train between Manhattan campus and Brooklyn campus.
2. For those who usually take the train to commute, they think train takes shorter waiting time and heard about the inconvenience of NYU shuttle from their friends, so they didn’t try to catch the shuttle.
3. For those who have tried to take the shuttle, they gave up because of more than one hour waiting in the traffic jam, about 20-30 min waiting time before shuttle arrives, or shuttle didn’t come as scheduled.
4. Even for the small amount of people who take shuttle, they found Passigo confusing and struggle using the app and google sheet. Some of them don’t even know how to find the real schedule.
5. Commuting time can also be a crucial factor in selecting a commuting method. People may prefer a faster mode of transportation to save time, especially when commuting to school or other important appointments. Other critical considerations are safety, cost, and conveniency.
Reflecting on the research I conducted and keeping various pain points in mind, I designed a persona of a NYU student who struggled with commuting between campuses and summarized user goals.
To address the pain points identified in the research, I envisioned a combined app that tells the time based on the current state journey map.
After comparing it with other similar apps, I developed a more coherent and practical vision for the app.
Using the competitive analysis and persona, I created a storyboard to explore the user’s emotions and experience with ScheGo in the most ideal situation.
Then, I created a user flow diagram as a guide for how the user would go through the app. This also informed me on what key pages I needed to design and create wireframes for.
Inspired by the city of New York, I created a mood board with a modern typography and color palette, which was then expanded into a style guide for matching sizing, icons, and buttons.
%201.png)
%201.png)
Our user testing sessions provided invaluable insights, revealing areas where users faced challenges or felt the experience could be smoother. Key feedback revolved around instruction navigation and the 'add event' button functionality.
Implemented Changes:
1. Recognizing that some users are familiar with similar interfaces or prefer to explore on their own, we introduced a 'Skip Instruction' option. This allows users to dive straight into the app without wading through preliminary guidelines.
2. To cater to those who might change their mind or need a refresher, a 'Go Back to Instructions' feature was added, ensuring users can always access guidance when needed.
3. Feedback indicated that the placement and accessibility of the 'Add Event' button could be more intuitive. We adjusted its positioning and design to ensure users can add events effortlessly, enhancing the overall scheduling experience.
Full-Featured Interactive Prototype built using Figma
1. Integrated Scheduling with NYU Login
After logging in with your NYU account, our app automatically fills in your class schedule on a calendar. Plus, it lets you easily change or add any events, making it simple to manage your time.
.gif)
Schedule
Calendar
Alert
.gif)
Add
2. Real-Time Alerts & Flexible Event Addition
Our app's alert system is designed to keep you ahead of commuting emergencies, such as subway delays, ensuring you're always prepared and on time. Plus, while the app auto-fills your class schedule, the 'add' function gives you the flexibility to include other events. Whether it's a study session or a social gathering, you can effortlessly add it to your calendar alongside the auto-generated entries.
3. Smart Commute Decisions with AR Navigation
Our app's robust navigation system empowers users to make informed commuting decisions. By analyzing routes, it suggests either the most convenient or the quickest transportation method, depending on your preference. And to enhance the journey even further, the app offers an augmented reality (AR) navigation feature. This AR system visually guides users through their route, merging the physical world with clear, digital directions, ensuring you reach your destination efficiently and confidently.
navigation
In looking back on the user feedback, it was heartening to see many found the app genuinely helpful. However, continuous improvement is key.
Takeaways:
1. Users highlighted the 'edit schedule' page as a segment needing user interface enhancements.
2. Feedback emphasized that while our navigation system is effective, it could be rendered more user-intuitive.
Next Steps:
1. Immediate efforts will be channeled into refining the 'edit schedule' page, addressing user feedback for a seamless experience.
2. The goal is to revamp our navigation interface, ensuring it’s both user-friendly and clear in its route presentations.
3. Recognizing the growing importance of AR, we aim to fortify our AR navigation capabilities, providing users with a richer, more immersive guidance experience.
The Social Hub is a website designed to connect ITP&IMA people with shared interests and passions. The goal of this project was to create a platform that shares our projects, fosters meaningful interactions, and builds a sense of community.
To achieve the goal, we conducted a comprehensive user experience research process to ensure that our design decisions align with user needs. Through this process, we aimed to develop a design solution that addresses user needs and preferences.
Setting up a booth to take surveys: We set up a booth on our floor to collect feedback from potential users - our IMA&ITP peers. This allowed us to collect quantitative data on user interests and behaviors, as well as receive suggestions on creating filters and categories for both the People's page and Project Page.
Conducting remote interviews via Zoom: We conducted 7 in-depth interviews with a diverse group of individuals to understand their needs, motivations, and pain points. According to our findings, the desire for socialization, collaboration, and inspiration are some of the top motivations students brought up during the interview.
User Persona: We created 6 personas based on the research we did, including current students, alumni, faculty, and incoming students. With these personas, we tried to understand our users better to evaluate necessary features. Current students are still our main target users, therefore, we further categorized the student group based on different goals driving them to use the website.
Prioritized function analysis: We listed the possible features and prioritized them to sort which functions to create for the next milestone. We decided to focus on the showcase page with filters where users can search and browse people and projects.
Information architecture: We created an information architecture diagram to ensure that the application was organized in a logical and intuitive manner. This helped us to create a clear and easy-to-navigate user interface. The new Social Hub is composed of 3 main parts: Projects, People, and My Profile.
Style Guide: The style guide referenced the NYU branding guide, but we also included some unique points, such as logo and button shapes, to show the creativity of the IMA/ITP department.
low-fi design: Before Hi-fi design, low-fi design was created to explore and determine components and layouts. This allowed us to iterate quickly and make informed design decisions.
Prototyping: We prototyped low-fi screens to check the flow between screens, adding CTA buttons to navigate users.
High fidelity Design (mobile version): The proposed changes for home page include making the search bar more prominent and adding search filters for projects or people.
.png)
.png)
For the individual project page, we integrate a bookmark function for users to save projects to their profile, making it easier to find and keep track of projects. We also made changes to display the creators and post dates, and show more projects from the same creator at the end of each post. These changes provide more context and encourage users to explore related projects from the same creator.
.png)
The people page on the Social Hub website will have filters for people search and the image and information will be rearranged to make it easier for users to find what they are looking for.
The individual People page on the Social Hub website will have a customized background, more information and contact methods, and an individual work gallery. This aims to provide a more personalized and visually appealing experience for users.
The user's profile on the Social Hub website will have a gallery for their own projects as well as projects collected from others. We also designed layout for the edit page.
Last but not least, we designed wireframes and prototypes for other screens like No Result Pages.
Chat (DM):
• Encourage members to share their thoughts, experiences, and questions to promote more active participation in the community.
• Provide a platform for students to connect and communicate with each other in a safe and supportive environment.
Forum:
• Foster a sense of community among ITP/IMA students by creating a space where they can share their opinions, ideas, and feedback.
• Facilitate the exchange of advice and information on topics such as courses, resources, and student life.
Additional features to consider:
• Conducting additional research to identify areas where the community can be expanded and improved.
• Developing new tools and resources to enhance the user experience and engagement on the platform.
• Organizing events and activities to promote networking, collaboration, and community-building among members.
• Providing access to exclusive content, services, or opportunities that are relevant and valuable to the community.
Step into a realm where technology has shattered the limits of the human form. "UPLOAD" by Unreal Engine introduces Mechanica, a marvel of engineering, with parts as interchangeable as memories and senses sharper than nature's design. Dance, run, see, and hear beyond human capability, but at the heart of this dazzling spectacle lies an existential enigma: In a world where bodies are malleable, where does the true self reside? Dive deep into a journey of consciousness and redefine what it means to be.
Team: Hazel He, Annelise Lee, Claire Zhao, and Duorfan FAN
Displayed on Hypercinema Film Festival
Our character is a mechanical body made from new materials. Her body parts like eyeballs, arms, and legs can all be disarmed, exchanged, or upgraded. Additionally, her body features advanced sensors that allow her to see and hear with extraordinary clarity or functionalities like a wink to take photos. Her arms and legs are equipped with powerful servo motors that allow her to move with incredible speed and precision or even dance in various styles. Finally, we can connect or upload our conscious to this body.
My participation in the Capybara project greatly influenced the online presence of this advanced fintech application.
I focused on creating a website that serves as the digital face of the app, embodying its innovative and user-centered design philosophy.
Visual and Brand Design: I spearheaded the creation of visual assets and comprehensive design guidelines for the Capybara project's website, ensuring consistency with the app's brand and enhancing user engagement across all digital platforms. This initiative was crucial in establishing a cohesive brand experience for users navigating between the app and its online presence.
.png)
From Wireframes to Navigation: Starting with low-fidelity wireframes, we've designed intuitive navigation components, focusing on a user-centric design. See our design process and outcomes in the screenshots of Low-Fi Wireframe and Navbar Components.
Responsive Web Development: With the use of Figma, I designed and developed three interactive web pages that offer a seamless and responsive experience on tablets and mobile devices. This effort was fundamental in ensuring that the website was accessible and user-friendly, regardless of the device used to access it.
Collaborative Development: My role extended into collaborative efforts with a cross-functional team, including a product manager and Meta engineers, to ensure the website effectively represented the AI-driven functionalities of the Capybara fintech app. The project received endorsement and funding from Microsoft, highlighting its innovative impact on the fintech sector.
Many people discard expensive costumes after one use, unaware of recycling options like donation, upcycling, or repurposing. We believe that raising awareness can reduce waste and promote sustainability.
Given the growing issue of costume waste, it's crucial for us to understand the market trends and consumer behaviors driving this demand. By analyzing these factors, we can find opportunities to promote more sustainable practices.
With a clear understanding of our target user group, I gathered valuable insights through interviews and survey to better address their needs and preferences.
We also created personas to better understand consumer demands and pain points:
Before moving into solution ideation, we mapped out the user journey to understand the process of renting with Cyco.
After mapping out CYCO’s core user journey, or "Golden Path," we had a clear direction for how users would engage with the platform—from submitting costumes for recycling to discovering available items. With this foundational flow in place, we began the design process, starting with low-fidelity sketches and progressing to high-fidelity mockups.
In the initial phase, we developed basic wireframes that outlined two main user flows: submitting costumes for recycling and browsing available items. These early sketches were designed to quickly communicate the platform's structure and functionality, focusing on simplicity to test core concepts.
- Feedback Process: We conducted user testing at this stage, focusing on how intuitive the submission form was and how easily users could navigate the catalog.
- Key Iterations: Adjustments were made based on feedback, including simplifying the navigation and making the submission flow more straightforward.
By keeping the designs minimal, we identified major pain points early, allowing us to refine the features before investing time in detailed design elements.
With feedback from the low-fidelity tests, we moved to high-fidelity mockups that fully realized CYCO’s vision. These designs focused on creating a clean, engaging experience with vibrant visuals and intuitive interactions.
1. UI Refinement: The user interface was developed with bright, bold colors that reflect the creative nature of the platform, complemented by easy-to-read typography for accessibility.
2. Visual Hierarchy: We used clear sectioning to emphasize the most important actions—submitting a costume or browsing available pieces—making it easy for users to find what they need.
3. Interactive Features: We included interactive elements like hover effects and responsive design to ensure a seamless experience across devices. Users could easily filter costumes by category and explore detailed item descriptions with a click.
Recycling Tracking: Users can track the status of their submitted costumes with real-time updates, offering transparency and ease of use throughout the recycling process.
Virtual Try-On: A standout feature that allows users to virtually try on costumes, providing a fun and interactive way to explore items before making decisions.
Recycling Instructions: Clear instructions are provided for users, even for items we don’t accept. This educates users on sustainable practices and guides them on proper disposal.
Each function was meticulously designed to align with CYCO’s goal of promoting sustainability while providing an engaging, user-friendly experience.
.png){kind=small}
.png){kind=small}
.webp)
.webp)