Home

About

Work

Resume

Home

About

Work

Resume

CREW!

Designing for Readiness, Not Just Proximity

My Role

Lead Product Designer Design Engineer

Team

David Hyun Collin Kim Grace Yim Hanara Nam (me!)

Timeframe

4 weeks

Tools

Codex CLI (Vibe Coding) Next.js React Figma

SOLUTION

INTERVIEW INSIGHTS

CONVENIENCE when purchasing materials is a top priority for users

A key motivation for buying second hand materials over brand new ones is AFFORDABILITY

SAFETY in conducting transactions with strangers is important for users

Users want to dispose of unused items EFFICIENTLY without hassle.

CONVENIENCE when purchasing materials is a top priority for users

A key motivation for buying second hand materials over brand new ones is AFFORDABILITY

SAFETY in conducting transactions with strangers is important for users

Users want to dispose of unused items EFFICIENTLY without hassle.

USER PERSONAS

USER JOURNEY MAP

Mapping Emotions to Design Needs: Understanding User Experience through Claire's Journey

DESIGN REQUIREMENTS

Our key design requirements are features that our design must have, which shaped and informed our lo-fi prototype.

Allow sellers to easily list a variety of used items for sale, including product details such as a title, description, category, and image.

Encourage users to provide ratings and review sellers after they complete a purchase.

Facilitate communication between buyers and sellers regarding item pickup and transaction details.

Store user information within the app: Name, ratings, transaction history, location, and proof of verification.

Allow sellers to easily list a variety of used items for sale, including product details such as a title, description, category, and image.

Encourage users to provide ratings and review sellers after they complete a purchase.

Facilitate communication between buyers and sellers regarding item pickup and transaction details.

Store user information within the app: Name, ratings, transaction history, location, and proof of verification.

STORYBOARDS

Two Storyboards: Buyer and Seller Perspectives

The storyboards depict user journeys in specific scenarios, illustrating interactions with our product. Inspired by personas and the user journey map, they provide a realistic view of user experiences with our product.

LOW FIDELITY PROTOTYPE

3 Main Flows: Upload Listing, View Listings and Seller Profile, Chatting Feature for Seller-Buyer Communication

We created a gray-scale, low-fidelity interactive prototype on Figma, making sure to include all components we wanted to include in our app.

FLOW #1 - UPLOADING A LISTING

FLOW #2 - VIEW LISTING & SELLER PROFILE

FLOW #3 - CHATTING + PURCHASE

INFOMRATION ARCHITECHTURE

Mapping Pathways and Functionality

The diagram organizes and visualizes our design's pathways and subcategories, clarifying component connections. It serves as a comprehensive roadmap for our final hi-fi prototype, capturing our product's complete functionality.

USABILITY TESTING

Evaluation Plan

METHOD:

Introduced product goal and functionality, provided task scenario.

Gave low-fidelity interactive prototype to complete tasks.
Observed navigation, prompted verbalized thinking during tasks, and noted actions and live reactions.
Conducted post-interview for feedback on difficulties, likes, dislikes, desired features, and additional thoughts.

TASKS:

Uploaded a listing: Create and upload an old textbook listing, evaluated completion based on button usage and ease/difficulty.
Viewed a listing and its seller: Navigate to view listing and seller profile, evaluated completion based on navigation.
Messaged seller to purchase: Message seller about purchasing a listing, evaluated completion based on successful purchase and communication experience.

USABILITY TESTING INSIGHTS

Enhanced Seller Profile Access, Improved Chat Feature, Accessible Action Buttons, and User-Friendly Navigation Options

Users would like to easily access the seller profile to view their information.

Streamline the chat feature to better facilitate purchases

Action buttons need to be more accessible

Users found it useful to have the option to search, filter, or just scroll through all the options

Full Evaluation Report

Users would like to easily access the seller profile to view their information.

Streamline the chat feature to better facilitate purchases

Action buttons need to be more accessible

Users found it useful to have the option to search, filter, or just scroll through all the options

FINAL SCREENS

The final product

REFLECTION

Bringing our course project to life and tackling a real problem in the community

Our project deepened our understanding of user-centered design, emphasizing the importance of iteration in refining our research and prototyping. Given more time, we would have conducted additional rounds of testing to iterate further and expand our design with new features like package lockers for seamless transactions.

A major challenge was implementing key features, especially in transaction flows, leading us to opt for a communication-based platform for transactions outside the app.

Despite challenges, our high-fidelity prototype came together swiftly with iterations and visual design, showcasing the power of iteration in product development.

That is the end of this case study

Hop on to the next ᕙ •̀ ᗜ •́ ᕗ

That is the end of this case study

Hop on to the next ᕙ •̀ ᗜ •́ ᕗ

That is the end of this case study

Hop on to the next ᕙ •̀ ᗜ •́ ᕗ

Let's collaborate & create something together!

I'm always up for a chat, especially about design related topics : )

EXPLORE

Home

About

Work

Resume

Let's collaborate & create something together!

I'm always up for a chat, especially about design related topics : )

EXPLORE

Home

About

Work

Resume

Let's collaborate & create something together!

I'm always up for a chat, especially about design related topics : )

EXPLORE

Home

About

Work

Resume

CREW!

CREW!

Designing for Readiness, Not Just Proximity

Designing for Readiness, Not Just Proximity

Designing for Readiness, Not Just Proximity

CONVENIENCE when purchasing materials is a top priority for users

A key motivation for buying second hand materials over brand new ones is AFFORDABILITY

SAFETY in conducting transactions with strangers is important for users

Users want to dispose of unused items EFFICIENTLY without hassle.

CONVENIENCE when purchasing materials is a top priority for users

A key motivation for buying second hand materials over brand new ones is AFFORDABILITY

SAFETY in conducting transactions with strangers is important for users

Users want to dispose of unused items EFFICIENTLY without hassle.

Mapping Emotions to Design Needs: Understanding User Experience through Claire's Journey

Our key design requirements are features that our design must have, which shaped and informed our lo-fi prototype.

Allow sellers to easily list a variety of used items for sale, including product details such as a title, description, category, and image.

Encourage users to provide ratings and review sellers after they complete a purchase.

Facilitate communication between buyers and sellers regarding item pickup and transaction details.

Store user information within the app: Name, ratings, transaction history, location, and proof of verification.

Allow sellers to easily list a variety of used items for sale, including product details such as a title, description, category, and image.

Encourage users to provide ratings and review sellers after they complete a purchase.

Facilitate communication between buyers and sellers regarding item pickup and transaction details.

Store user information within the app: Name, ratings, transaction history, location, and proof of verification.

Two Storyboards: Buyer and Seller Perspectives

The storyboards depict user journeys in specific scenarios, illustrating interactions with our product. Inspired by personas and the user journey map, they provide a realistic view of user experiences with our product.

3 Main Flows: Upload Listing, View Listings and Seller Profile, Chatting Feature for Seller-Buyer Communication

We created a gray-scale, low-fidelity interactive prototype on Figma, making sure to include all components we wanted to include in our app.

FLOW #1 - UPLOADING A LISTING

FLOW #2 - VIEW LISTING & SELLER PROFILE

FLOW #3 - CHATTING + PURCHASE

Mapping Pathways and Functionality

The diagram organizes and visualizes our design's pathways and subcategories, clarifying component connections. It serves as a comprehensive roadmap for our final hi-fi prototype, capturing our product's complete functionality.

Evaluation Plan

METHOD:

Introduced product goal and functionality, provided task scenario.

Gave low-fidelity interactive prototype to complete tasks.

Conducted post-interview for feedback on difficulties, likes, dislikes, desired features, and additional thoughts.

TASKS:

Uploaded a listing: Create and upload an old textbook listing, evaluated completion based on button usage and ease/difficulty.

Viewed a listing and its seller: Navigate to view listing and seller profile, evaluated completion based on navigation.

Messaged seller to purchase: Message seller about purchasing a listing, evaluated completion based on successful purchase and communication experience.

Enhanced Seller Profile Access, Improved Chat Feature, Accessible Action Buttons, and User-Friendly Navigation Options

Users would like to easily access the seller profile to view their information.

Streamline the chat feature to better facilitate purchases

Action buttons need to be more accessible

Users found it useful to have the option to search, filter, or just scroll through all the options

Full Evaluation Report

Users would like to easily access the seller profile to view their information.

Streamline the chat feature to better facilitate purchases

Action buttons need to be more accessible

Users found it useful to have the option to search, filter, or just scroll through all the options

The final product

Bringing our course project to life and tackling a real problem in the community

A major challenge was implementing key features, especially in transaction flows, leading us to opt for a communication-based platform for transactions outside the app.

Despite challenges, our high-fidelity prototype came together swiftly with iterations and visual design, showcasing the power of iteration in product development.

That is the end of this case study

Hop on to the next ᕙ •̀ ᗜ •́ ᕗ

That is the end of this case study

Hop on to the next ᕙ •̀ ᗜ •́ ᕗ

That is the end of this case study

Hop on to the next ᕙ •̀ ᗜ •́ ᕗ