what is topdrwr?
If the shoe fits…
TOPDRWR is a high-end, online fashion store. They take clothes and accessories that celebrities have worn and auction them off to users who can bid online. I assisted with improving the usability of their website and designing screens for their mobile app.
ROLE
Product Designer
TOOLS
Figma
Adobe Photoshop
Microsoft Excel
DURATION
1 year (2022 - 2023)
LOCATION
Hghland Park, NJ
Delivering impact
But first, what was the result?
Easier Website
Fashion on the Go
The IOS screens I designed helped create an app for users to bid on clothing items wherever they are.
understanding the brand
Exploring the brand for a better understanding.
Because TOPDRWR specializes in street fashion and works to bring that to life, the brand maintains a sleek, minimal design style and evokes feelings of modernism with its bold typography, use of white space, and clean photography.
fixing the website
Making the website more cohesive.
I began by performing audits on the website to see what could be improved. The biggest pain points I found were in the Homepage and Shopping page. Most of the improvements consisted of making the website more tailored to a typical retail site so buyers could have an easier time navigating.
Homepage Improvements
Navigation Bar
By adding more page options, the navigation allows users to go exactly where they want on the site.
Showcasing the Brand
Making the homepage more dynamic would keep users engaged with the site and its wide range of products.
Items/Shopping Page Improvements
Filters
I added more compact filters that mimic a typical retail website, making it easier for users to search for and find brands or specific clothing items.
Readability
Making the text bigger and adding spacing allows users to properly read the item information.
mobile app
Making the app an extension of the website.
We began brainstorming about the mobile app for TOPDRWR. Our main focus was making it an extension of the website. We wanted to acccomplish two goals with the app: making it a place users can bid on items on the go, and be notified right away
1. The app becomes a place users can bid on items on the go
2. Users can be notified right away on the status of existing bids
low fidelity mockups
Keeping it lofi.
I helped to deliver low-fidelity screens for iPhone measurements and usability, working in Figma. Creating these rudimentary mockup screens allowed the team and developers to visualize the blueprint and layout of the app, as well as answer what buttons lead to which screens.
high fidelity screens
The full picture.
After creating the low fidelity screens, we moved to designing the actual interface of the app. While designing, I made sure to comply with IOS constraints and guidelines.
what we learned
Here are my key takeaways.
1. Because of our small team, I had to make sure my designs could translate easily to code and communicate with the developer to ensure seamless turnover of designs.
2. I learned a lot about the complexity of a design system and utilizing master components to create customizable assets for the website.
that's all folks!
Check out my other projects below.
brand design • poster design
Social MEdia design • Presentation design • Web design