Curated Categories
PRODUCT DESIGN & FRONT-END
CLIENT
Purse.io
TOOLS
Adobe Illustrator, Visual Studio, GitLab, CodePen
AUDIENCE
Crypto Users, Purse Users
01. THE DATA
Combining analytics I had pulled from Google with data our analyst provided, we learned that the ovewhelming majority of users were searching for and purchasing electronic items.
There were three major priorities. First, we wanted a better way to collect data on niche market interest outside of electronics. Second, we wanted something that could be re-used in the future for affiliate landing pages. Third, it must be managed by the internal admin panel so anyone can add & edit categories.
I would be full-stack on this project, from idea to design to code.
02. DESIGN
There were strong design constraints beyond the brand guidelines on this project. I was limited to the structure of the Purse website, and the way hero part of the site was built & functioned. The solution we settled on was to use large images for the background of each category, along with a UI pill-bar that would display details about the current category.
Finding the right balance between the UI and the large background was a challenge both from the perspective of whitespace and contrast. Overall, I spent the most time on designing the animated menu buttons for the main page. They should feel playful and shiny.
SKILLS
UX, UI, Visual Design
03. CODE IMPLEMENTATION
At Purse, the front-end is built with backbone.js. I had worked on the front-end for months, but this was a deeper dive into backbone. I really wanted to push myself and deliver the project as a simple pull-request, especially since outside of questions, there were no engineers on the project.
Another area I found especially captivating was building the animated buttons in CSS. My designs had called for a transparent ring combined with a gradient, something that would require some research to see if possible. I crammed a bunch of nights, and am really happy to have ended up with a unique result that was not easy to achieve.
SKILLS
Front-end, JS, Git