ui/ux branding

A lens rental website.


Lenswap is a webstore that allows users to rent lenses based on their preferred camera mounts.


People whom are new to photography have little knowledge about lens mounts and lens performance.


Design a new online lens rental experience which focuses on sorting lenses based on their mount types and showcasing their performance using sample photos.


Lenswap's branding is inspired by four different aspects in photography, "light", "aperture", "picture grid", and "focal point". These are also popular terms mentioned when people are talking about how to take good photos.

Logo anatomy

Lenswap's logo is composed of a circle sliced in the middle with an offset and tilted at 45(135) degrees. Each half of the circle represents a different lens. Together they are saying: "swap your lens". That is also where the name comes from.

Color and fonts

The Lenswap brand is consist of two colors, bright yellow and dark purple. Together they create strong contrast and interesting looks. For title font I chose Rhode, and paired it with Roboto as body text.


Two examples of ad campaign images I created for the brand using the brand patterns and flat illustrations.


Illustrations were made in flat and abstract style. They are used on Lenswap's prints and webpages.


Shipment box and reminder card/letter design.


Persona of three different types of shoppers.


Overview of information architecture.

User journey

Three different user journeys based on persona.


Wireframe of the webpages.

Visual design


For new users, they can browse through the most popular lens mount types to get started. After they choose their mount types, they will be able to browse lenses that fit their cameras.

First section of the homepage is recommendation based on the most popular scenarios. Users can choose their lens based on the result, in this case, a particular picture style the lens will provide.

Scrolling down the home page, users can find popular lenses and more sample photos by different lenses. There is also a section explaining how Lenswap works.

Users can browse more lenses by clicking "browse lenses". They can access all the brands and lens mounts in this page, however, in this case the user has already chose "Canon EF mount", so that the default filter is set to display Canon EF mount lenses only.

  • Visual Design Strategy
  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Aftereffects
  • Adobe XD