A Collection of UI Prototype Works

CONTEXT

Prototype MVPs with high-calibre interactions is critical to faciliate powerful storytelling with more authentic experience.

The decades-long debate of whether designers should learn how to code remains unsolved, but being able to code the prototypes does have a strong edge such as better communication with the development team and powerful support for storytelling in the design proposal.

Therefore, while learning UX fundamentals during my time at UNC Chapel Hill, I also proactively learned to code web prototypes via coursework and internship. Feel free to check out my projects below:

Responsive Web Design - Business Admin Data Dashboard

Implement a responsive data dashboard that matches the style and interaction of a design hand-off from a local agency's past work

This is a coursework project. We were been tasked to implement the UI and interaction of a design hand-off from a local agency's past work. The design is a business admin dashboard for a fortune 500 automobile firm that has been sunsetted for budgeting reasons.

• Design Process

  There were unclear specifications on the design hand-off. Thus, I first imported the hand-off in Figma and analyzed the styles and layouts, and used Adobe Illustrator to recreate some blurry icons in SVG format. Finally, I coded the responsive prototype that matches the exact interactions and layouts from the hand-off.

*Tech stack: HTML / CSS / Bootstrap

Data-Driven Web App - Soccer Prediction Platform

Redesign the UI layouts and data-driven components of a soccer prediction platform based on user testing and heuristic evaluations

This is the deliverable of my internship at TurboStrat LLC, an early-stage startup specializing in sports analytics and prediction using machine learning. I was tasked to redesign the UI and create new data-driven features to support sports betting decisions.

• Design Process

  I conducted 3 user tests and heuristic evaluation to uncover key usability issues, and used Figma to wireframe the new UI components. Finally I was also been tasked to modernize the codebase by leveraging modern CSS/JS frameworks and libraries to program the solution.

*Tech stack: Gatsby.js / D3.js / Material UI / Tailwind CSS / Framer Motion

A US National Park Service Map

Design a full-page map interface that leverage Google Map API and interactions such as information overlay, tooltips...etc.

This is a coursework project. We were been tasked to develop a responsive and full-page map interface that visualizes a certain type of geo-location data with multiple interaction touch points to access brief and more detailed information.

• Design Process

  Driven by passion, I designed a map interface that presents the national parks around a specific state in the US. I adjusted the map color scheme to match the NPS design style guide ( Brown & Green ) and developed the interactive functions and styling of the prototype.

*Tech stack: React.js / Material UI / Tailwind CSS / React Google API / NPS API

An Interactive Media teaching The Great Cola War

Design an interactive media teaching a concept, knowledge, or fact and end with a short quiz to test audiences' learning performance.

This is a coursework project. The requirement is to build an instructional media to teach a concept/knowledge based on individual preference and design a short quiz at the end to test the learning performance. Target audience: high school students.

• Design Process

  With huge interest to learn the great cola war between Coca Cola and PepsiCo, I researched and put together a series of slides teaching the essential information of the two soda enterprises. I then designed a trivia for users to test their soda knowledge at the end.

*Tech stack: React.js / Material UI / ChartJS

REFLECTION

Learning the technical constraints and capabilities helps me appreciate the developers' effort and propose a more pragmatic design

Working on these prototype development projects really helped me grow better as a designer as I have now learned deeply about the technicalities of implementing UIs from design concepts and wireframes, being able to empathize with the development team, and strategize more practical design ideas in the future to streamline the product development cycle.