SaveUp Responsive Website
The SaveUp responsive website was an extension of my SaveUp mobile app project, both created as part of my coursework for the Google UX Design Professional Certificate. Building on the same concept of helping groups collaboratively save for a shared goal, this project focused on translating the mobile app experience into a fully responsive website - ensuring accessibility across all devices and screen sizes.
The challenge
The challenge in this project mirrored the mobile app project. However, this time, the goal was to adapt the concept into a fully responsive website.
Design a responsive website that helps friend or family groups manage a household budget and save up for a common goal (such as a vacation).
My role
As this project was a continuation of my coursework, I managed the complete design process from beginning to end. This involved conducting user research, crafting the app’s structure and interactions, wireframing, prototyping and refining the user interface with careful attention to color, typography, and visual design.
Target users
Back in the mobile app project I identified two distinct target users: Alex and Sofia.
Below are Alex and Sofia’s user stories.
As a frequent traveler in a group, I want to see the group’s savings status at any time, so I can avoid awkward conversations about money.
As a frequent traveler in a group, I want a dedicated space for sharing savings and expenses to avoid misunderstandings and lost information.
As the head of a family who shares expenses, I want to allocate savings to different goals with clear priorities, so it’s easy to decide what to buy next and avoid arguments.
As the head of a family who shares expenses, I want a tool to automatically track expenses and savings with future projections, so I don’t have to calculate everything manually or worry about accuracy.
Sitemap
First, I had to decide what the sitemap should be. I’ve decided to make the navigation focused on key elements: a Goals page listing all group goals, a My Transactions space for tracking personal savings, a Help section with FAQs and contact support options, and an Account section for logging out or adjusting settings.
Paper wireframes
I sketched out paper wireframes, keeping in mind the target users’ needs and pain points. The home screen went through four variations before I decided on the final version.
I used stars to highlight the elements in each sketch that I felt were best suited for the final version. Below is the final version made of those starred elements, along with the small-screen variation.
Digital wireframes
Moving from paper to digital wireframes reassured me in the layout I came up with and allowed me to add more detail, refining elements that didn’t quite fit on paper.
Usability study
From the wireframes, I built a low-fidelity prototype, which I then used in a usability study.
Unmoderated usability study
Poland, remote
5 participants
30 min
Key insights
The study revealed the following key insights:
Can’t add a goal or transaction from the homepage
Users found it frustrating that they couldn’t add a new goal or transaction directly from the homepage. They expected a quick-access option for these actions without navigating to another page.
No filters for transaction history
Users expressed the need for filtering options in their transaction history. Without filters, it was difficult to sort or find specific transactions efficiently.
No option to upload photos
When selecting a graphic for goals or transactions, users were limited to the preset icons and couldn’t upload their own images. Many wanted the ability to personalize their savings experience with custom visuals.
Final designs
After the usability study, I designed mockups that incorporated key insights, ensuring that all pain points were addressed in the final designs. The visual design elements - such as the color palette, typography, and iconography - were directly carried over from the mobile app project, with a few additions and refinements.
Before usability study
After usability study
Below are the mockups, presented in both large and small screen variations to showcase the design’s responsiveness and adaptability.
High-fidelity prototype
Building on the mockups, I created a high-fidelity prototype that brings the design to life, showcasing the app’s functionality, user flow, and overall experience.
Takeaways
Designing for responsiveness
I learned how to build responsive websites, carefully considering how layouts should adapt across different devices. I enjoyed working with screen breakpoints, ensuring that the website remained accessible and functional at every size.
Exploring sitemap variations
I spent a significant amount of time researching and deciding on the sitemap structure, exploring different variations and their impact on navigation. This process helped me recognize the diverse approaches used in web design - many of which I had encountered before but hadn’t fully analyzed or appreciated.
Prioritizing accessibility
I gained valuable insights into accessibility considerations, such as using annotations to guide engineers on tab order or proper heading hierarchy. This experience shifted my mindset, making me more conscious of how designs are perceived by assistive technologies. I now regularly ask myself, “How would a screen reader interpret this?” when making design decisions.