Visual & UI Design

Once I define a design solution, I move onto visual and UI design. If style guides exist I will innovate while maintaing those standards. If no standards exist, I create them, paying special attention to design choices that best suit user needs and business needs. 

Preferences and principles:

  • Minimal and clean aesthetic
  • Usability
  • Design for CSS
  • Usability over "visual flare" 
  • Let the content shine through
  • Strong and simple typography 
  • Flat is better, but not if usability is degraded 

The following screens are designs from the first two versions of Uptual. Some designs represent different iterations of the same screen. 

All these designs went into production. 

Blank slate screen for Uptual 1.0

Blank slate screen for Uptual 1.0

 

Uptual 2.0 Designs

Uptual 2.0 is an online tool for finding a professional using social recommendations from friends and the Uptual community.

 

Uptual Dashboard featuring a thumbnail feed. 

A different version of the dashboard. A user could ask for a recommendation by typing in the "Ask for a Recommendation" field.

A different version of the dashboard. A user could ask for a recommendation by typing in the "Ask for a Recommendation" field.

Public landing page. I decided to release this design with no images so we could test copy and layout. 

Public landing page. I decided to release this design with no images so we could test copy and layout. 

This page shows a user request for recommendations and a recommendation a user gave.

This page shows a user request for recommendations and a recommendation a user gave.

This is an early user profile design. 

This is an early user profile design. 

This is a step from the flow a user goes through to ask other people for their recommendations. 

This is a step from the flow a user goes through to ask other people for their recommendations. 

This is a new and improved dashboard design. It replaces the thumbnail feed with a traditional single column. It has a clearer call to action at the head of the feed. 

This is a new and improved dashboard design. It replaces the thumbnail feed with a traditional single column. It has a clearer call to action at the head of the feed. 

Public landing page. I added images and icons here because we had a clearer idea of how to position Uptual at this point. 

Public landing page. I added images and icons here because we had a clearer idea of how to position Uptual at this point. 

After a user posts a request, they can share it.

After a user posts a request, they can share it.

This is a request module. A user can click give recommendation.

This is a request module. A user can click give recommendation.

 

Uptual 1.0 Designs

These are designs from the first version of Uptual. Contractors could find jobs, submit quotes to customers, and get hired all online.

Dashboard from Uptual 1.0, where a contractor could submit a quote to a potential customer.

Dashboard from Uptual 1.0, where a contractor could submit a quote to a potential customer.

Conversion focused landing page for Uptual 1.0

Conversion focused landing page for Uptual 1.0

Step 1 of the "create a quote" flow.

Step 1 of the "create a quote" flow.

This is the "activation screen" after a user signs up.

This is the "activation screen" after a user signs up.

Customer request for a quote module.

Customer request for a quote module.

Dashboard from Uptual 1.0 where contractors could view available jobs and submit quotes.

Dashboard from Uptual 1.0 where contractors could view available jobs and submit quotes.

Blank slate screen for Uptual 1.0 after a successful account activation.

Blank slate screen for Uptual 1.0 after a successful account activation.

Conversion focused landing page.

Conversion focused landing page.