Match Up
Personal online closet with weather-based outfit generation
Team (Version 1)
Nicholas Wilkie - Developer
Justin Fung - Developer
David Loi - Developer
Ruixin Dai - Designer
Role
Version 1 - UX/UI Design
Version 2 - Front-End Developer
Version 3 - UX/UI Design
Tools
Version 1: Auth0, Expo.io, NodeJS, React-native, Adobe XD
Version 2: NodeJS, Express, MongoDB, API, Replit
Version 3: Adobe XD
Timeline
Version 1: 48 hours hackathon - Sept 2021
Version 2: 1 month - Dec 2022
Version 3: 2 weeks - Apr 2023
Introduction
Match Up is a mobile application that helps users build their personal clothing database and generate outfits based on the current weather. This project involves a connection between design and technology. The design must be adaptable to the practical application of the technology.
The project originated from the 2021 Hack the North project and has since undergone two iterations, currently at its third version.
Outcome
At the end of the hackathon, we submitted a design prototype and an application that implemented the basic functionality.
Later, I utilized this project in my system design exercise and transformed it into a web application using the Replit platform, which includes REST API with CORS support and Image Uploading endpoints.
In the latest version, I focused on enhancing the user experience and interface design. I am also contemplating launching the app on the mobile application platform in the future.
Version 1: Design and Developing
Inspiration
During the hackathon's brainstorming session, our team developed an idea focused on clothing coordination. We identified a common problem among team members: deciding what to wear and struggling to coordinate outfits despite having a variety of clothing options. This challenge was not due to a lack of choices, but rather too many options and difficulty in combining them effectively.
Design Process
Core features defined:
- Generate outfit based on the current weather
- Take photos of clothes and upload them to the database
- A wardrobe view of uploaded clothes
User Flow
Sketches
Prototype
Reflections
This project is a front-end focused application that uses color matching to generate real-time weather-based outfit recommendations. Working with my team of three programmers, my main responsibility as the designer was to rapidly prototype and ensure that the features I designed were technically feasible within a 48-hour time frame. While this process does not follow the standard product design process, it closely resembles the real-life design situations that are common in startups and small volume companies. The designer's focus in these situations could be often on persuading colleagues and adapting designs to the front and back-end requirements.
If you are interested in learning more about the work my group has done, please click here.
Version 2: Web App and System Design
Upgrade from last version
I started learning system design in the fall semester of 2022 and was introduced to technologies such as MongoDB, NodeJS, and REST API with CORS support and image-uploading endpoints. It presented me a great opportunity to explore the relationship between design and application, so I utilized this project as an experiment to build an API and database with an optimized interface. Although the final product was limited to serving only one user due to issues with user flow building and the absence of a login mechanism, it successfully implemented the function of filtering and matching the database according to the weather. This project served as a valuable test for me to gauge the feasibility of implementing design ideas.
System Map
Optimized Interface
The interface design of version 2 is built upon the foundation of version 1 with notable enhancements in the system map-based features. For the clothing database, I opted to utilize MongoDB and implemented a Mongoose Schema to define the structure of each individual item. Each entry within the schema corresponds to a specific property of the item, ensuring organized and efficient data management.
When a user uploads a single item of clothing, they will complete a form based on this schema. The form will capture various attributes, including the temperature range (maximum and minimum temperature) relevant to the clothing. These attributes will be utilized in conjunction with the weather API to generate outfits suitable for the current weather conditions.
Generate outfit based on the Weather API
Create
Read
Update and Delete
Version 3: User Experience Upgrade (Under construction)
Upgrade from last version
In practice, the role of a designer is more focused on improving and iterating on existing products, rather than starting from scratch. The development of Match Up was a valuable opportunity for experimentation in this regard. While I was one of the original creators, I must acknowledge that the initial design had numerous shortcomings and did not follow the standard UX design process. Certain flaws arose from a lack of user-centeredness, while others stemmed from technical limitations.
With this in mind, I decided to shift my focus towards enhancing the UX design of Match Up and creating a product prototype that balances both UX and technical considerations.
Updataed Interfaces
