Budgeteer Website
Budgetting Tool
Client
Role
Lead UX Designer
Duration
April - May 2026
Situation
This project was created for Google's UX Design Certification program. The goal of the second project was to create a mobile and desktop version of our first project. In this case, Jack would create a mobile and desktop website for Budgeteer. As a refresher, Budgeteer is a tool to help users easily create budget plans.
Timeline
Jack would begin by viewing the app version of Budgeteer to understand which aspects of the app could be transferred without change to the website version and what needed to be reworked. Deciding to start with the mobile version of the website, Jack would complete his paper wireframes and begin building a digital wireframe.
After testing the basic user flow and creating a basic sticker sheet, Jack began working on his low-fidelity prototype. He would fix minor issues prompted by the move from app to website and create an updated the color scheme.
After testing his low-fidelity prototype, Jack would discover accessibility issues regarding his updated color scheme. After updating his color scheme and ensuring accessibility, he began creating his high-fidelity prototype.
Jack would create his high-fidelity prototype similar to his app. The main difference would be an update to the visuals of his website to make it more visually appealing to the user.
After testing the high-fidelity prototype's functionality, the mobile version of the app would be completed. Due to the success of the mobile version of the website, the desktop version would take inspiration from it. The desktop version of the website would follow the same process as its mobile counterpart and be adjusted for issues that arose when adapting the mobile format to a desktop format.
Takeaways
The results for the mobile and desktop versions of Budgeteer showed major improvements regarding the wireframing, prototyping, and visual design of the product. It was a great learning experience converting a project into a desktop format and learning the differences in development. If the project were to be redone, more frames could have been added to the wireframe, and the low-fidelity prototype and the stickersheet could have been more in-depth. Overall, Jack is proud of the finished result and the progress that he has made in his design.