Client
Sires Crown Eyewear
Design
Sketch

Illustrator

Wireframing
Balsalmiq

Year
2017
Role
UX/UI Designer
Animation
After Effects

Project Brief

The stated goal of this app was to be an all encompassing digital optical shop experience. This was to include a video and text based chat client allowing fashion advisors (stylists) to talk to customers, frame customization (4 total parameters), social feed, and numerous kinds of product filtering and browsing.

The design is what I call ‘Swiss punk’. It makes prominent use of the Helvetica font family, including condensed and rounded, and includes many bold typographic choices.

1. Feed Style Homescreen

Provides a feel of spontaneity

Inspired by Nike’s app’s navigation, a ‘feed’ is used that includes static and dynamic menu items.

2. Image spillover encourages exploration

Innovative Browsing

By extending product images off screen, a larger sense of space is created. This also makes the images as large as possible while keeping a device in portrait orientation.

3. Reactive UI

Fun, elastic elements scattered throughout

Small animations are waiting to be uncovered, encouraging exploration.

4. Focused Product Pages

Reveal more detailed information

Sparse product pages maintain user focus.

5. Alternative Browsing

More engaging than applying filters

Users can shop by wood type, frame shape, or browse all.

6. Fashion Advise

Integrated Chat Facilitates Style Advice

Sires Eyewear said its rate of sales increases dramatically if they can talk to a person, therefore a chat function was requested. The UI of the chat connotes fun, irreverence, and geniality.

7. Customization Interface

Bold, Typography Based UI

An intuitive way to specify attributes.

8. 3D Visualization

Preview Your Custom Design in 3D

After customizing a frame, this feature allows users to preview their choice in glorious 3D.

9. Social Integration

Connects Customers to One Another

Due to the highly variable and handmade nature of the product, Sires wanted users to be able to see how other people were wearing their glasses, thus bringing a social elements into the app was necessary.

Wireframes