Design
Illustrator
Wireframing
Year
Role
Animation

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.
