Lumi helps e-commerce companies produce custom packaging and handle supply chain logistics, with the goal of making custom manufacturing more sustainable and as scalable as the web.

Lumi provides services to users that are consumer brands in need of packaging, as well as packaging suppliers & manufacturers. To communicate to these multiple user demographics a marketing site was designed to provide tailored content to both buyers and suppliers.

Initial design focus was to standardize the app experience by establishing a modular UI component library for both the consumer brand-facing dashboard and the manufacturer-facing dashboard. For the buyer's app, users needed to be able to easily create & purchase any custom packaging needs.

Consumer brand users needed to be able to select and specify their packaging requirements and designs, so the app interface was designed to assist users in making informed decisions with high-density data about packaging products, flow into the cart & payment funnel, and view essential information about quantity & price.

To assist consumer brands in comparing across a marketplace of many manufacturers, an interface was created for displaying rich data regarding packaging specifications, quote comparisons and lead times.

From the manufacturer's perspective, they needed to be able to market themselves to prospective consumer brands. So an app UI to create unique manufacturer profiles with detailed information about their products & services and a scorecard rating was designed.

The manufacturer dashboard utilizes the same UI component library to standardize visual cohesiveness, but with a UX focus on the manufacturer's need to respond to consumer brand requests, providing quotes, feedback, and status updates.

A modular UI component library example for a responsive CardGrid component layout. By designing and utilizing a reusable modular component library & establishing a scalable design system, each app targeted for a specific user demographic maintained visual branding consistency and user experience.

UI/UX, Development

Product designer and developer of a modular UI component library to maintain cohesiveness across Lumi's various app user interfaces and visual design. Senior front-end engineer contributing to the migration of Lumi's web applications into a strongly-typed functional programming language, on top of a React framework.

View UI component library

Lumi

Smarty unifies task management & calendar scheduling into one clean application. Powered by AI with a natural language processing interface, users can enter text to create tasks, events, scheduling links and more.

Smarty is an AI-powered productivity tool, built on top of an NLP (natural language processing) and artificial intelligence engine. As Lead Product Designer synthesized user research into validated value propositions & created the initial design system for the app interface and strategized goals for the product roadmap.

Our target key personas were identified as executive assistants and agency professionals. From there we created user journey maps, persona profiles, as well as conducted rounds of user interviews & testing with interactive mockups to validate our value proposition. In our interviews we focused on how people organize & structure their schedule over the course of week, and what were their pain points & goals when planning out their objectives for their calendar.

After conducting rounds of user research and discovery, we summarized the product's strategy into a Jobs to Be Done statement: 'When I’m newly overwhelmed by an overflowing plate and the meetings/tasks keep coming, I want to easily track my workload (via smart visualization and automatic re-prioritization), so I can have mental clarity and confidence each day.' Additionally, market analysis was conducted to a create competitive feature matrix to analyze where there are market gaps & opportunities for users to have a better scheduling tool.

Based on our insights from user research & market analysis, and supported by an examination of existing systems & methodologies Smarty was built on top of a natural language processing interface, and the app UI was designed to let users build content through a purely textual interface. With the power of a `/` command to create Tasks, Notes, Events and Scheduling Links. To add contextual information when required users can simply type as they would in a physical notebook or planner, triggering natural language driven actions, such as `@tomorrow` or `@before end of week during working hours`, etc.

The UI was designed to help automate actions for users but still let them have discrete control with a clean minimal interface (inspired by the analog foundation of paper notebooks) but powered by NLP & AI to automate scheduling into free time blocks based on priority so users can focus on what's important. As well as support of third-party integrations so users can seamlessly integrate their existing workflows and content, without having to context switch between multiple applications.

Smarty handles task management and event scheduling for users with the AI powered auto-scheduling feature, allowing users to avoid conflicts and automate rescheduling of their most important tasks & events. Free times are auto-detected, and reminders go out automatically; with the app design streamlined to help users take the work out of managing their agenda, so they can focus on the activity at hand itself not scheduling it.

In addition to a rich text editor interface to organize & schedule, user can also visualize time blocking of their tasks & events with a robust calendar interface. Unified across the app by a global command menu, users can input tasks & events textually from both the list view interface as well as the calendar view; as well as leveraging the drag/drop interface of the calendar UI to re-order and reschedule their time blocks.

UI/UX, User research

Principle product designer, creating the foundational core interface for Smarty's responsive desktop & mobile app, and Chrome extension. Working closely with the CEO and engineering team, created the foundational UI component library and app interfaces, synthesized user research & testing into a research-backed design system, as well as provided design strategy for the product roadmap & operated as a product manager. Smarty AI is still in active development.

Smarty AI

The Arrivals is a NYC based fashion line focusing on classic, architecturally-inspired garments crafted to last a lifetime and exclusively available online.

As a high-end NYC fashion line, The Arrivals required bi-weekly interactive campaigns, supporting multiple product launches. Creating new campaign designs in regular sprint intervals required standardization of the Arrival's branded visual design system and prioritizing high impact & fast turn over of designs.

The interactive e-commerce store was designed & developed to display the rich array of products in multiple-styles, with a focus on the consumer user navigation experience by creating sorting filters based on best selling, price or inventory.

Product detail pages needed to display rich imagery detailing the product's aesthetic as well as information regarding fit, materials, and allowing users to receive contextual information before making a purchase commitment. As well as designed to provide suggestions of similar product styles to leverage user interest. 

As an e-commerce brand, The Arrivals needed mobile-first designs so users could view and purchase products across any device type, and a responsive website UX was designed & developed.

With an emphasis on its architectural roots, a structural & textured UI was created focusing on visually displaying compelling imagery and video content.

Principle product designer & front-end engineer responsible for the creation and implementation of interface designs for a responsive, cross-platform e-commerce web app. Translating marketing needs and promotions into a highly polished user experience, as well as designing and developing bi-weekly interactive campaigns, supported multiple product launches, and improved the site interface based on A/B studies.

The Arrivals

SUITED is a biannual fashion and art publication with a singular mission in mind: to celebrate those who have found what they are well-suited for.

As a print publication, translating the SUITED experience online focused on designing a UI that highlights rich imagery and featured content. As content needed to be regularly updated, a custom CMS driven template was created on top of the SquareSpace developer platform.

Because SUITED's initial experience was their printed content, the site was designed to highlight previous issues and leverage site visits into opportunities for users to order hard copies.

SUITED magazine's aesthetic is minimal, black & white and high-end. The site was designed to emphasize the physical experience into a fashion and art focused digital site.

Mobile accessibility was of importance so users could experience the site across a variety of devices. The site was designed and developed mobile-first.

With the mobile device UX in mind, the mobile app version of the site prioritized the rich imagery and content to be viewed as easily on phones as desktops.

Principle UI/UX designer and front-end engineer for the premier launch of the online edition SUITED magazine. Created a customized CMS driven template design built on top of the SquareSpace developer platform. Collaborated one-on-one with the Creative Director & Editor-in-Chief to translate the print publication brand into a digital experience.

SUITED Magazine

Data visualization of language patterns and lyrical analysis of top Billboard charting songs over the 20th century.

What do popular song lyrics say about cultural moods, concerns and political issues of different times? To answer this question and because no database of this information existed at the time, a Python web scraping script was developed to pull lyrics from the top Billboard charts since its inception in the early 1900's. Using a Java based IDE and natural language processing, frequencies of noun entities (such as "I" and "you"), as well as common verbs that express relationships between those entities (such as "love", or "hate") were visualized.

With this data visualization, topical patterns over time became evident as song lyrics from different decades reveal societal patterns and trending topics.

Frequency of keywords were used to weight their size (more frequent use of a noun phrase resulted in a larger font size), and bézier curves to visualization semantic linkages between different keyword entities.

Visual design, Development

Creative director & developer of a data visualization examining language patterns in musical lyrics over time, revealing cultural trends and moods of different time periods as expressed in top-charting songs. Presented as large format digital images and print posters.

Data Visualization

Onomie is a direct-to-consumer cosmetics brand that is a cross between skincare and makeup. Created to simplify beauty by combining clinically-validated skincare formulas with advanced makeup technology.

Onomie is an e-commerce brand using scientific backing for its skincare and makeup products. To emphasize the power of Onomie's skincare products on the site, interactive before & after UI sliders and visual illustrations were used to demonstrate the quality of product ingredients and effect on skin improvement.

As an e-commerce site, the experience was designed mobile-first, so users could experience and purchase Onomie products on a variety of devices.

Lead product designer & front-end engineer for Onomie to help it stand out from a competitive market by featuring interactive trials and science backed beauty products.

Onomie

Tom Tom Magazine is a quarterly print magazine and website based out of New York City. It is the only magazine in the world that is dedicated to female drummers.

As a print publication Tom Tom Magazine needed a digital site that reflected their focus on music related content.

Additionally an e-commerce site was needed for users to purchase branded products, and was built by creating a custom Shopify template with CMS integration. Allowing team members to easily track inventory and sales related data.

Responsive mobile-first designs were implemented to create a seamless experience on across a variety of devices for users.

As well as the mobile designs for the e-commerce site experience.

Lead product designer & developer for Tom Tom's e-commerce platform to leverage site visits into opportunities to sell the publication or goods related to the brand. Using the Shopify CMS a custom responsive template theme was designed and developed for the Tom Tom store.

Tom Tom Magazine

A proposal for a new Willard Park Community Center (located in Berkeley, CA) inspired by the action word “emergence” and the concept of subtractive openness “to carve”— designed with the intention of creating a building that is an extension of the ground, and is carved open to external air and light.

The Willard Park proposal is an architectural exploration of how an existing public space could be utilized to better serve the community while respecting the natual landscape.

Designed to communicate a multi-dimensional exploration of how layered designs would operate cohesively. The foundational earthen mound informs the basis of the design. The building’s structure is extended from the topography and the interior courtyard carved out. The main body of the structure is surrounded by the mounded earth. The building is created by a balance between curvature and angular cuts.

Detailed layouts were created to show how users would utilize the space; providing public restrooms, office spaces for staff and community spaces for events and classes.

A top-level view of a green roof design integrated into the natural landscape that also provides additional usable space for community members to explore and use for recreational purposes.

The green roof design integrates into the natural landscape of the park and creates a seamless extension, the open-air corridor and rooms are made of planked concrete as an affordable and durable option that represents organic materials; with steel guard railings built along the walkable green roof around the courtyard for safety. And large glass windows allow external views into the interior, and provide light to all the rooms.

The courtyard plays with natural materiality: stone, wood, earthen supports for a vertical garden, as well as contain interior trees and small garden areas. The vertical gardens in the courtyard reinforce the connection of the structure as emergent from the earth.

Visual design, Architecture

Visual and architectural designer of a 3D spatial proposal in Rhino, as well as isometric and blueprint designs to communicate the vision for a reimagined community center in Willard Park. Using Photoshop, visuals were created to demonstrate how community members would experience the space.

Lumi helps e-commerce companies produce custom packaging and handle supply chain logistics, with the goal of making custom manufacturing more sustainable and as scalable as the web.

Lumi provides services to users that are consumer brands in need of packaging, as well as packaging suppliers & manufacturers. To communicate to these multiple user demographics a marketing site was designed to provide tailored content to both buyers and suppliers.

Initial design focus was to standardize the app experience by establishing a modular UI component library for both the consumer brand-facing dashboard and the manufacturer-facing dashboard. For the buyer's app, users needed to be able to easily create & purchase any custom packaging needs.

To assist consumer brands in comparing across a marketplace of many manufacturers, an interface was created for displaying rich data regarding packaging specifications, quote comparisons and lead times.

From the manufacturer's perspective, they needed to be able to market themselves to prospective consumer brands. So an app UI to create unique manufacturer profiles with detailed information about their products & services and a scorecard rating was designed.

The manufacturer dashboard utilizes the same UI component library to standardize visual cohesiveness, but with a UX focus on the manufacturer's need to respond to consumer brand requests, providing quotes, feedback, and status updates.

A modular UI component library example for a responsive CardGrid component layout. By designing and utilizing a reusable modular component library & establishing a scalable design system, each app targeted for a specific user demographic maintained visual branding consistency and user experience.

Visit the site

View UI component library

Product Design

Modular UI Component Library & Design System

Front-end Development

Work

Skills

About

Contact