FOAM
24 hour sprint project, April 2024
The goal of this project is to create a site with filtering, aggregator and sorting functionality. For this project, I chose three websites with these features, analysed them, and used the results to inform my own site.
Part 1: Competitive Analysis
I chose three sites that I use frequently, Depop, Pinterest and Google Maps, which all offer different ways to like and save liked posts. For each site, I found and compared different factors.
| Depop | Google Maps | ||
|---|---|---|---|
| “Like” button | ✓ | ✓ | ✓ |
| “Like” button reacts to hover | ✗ | ✓ | ✓ |
| Drop down menu to “Like” | ✗ | ✗ | ✓ |
| Save to Custom Lists | ✗ | ✓ | ✓ |
| List of Likes | ✓ | ✓ | ✓ |
| Auto Select List to Save to | ✗ | ✓ | ✗ |
| Edit List of Likes | ✓ | ✓ | ✓ |
| Reorder List of Likes | ✗ | ✓ | ✗ |
| Sort List of Likes | ✗ | ✗ | ✓ |
| Add Notes to Liked Item | ✗ | ✗ | ✓ |
Most successful factor: “Like” Button - By allowing users to express interest with a single click rather than navigating through a dropdown menu, Depop ensures a streamlined user flow.
Least successful factor: The absence of sorting options for the list of favorites contradicts the principle of organization and clarity. Without the ability to arrange items based on different criteria such as price or artist name, the favorites list becomes difficult to navigate.
Most successful factor: Save to Custom Lists - Offering the option to save items to custom lists promotes user engagement and organization, aligning with the design principle of customization and personalization
Least successful factor: Auto Select List to Save to - The automatic selection of lists for saving items, while intended to streamline the process, can frustrate users when it inaccurately predicts their intentions.
Most successful factor: Sort List of Favourites - By allowing users to organize their saved items according to factors such as distance or price, Google Maps enhances usability and utility.
Least successful factor: Add Notes to Favourited Item - I personally found it to be unnecessary as I did not use the functionality even once. It clutters up the list and detracts from the simplicity of the interface.
Based on previous analysis, I want to include the following in my design
- “Like” button
- “Like” button reacts when hovering
- List of Favourites
- Edit List of Favourites
- Sort List of Favourites
Part 2: Functionality
FOAM is a Pinterest-like portfolio site for art students, a local-artist discovery site for clients to keep track of their favourite local artists.
As a RISD student, I constantly get asked,
“Do you know a Graphic designer for a concert campaign?”The interface is similar to Pinterest, but it differs in that you can get in touch with real artists behind the work.
Filtering categories: Major, Location, Availability
Sorting feature: Price, Artist Name
Aggregator section: Favorites gallery
Item cards: Photograph image, title, major, name, location, availability status
I will be using filter to filter by Major, Location and Availability. Similarly, I will be sorting by Price and Artist Name. Lastly, aggregation will be used to add favorites to a gallery.
Part 3: Figma Prototype
Next, I created mockups for the Landing and Favourites page in Figma to help with the design process.
Figma Prototype of Landing Page
Figma Prototype of Favourites Page
Part 4: Foam
I implemented all the target filter, aggregation and sort functions. All filters appear as drop down menus. I also created a 'select all' checkbox for most menus for easy selection of multiple categories.
As an additional fun thing, I created a notification popup animation when a liked item is added. It also indicates which image you liked!
One surprising challenge is displaying image as landscape or horizontal, and making sure all empty gaps are filled in. To do this, I used column-gap instead of flexbox.
Deployed Landing Page showing Notification popup
Deployed Landing Page with Filters expanded
Deployed Favourites Page
My biggest takeaway is that there is a lot to learn from competitors' designs, and that little details such as adding a notification pop up adds to the experience.
developed by Ivery Chen April 2024