CONTEXT
Treffa is a social shopping app for personalized recommendations and finds, powered by a bounty system.
As part of a short internship, I worked directly with Treffa's founder to redesign the platform's product discovery and shopping features. Treffa was looking to integrate smart AI features to aid with product search, so much of the design sprint was spent fleshing out what that flow from initial query to purchase could look like.
THE PROBLEM
Integrate Treffa's new AI search feature into its existing core product discovery functionality.
Also, upgrade existing request and recommendation UX to feel more frictionless and refined.
OBJECTIVES
New feature
Adding another layer of product discovery on top of Treffa's community-powered assist system
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 15 13" xmlns="http://www.w3.org/2000/svg"><path d="M 13.022 8.743 C 12.879 8.654 12.701 8.643 12.549 8.715 C 12.034 8.959 11.418 8.816 11.064 8.369 C 10.709 7.922 10.709 7.29 11.064 6.844 C 11.418 6.397 12.034 6.253 12.549 6.497 C 12.701 6.569 12.88 6.559 13.022 6.469 C 13.164 6.379 13.251 6.222 13.25 6.054 L 13.25 3.435 C 13.25 2.893 12.811 2.454 12.269 2.454 L 10.047 2.454 C 10.056 2.372 10.061 2.29 10.061 2.208 C 10.06 1.599 9.808 1.016 9.364 0.599 C 8.743 0.016 7.843 -0.158 7.05 0.151 C 6.256 0.46 5.712 1.198 5.65 2.048 C 5.64 2.183 5.643 2.319 5.658 2.454 L 3.436 2.454 C 2.894 2.454 2.455 2.893 2.455 3.435 L 2.455 5.411 C 2.373 5.402 2.291 5.398 2.209 5.398 C 1.6 5.399 1.017 5.651 0.6 6.095 C 0.179 6.539 -0.037 7.14 0.005 7.751 C 0.078 8.851 0.949 9.73 2.048 9.812 C 2.184 9.822 2.32 9.819 2.455 9.803 L 2.455 11.777 C 2.455 12.319 2.894 12.759 3.436 12.759 L 12.269 12.759 C 12.811 12.759 13.25 12.319 13.25 11.777 L 13.25 9.159 C 13.251 8.99 13.164 8.833 13.022 8.743 Z M 12.269 11.777 L 3.436 11.777 L 3.436 9.159 C 3.436 8.99 3.35 8.834 3.208 8.744 C 3.065 8.654 2.887 8.643 2.735 8.715 C 2.219 8.959 1.604 8.816 1.249 8.369 C 0.895 7.922 0.895 7.29 1.249 6.844 C 1.604 6.397 2.219 6.253 2.735 6.497 C 2.887 6.569 3.065 6.559 3.208 6.469 C 3.35 6.379 3.436 6.222 3.436 6.054 L 3.436 3.435 L 6.3 3.435 C 6.468 3.435 6.625 3.349 6.715 3.207 C 6.805 3.064 6.816 2.886 6.743 2.734 C 6.5 2.218 6.643 1.603 7.09 1.248 C 7.536 0.894 8.169 0.894 8.615 1.248 C 9.062 1.603 9.205 2.218 8.962 2.734 C 8.889 2.886 8.9 3.064 8.99 3.207 C 9.08 3.349 9.237 3.435 9.405 3.435 L 12.269 3.435 L 12.269 5.412 C 12.134 5.397 11.998 5.394 11.863 5.403 C 10.676 5.488 9.769 6.497 9.812 7.687 C 9.855 8.876 10.834 9.817 12.024 9.814 C 12.106 9.815 12.188 9.81 12.269 9.801 Z" fill="rgb(138, 138, 138)" height="12.75882311931882px" id="t6n_qkwZT" transform="translate(1 0)" width="13.250470367118854px"/></svg>)
Consistency
Making sure that the new feature's design blends seamlessly with Treffa's existing branding
Refinement
Bridging the best of all of Treffa's previous iterations to create a more modern look and feel
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 15 13" xmlns="http://www.w3.org/2000/svg"><path d="M 3.82 3.884 L 1.281 6 L 3.82 8.116 C 3.961 8.229 4.03 8.409 4.001 8.588 C 3.971 8.766 3.847 8.915 3.677 8.976 C 3.507 9.038 3.317 9.002 3.18 8.884 L 0.18 6.384 C 0.066 6.289 0 6.148 0 6 C 0 5.851 0.066 5.711 0.18 5.616 L 3.18 3.116 C 3.392 2.939 3.708 2.968 3.884 3.18 C 4.061 3.392 4.032 3.708 3.82 3.884 Z M 14.82 5.616 L 11.82 3.116 C 11.608 2.939 11.292 2.968 11.116 3.18 C 10.939 3.392 10.968 3.708 11.18 3.884 L 13.719 6 L 11.18 8.116 C 11.039 8.229 10.97 8.409 10.999 8.588 C 11.029 8.766 11.153 8.915 11.323 8.976 C 11.493 9.038 11.683 9.002 11.82 8.884 L 14.82 6.384 C 14.934 6.289 15 6.148 15 6 C 15 5.851 14.934 5.711 14.82 5.616 Z M 9.671 0.03 C 9.546 -0.015 9.408 -0.009 9.288 0.047 C 9.168 0.103 9.075 0.205 9.03 0.329 L 5.03 11.329 C 4.984 11.454 4.99 11.592 5.047 11.712 C 5.103 11.832 5.204 11.926 5.329 11.971 C 5.384 11.99 5.442 12 5.5 12 C 5.71 12 5.898 11.868 5.97 11.671 L 9.97 0.671 C 10.015 0.546 10.009 0.408 9.953 0.288 C 9.897 0.168 9.795 0.075 9.671 0.03 Z" fill="rgb(138, 138, 138)" height="12.00012834054449px" id="sS_8ZzF7U" width="14.99983941065802px"/></svg>)
Handoff-ready
Systemizing my designs to be as production-ready as possible in the short turnaround time
Distilling a loosely defined feature concept into something concrete, clean, and effective within narrow time constraints.
DELIVERABLES
The main concept looked like the following:
FIGURE 01
Fleshing out the new feature's flow, exploring different options.
THE PROCESS
01. Defining the vibe
Gathering the materials to get a better grasp of what the feature might look like.
FIGURE 02
Jamming with the founder to put together a moodboard for the UI. Key trends included minimal accent colors, simple modularity, and soft gradients.
At this point, I began brainstorming how to apply this newer, more modern look to Treffa while preserving original elements of its brand and existing UI.
02. Moving to Figma!
Translating the UX diagram into what it would look like for actual users.
FIGURE 03
The core screens as informed by the initial UX flow. Click to transform!
FIGURE 04
Components for the key card swiping functionality, including the tutorial used to onboard users upon update.
THE RESULT
Treffa's new search feature adds another layer of product customization and discovery to the platform's existing functionality.
Users can find what they're looking for from all corners of the Internet––and if that's not enough, Treffa's community of avid shoppers will help out, too.
FIGURE 05
Walkthrough of Treffa's new feature!
FEATURES
Search
The core shift from Treffa's previous flow is an additional AI-powered search feature that users can use to expand their potential finds as they look for their perfect product. Users can attach photos of what they're looking for and be as descriptive as they'd like.
PRODUCT DISCOVERY
An early idea that stuck was for users to be able to view their search results through a gamefied, Tinder-like swiping system. Users can swipe right to save something, and left to pass.
Request
In the case that the user hasn't found their perfect item, they can make product requests to be viewed by the entire community. Here, they set a "bounty" for the request, which is the amount that they are willing to award to a recommender who finds what they were looking for. Photos and descriptions are saved from the initial query to avoid repetitive work.
EXPLORE
All users can view a request's community recommendations through a snap-scroll feed, where people can view each product in more detail. The original poster can use this to award the best recommendation.
Recommend
All users can make their own recommendations for a specific request. Here, they attach the product link and images. If their recommendation is the requester's favorite, they will be awarded the bounty tied to the request.
TAKEAWAYS
What I learned after Treffa
Define scope early
When I first received the brief, I was overwhelmed with how much it seemed I had taken on within a short, two-week period. Taking the time to distill the deliverables into well-defined, incremental objectives made it a lot easier for me to 1. know where to start and 2. portion my time wisely.
The devil is in the details
Implementing an additional feature meant figuring out the logistics end-to-end: How will x interact with y? What's the clearest copy for this CTA? Making sure that existing and new users of Treffa could navigate and adopt the new feature as soon as possible after implementation required careful thought about how to blend the new feature into the existing functionality seamlessly. What helped a lot here was physically drawing out and diagramming all of the little details regarding layout, flow, and interaction.
