Tiffany Chu UI/UX Design Portfolio

An image of Pyrite


Hackathon / Web Application

  • Role UI/UX Designer
  • Tools Figma, Illustrator, HTML & CSS
  • Team DongYun Cho - Software Developer
    Johnny Wang - Software Developer
    Tom Huang - Software Developer
  • Timeline 48 hours

Project Scope: Stormhacks 2022 required a project that relates to one of the three following themes: Mental Health, Accessibility & Education. The challenge was to create a functioning viable product to present and showcase our skills in design and development within 48 hours.

Our project submission is Pyrite, a finance web application that sorts through your bank statements and filters the transactions. It sorts transactions into proper categories and generates an overview as well as detailed reports to help you make better financial decisions.


What kind of app were we going to make?

During the first couple of hours of the hackathon, our team discussed various ideas. I led a whiteboarding session to help us get our ideas down and also fill in the boxes we needed to create a product. We wanted to create an application that could educate our generation about their finances, but also help them keep track of their spending and save money.

We then started to survey and talk to our peers about how they dealt with their finances and this opened a lot of opportunities for our web application.

Who is Pyrite for?

Pyrite would appeal to Gen Z and Millenials who are currently attempting to become more financially educated and aware of their income and spending. Through a user persona, I aimed to empathize with and understand the frustrations, goals, and motivations of the app's ideal users.

Pyrite User Persona


We realized that a lot of young adults our age are not engaged and proactive in terms of financing, because it appears intimidating, mundane, and is generally not taught systematically . Because of this, we have decided to make a website that simplifies this process, aiming to encouarge and educate young people like ourselves to better manage their finances.

Whiteboarding session
Pyrite Whiteboard session

Possible Solutions

  • Bank Statement Filteration: Pyrite takes bank statements, processes them, sorts them, and produces insightful information based on the transactions provided.
  • "Funports": Pyrite generates reports that help the user better understand their bank statements and their spending habits in a fun and engaging manner.
  • Graphs and visual presentations of the users spendings to inform and help make better financial decisions.

After brainstorming, I had no time to waste and I went into the low-fidelity wireframes on our web application. I focused on the onboarding process where the user would be able to sign up or log in and walk them through how the web application works.

Low-fidelity Wireframes
Pyrite Low-fidelity Wireframes


During this process, I realized that I couldn’t gloss over the contents of the landing page because this would be the part where the user had to decide whether they were going to continue and try out our product. I kept the landing page simple yet visually engaging to keep the user on the page.

Landing Page
Pyrite Landing Page

The next step was the actual web application. I already included the developers during the low-fidelity wireframe stage and already had their input on how the web application will function and how my design would affect the process. We kept it simple and I was not only in charge of the design but also the front-end development of the web application. I had to think on my feet when creating the screens since we didn’t have time to map out a user flow fortunately, I was able to design the necessary screens just in time for development to proceed with the project.

Web App Prototype

While I was still working on the first screen, the development team was doing some testing on some of the features. As I finished a screen, I would hand it off and they would work on it while I worked on another screen. This was a very tough process since we were racing against time to finish our web application.


Pyrite also generates “funports” which are fun financial reports that help the user better understand their bank statements and their spending habits. This concept is inspired by how Spotify uses the user's data to create "Spotify Unwrapped" which shows their most listened songs, favourite artist, podcasts etc...

Our team brainstormed some initial design concepts and I created the final designs. These reports are meant to be shared with friends and family to help bring accountability and transparency into people's financial decisions . When you learned that you spent $500 on McDonalds and you share this laugh with your friends, it could help you make better financial decisions in the future.

Pyrite Funports

What I learned

I had a fun time collaborating with 3 other developers however, being the only designer did come with its own challenges. I learned how to foster co-creation with the developers by including them in brainstorming and the design of the product. There was a lot of back and forth between us which created an iterative and enjoyable way of working. Overall, I had a blast during the hackathon and it was a great opportunity to bond with my team.

Pyrite Desktop preview

© Tiffany Chu // Privacy Policy