Hilltop Market
How might we create a safe, student-centered marketplace that makes buying and selling on campus as trustworthy as borrowing something from a friend in the dorms?
How might we create a safe, student-centered marketplace that makes buying and selling on campus as trustworthy as borrowing something from a friend in the dorms?
Product Designer
June - October 2025
Figma, user research, product thinking
visual design
Shipped for development
SummaryOver the course of 12 weeks, I embarked on my first end-to-end design project: Hilltop Market, a peer-to-peer marketplace app created specifically for Howard University students. The mission was, and still is, to simplify the buying and selling of second-hand goods by offering a trusted platform that reduces the friction and safety concerns.
The problemEver try to sell a textbook or a pair of sneakers on campus and end up posting it in a random GroupMe or your Instagram story… only for it to get buried in the chat or ignored by people who aren’t even at Howard?
That’s the reality for most Howard students. Buying and selling second-hand items happens across scattered platforms. Instagram, Fizz (an annonymous social app), and word of mouth. Without a central hub, communication is messy, and students often have to meet strangers off-campus just to complete a deal.
This begs the question: “How might we create a safe, student-centered marketplace that makes buying and selling on campus as trustworthy as borrowing something from a friend in the dorms?”
That’s the reality for most Howard students. Buying and selling second-hand items happens across scattered platforms. Instagram, Fizz (an annonymous social app), and word of mouth. Without a central hub, communication is messy, and students often have to meet strangers off-campus just to complete a deal.
This begs the question: “How might we create a safe, student-centered marketplace that makes buying and selling on campus as trustworthy as borrowing something from a friend in the dorms?”
Understanding our campusI collected 25 survey responses from students across different years and majors and conducted 10 interviews. My goal was to uncover the real pain points behind why the current ways of exchanging goods felt frustrating or even risky. A couple themes stood out:
Scattered & unreliable Students described the process as disorganized. Listings were scattered across group chats, Instagram stories, and random flyers. Many said they’d often miss out on items because there was no single, dependable place to browse or post.
Trust and safety A common concern was the lack of assurance when meeting up with strangers. Interviewees worried about scams and feeling unsafe when coordinating transactions.
Discovery and Filtration They emphasized the want for clear categories, search functions, and filters to surface the right items.
Scattered & unreliable Students described the process as disorganized. Listings were scattered across group chats, Instagram stories, and random flyers. Many said they’d often miss out on items because there was no single, dependable place to browse or post.
Trust and safety A common concern was the lack of assurance when meeting up with strangers. Interviewees worried about scams and feeling unsafe when coordinating transactions.
Discovery and Filtration They emphasized the want for clear categories, search functions, and filters to surface the right items.
Competetive Analysis
I examined key elements and features across these platforms, such as navigation flows, search and filter functionality, listing creation, trust and safety measures, and their visual presentation of items.
These insights directly informed the project’s information architecture and low-fidelity wireframes, ensuring that the app’s core flows built on familiar conventions while addressing gaps in existing solutions.
Ideation Turning a complex question into tangible designs, I had to define a couple key features.
I moved into creating low-fidelity wireframes to explore how the core features might take shape. At this stage, I wasn’t worried about colors or typography; I just wanted to map out how a student would actually move through the app.
Search Page Search Filtering Direct Messaging
Profile Report Profile Checkout
I moved into creating low-fidelity wireframes to explore how the core features might take shape. At this stage, I wasn’t worried about colors or typography; I just wanted to map out how a student would actually move through the app.
My lo-fi wireframes addressed the user’s pain points in the following ways:
1. Organization Students are able to purchase, sell, and communicate within a centralized platform.
2. Transparency Students are able to see exactly who they’re buying/selling to. They may report an item/profile. Transactions are made in-app.
3. Discovery Items are suggested to students based on behavior. When searching, students may filter to find exactly what they want.
A design challenge emerges...During usability testing, a recurring theme emerged around the navigation structure. Several students expressed confusion when they discovered that the search button functioned as the home page.
They expected a home icon in place of where the search icon was on the navigation bar. Participants noted that they preferred search to be a seperate icon, not a tool within the home page.
Additionally, many participants highlighted that the profile icon felt out of place in the bottom navigation bar. Drawing on patterns from familiar social media apps, they expected the profile icon to be positioned in the top-right corner of the screen.
This feedback revealed a gap between the initial design assumptions and students mental models of a marketplace app.
They expected a home icon in place of where the search icon was on the navigation bar. Participants noted that they preferred search to be a seperate icon, not a tool within the home page.
Additionally, many participants highlighted that the profile icon felt out of place in the bottom navigation bar. Drawing on patterns from familiar social media apps, they expected the profile icon to be positioned in the top-right corner of the screen.
This feedback revealed a gap between the initial design assumptions and students mental models of a marketplace app.
After implementing this feedback, students navigated the app more intuitively. This demonstrated that aligning the navigation with student expectations significantly improved the usability of the product.
Refining the look, Pt. 1
Moving into the high-fidelity wireframes, I started with the home page. Student feedback and competitive analysis made it clear that the home page needed to feel like a discovery hub. On the main page you can see:
1. Recent orders for quick and easy accessibility.
2. Updates from sellers you follow to stay in the loop.
3. Suggested items based on user behavior to discover something new.
4. View top sellers on the app to discover who’s trending.
Students can then expand the following update and suggested view. This helps balance personalized discovery with a clean, uncluttered home screen.
Moving into the high-fidelity wireframes, I started with the home page. Student feedback and competitive analysis made it clear that the home page needed to feel like a discovery hub. On the main page you can see:
1. Recent orders for quick and easy accessibility.
2. Updates from sellers you follow to stay in the loop.
3. Suggested items based on user behavior to discover something new.
4. View top sellers on the app to discover who’s trending.
Students can then expand the following update and suggested view. This helps balance personalized discovery with a clean, uncluttered home screen.
Refining the look, Pt. 2
Moving onto the search view, I focused on addressing one of the key pain points uncovered during the research phase: students wanted clear categories, intuitive search, and effective filters to quickly surface the right items.
Moving onto the search view, I focused on addressing one of the key pain points uncovered during the research phase: students wanted clear categories, intuitive search, and effective filters to quickly surface the right items.
In earlier iterations, the search view featured a Suggested for you section. However, user testing revealed that this content felt better suited to the Home view, where personalized recommendations were already the focus.
To further enhance usability, I restructured the Shop by category section, expanding it from a horizontal scroll into a scannable grid directly beneath the search bar. This adjustment improved information hierarchy and visual accessibility.
To further enhance usability, I restructured the Shop by category section, expanding it from a horizontal scroll into a scannable grid directly beneath the search bar. This adjustment improved information hierarchy and visual accessibility.
A/B Testing: “Clear” vs. X
During testing, I ran a small A/B comparison to evaluate two variations of the search reset interaction when typing: one version with a “Clear” button and another using a simple X icon.
During testing, I ran a small A/B comparison to evaluate two variations of the search reset interaction when typing: one version with a “Clear” button and another using a simple X icon.
Usability testing revelaed that while the “Clear” label was easy to understand, it disrupted the visual rhythm of the search for a couple students.
On the other hand, the X icon created a cleaner, more modern interaction pattern that students were already familiar with from other apps like Instagram and Depop.
Ultimately, I went with the X.
A/B Testing: Filter View
While refining the filter experience, I narrowed down my design to two iterations to determine which structure offered better clarity and usability.
To evaluate both versions, I ran another A/B usability test. Students were asked to apply filters to find and describe their thought process aloud.
While students appreciated Version A’s ability to view all filters at once, they ultimately preferred Version B. The collapsible categories aligned more closely with UI conventions they’d already experienced. One student in particular noted that; “the layout feel more intuitive and modern.”
Ultimately, I went with Version B.
While refining the filter experience, I narrowed down my design to two iterations to determine which structure offered better clarity and usability.
- Version A (left) presented all filter options—price range, sale toggle, categories, and condition—all on one screen.
- Version B (right) keeps all the filter options of version A and instead uses a progressive disclosure approach, grouping filters into collapsible sections.
To evaluate both versions, I ran another A/B usability test. Students were asked to apply filters to find and describe their thought process aloud.
While students appreciated Version A’s ability to view all filters at once, they ultimately preferred Version B. The collapsible categories aligned more closely with UI conventions they’d already experienced. One student in particular noted that; “the layout feel more intuitive and modern.”
Ultimately, I went with Version B.
Design System Overview
To maintain consistency and scalability across the app, I developed a design system that defined Hilltop Market’s visual language and interaction.
To maintain consistency and scalability across the app, I developed a design system that defined Hilltop Market’s visual language and interaction.