App Development Study
SpinSync
Streamlining laundry tracking to save Stanford students time and energy
Responsibilities
Context
Tools
Outcomes
User Experience (UX) Design
User Interface (UI) Design
Product Design & Management
Design Systems
Market Analyst
Solo Project
Duration: 6 weeks
Figma
Miro
Jira
Adobe Creative Suite
Designed and Shipped MVP
Received an 9/10 rating from 85% users during testing.
————————————————————————————————————————————————————————————————-
Final Product
What is SpinSync
SpinSync is a mobile application designed to streamline laundry tracking for college students and eliminate the hassle of uncertainty, wasted time, and unnecessary back-and-forths. My goal was to create a seamless, user-friendly experience that simplifies laundry management, helping Stanford students save time and energy in the high-pressure and fast environment at Stanford.
Organize Your Laundry Routine
Track your laundry completion. No need to setup a timer!
Get an understanding and view of the washing and drying machine availability in your campus dorms!
Sync this app with your Google Calendar, Apple Calendar or other calendar applications!
Seamless Onboarding
Fly through to see all the features of SpinSync.
A Widget on the Home Screen
Add the widget to quickly check the status of your current laundry!
The Problem
The Common Frustrations of College Laundry Rooms
Many students in college, about 30%, leave their laundry in machines long after the cycle ends, causing delays and forcing others to remove their clothes just to start their own wash. I often see this at my 35 person dorm, which only has 4 shared machines. Many times, I walk into a messy laundry room where there are piles of washed clothes on top of the machines.
Why Does this Happen?
To understand how students feel about doing laundry and why it happens, I interviewed around 20+ Stanford students, ranging from dorms, year, gender, life habits, and majors. From this user research, I pinpointed a set of insights and grievances that helped answer this question.
User Research
Meet Our User Personas
Upon conducting needfinding, I analyzed all of the insights to develop two user personas that best embodied my target audience's needs, pain points and goals.
Compiling Everything
Upon conducting needfinding, I analyzed all of the insights to develop two user personas that best embodied my target audience's needs, pain points and goals.
Researching The Market
I brainstormed for a while until finally landing on the idea of creating a series of distinct templates that would be used to plug-and-chug the respective program information into. That way, no matter the volume of program events and resources we needed to market, we would never be starting from scratch and wasting time being unclear about motifs or design elements specific to each program.
Information Architecture
After understanding the user and market, I ideated upon the different features to include in the SpinSync product that will set it apart. After brainstorming, I organized and mapped out the preliminary information architecture to visualize how the product will be structured.
Pages to include:
Engaging Onboarding
Playful and clean homepage
Machine Availability Page
Calendar Assistant Page
Paper/ Low-fid Sketches
I created low fidelity sketches to further visualize the SpinSync product and consolidate all the core features and ideas in a realistic UI that met user needs.
Design Decisions
Wire-framing and Testing SpinSync
After sketching preliminary low-fidelity designs, I created mid-fidelity wireframes to refine user flows, bring my vision for SpinSync to life, and facilitate around 15 user tests for feedback. Throughout this process, I took full ownership of the application’s design, conceptualizing the UI and structuring the framework in Figma. For several pages and features, I developed multiple iterations based on feedback and testing insights, allowing me to make key decisions that shaped the final look and feel of the product.
Home Page Iterations
When designing the landing page for SpinSync, I explored various key features that the product should highlight. I prioritized providing users with immediate access to their current laundry status, profile and location, and machine availability previews. However, to prevent information overload, I refined the homepage scope to the following options.
Varies Widgets, Container Layout
Organized Layout between types of machines
Establishes a clear hierarchy
stronger notification language
Visually dense
Varies Widgets, Minimalism
Low Clutter
No clear hierarchy between what is important
Weak notification language
Dial Tracker, Friendly Introduction
Welcoming and playful tone
Dials take up too much space
Profile feels too cluttered and small
No notification language
Ultimately, I chose Option 1 for its clear hierarchy, organization and widget layout. Option 1 allows for a divide of user’s space between personal (user laundry tracker) and community (machine availability tracker) productivity. A "+" option is the most intuitive choice, as it aligns with the natural way users grip their phones, making it more accessible for their thumbs. Additionally, a stronger visual indicator has been implemented to clearly signal when a timer reaches zero.
Profile Page
Next, I designed the Profile Page, incorporating key features such as a customizable calendar preview, a Master Timer, and personal laundry previews. When a user clicks on the Master Timer, they are directed to a page featuring an animated mascot that displays the status of their total weekly laundry tasks. After exploring multiple variations, I narrowed them down to the four options below.
Varies Widgets, Container Layout
Calendar first motivates time management
Playful Master Timer
Visually dense
Text is difficult to see
Same personal laundry layout
Varies Widgets, Minimalism
Direct access to Calendar
Establishes next cycle motivating time management.
Playful completion notification for machines
Dial Tracker, Friendly Introduction
Welcoming and playful tone
Layout is centralized making it look organized
Dial Tracker, Friendly Introduction
Welcoming and playful tone
Awkward spacing
For the Profile Page, I selected Option 2, and for the Master Timer Page, I chose Option 1. Both designs feature a clear layout that effectively utilizes negative space, reducing clutter and visual density. For the Profile Page, prioritizing time management is essential, making it crucial to clearly communicate the next wash cycle to users.
Machine Availability Page
When designing the Dorm Machine Availability page, I prioritized key features such as filtering availability, a chat option for notifications when a machine is done, a refresh function, and anonymous user visualization. After exploring multiple variations, I narrowed them down to the three options below.
Grid View, Enlarged profiles
Clear and Concise view
No scrolling
Larger profile pictures is overwhelming and potentially distracting
Contained Grid View
No scrolling
Confusing placement of icons
Single Column View
Linear Layout of information and icons
Visually Dense
Close corporate tone
In the end, I chose Option 1 due to its clear grid view and well-structured hierarchy of information. The design guides the viewer’s attention first to the profile picture, followed by the machine number, and then the time. Compared to Option 3, it is less visually dense and offers a more organized layout with well-placed icons and information.
Design Kit
Reflection
Take-aways
Iterative Design is Essential
Multiple iterations were necessary to perfect features and flows. I found that being open to change and continuously trying to improve the design based on insights made a significant difference in the final product and design.
Figma Mastery and Design Ownership
Taking ownership of the project pushed me to strengthen my skills in Figma, from wire-framing to prototyping, and gain confidence in making design decisions.
Understanding my Audience
Designing SpinSync for college students was key to its success. I chose a non-traditional visual approach with vibrant colors to capture attention and create a fresh, engaging experience. This bold design choice balanced usability with intuitive navigation, specifically tailored to meet the needs of our busy, on-the-go user base.
Next Steps
Expand User Testing
Conduct more rounds of user testing with a diverse group of students, ensuring it works well in different dorm setups and laundry room environments.
Explore Monetization Options
Consider potential revenue streams, such as premium features, partnerships with laundry services, or campus-wide licensing, to make the app sustainable long-term.
Or email syan204@stanford.edu