Thrifthouse 👚
Thrifthouse is a web and mobile app that allows college students to post clothing, furniture, etc. for purchase by their peers. After seeing a flier for Thrifthouse on my school's campus, I wanted to initiate a personal project to build a website for Thrifthouse in order to understand both how to use Figma as well as understand the design process. I believe the best way to learn is through experience; thus, I took it upon myself to go through the design process and create a website for Thrifthouse over the course of 2 weeks.
My focus was on creating a user-friendly home page for "Buyers" - those who were looking to sell their items. This problem was necessary to solve because Thrifthouse was attempting to expand their customer base to college students, especially those who were in the market to buy items like clothing for school and furniture for their dorms/apartments.
💡 Goal: Prompt "Buyers" to download/use the Thrifthouse app 💡
🧠 Brainstorm - How can we achieve our product goal?
I pondered how I could initialize this idea. Because I had limited UIUX experience, I decided that research and understanding a user/market would be the best place to start. Thus, I started brainstorming by figuring out what aspects of the reselling process was important to students across Stanford's campus.
Although my primary focus was on the "Buyers" page, I made the distinction between Buyers and Sellers in order to understand if problems on both sides could be solved with one feature.
I started with asking my classmates what issues they had based on their own experience with apps like Depop and Grailed. Thus, I brainstormed a way to represent both parties by looking at both their "Needs" and their "Roadblocks".
My findings were then translated into a user-persona map in order to categorize feedback based on Goals, Needs, and Frustrations.
🔍 Interpreting My Findings
Naturally, a lot of the Goals, Needs, and Frustrations that students around campus were facing could be solved through the features that the app offered. Now, the goal was to e able to best translate this into a website in an intuitive way.
- first, define nudge -> increasing traffic to the site
- it's essentially going to act as a marketing website
- I explored different ways that I could market the mobile application (clothing rack that rotated with what's actually displayed on the site,
- pros and cons of each
- what would make the most sense was displaying the feautures on the mobile site
- so, naturally it would make sense to display the best features
✏️ Initial Sketches
I began with initial sketches to lay out how I wanted to approach the layout of the website. I wanted to include 5 main sections that could be rooted from the home page.
1) Home 2) Buyers 3) Sellers
4) Blog + Articles 5) Contact
👩🏻🎨 Low-Fidelity Wireframes
When I finished the initial sketches, I moved into creating Low-Fidelity Wireframes to structure out the website. In the translation from the initial sketches to the low-fidelity wireframes, I made notable changes.
⭐ Home Page: Buyers
- I decided to combine the "Home" page + "Buyers" page. Because our primary audience was going to be buyers, it was key to highlight the prevalent features on the mobile application. It would be an unnecessary step to go from "Home" page -> "Buyers" page / "Sellers" page because it just required an additional choice / click from the user's perspective.
⭐ Sellers + About
- I decided to add an "About" page because I wanted to drive the point of sustainable, local items exchange on college campuses home.
⭐ Contact + FAQs
- I decided to add an "FAQs" page to expedite the process of asking questions and make a clear separation between the "Contact" and "FAQs" page. The "Contact" page was for inquiries and the "FAQs" were for quick questions.
⭐ Blog
⭐ Headers, Footers
👩🏻🎨 Design Specs
Once I finished the low-fidelity wireframes, I created a design system for the website. I wanted to stick with the pink-ish/red hues that Thrifthouse had on their mobile application, but wanted to add in additional shades of green as complimentary colors.
📙 Coming Soon Pages
I also created two "Coming Soon" pages as placeholders before the live website was up.
🎨 High-Fidelity Mockups
Once I created the Design Specs, I began with the final high-fidelity wireframes. Because my main focus was on the "Buyers" page, I will be breaking down the design choices from that page. The other pages including "Sellers", "About", "Contact", "FAQs", "Blog", and "Blog Article" didn't differ too much from the wireframes.
⭐ Home Page: Buyers
✏️ Notable Changes
I decided to change the bulk of this front page from the original wireframes. I felt that the original wireframes didn't convey the sense of connection and communication that would be fostered through the Thrifthouse app. Thus, I decided to add additional elements that would do the trick.
I made a small adjustment to the sellers page - I included placards of buyers and sellers in order to display potential profiles of buyers and sellers.
⭐ Additional Pages
🪞 Reflection
✍️ Reflecting on the Design Process
Thrifthouse was the first personal design project that I had taken on during the school year. I hadn't really gotten a chance to go from zero to a finished project in regards to web design before, and I felt like it was a great opportunity to figure out how to do so using the web design tools that I had taught myself. This project taught me about creating wireframes, following consistent design specs, and building a final high-fidelity product.
🔥 Aspects I Can Improve Next Time
If I had more time to work on Thrifthouse, I would take the time to conduct more user research. I believe that a lot of the decisions I made were influenced by my personal bias and the bias of those in my immediate circle of people I talk to. I would definitely want to expand to more students that don't regularly use reselling apps because that's another market for Thrifthouse to engage with to increase customer numbers.
I also felt like I made a lot of assumptions pre-website building. I assumed that the mobile features would yield the best return on engaging our customers to download the app, but I definitely would like to do more research on what format this could be represented through / if this was actually the most efficient way to achieve the goal.
I would also like to go through the design process that I conducted with the "Buyers" page with all other pages to be implemented on the site. I think that this would allow for a more in-depth understanding of how to engage your audience with second-level pages that don't focus on your immediate product like an "About" or "Blog" page.