Skip links

PG Website

Engineering Measurements Using Photos from SmartPhones.


Date:
01/31/2019

Overview

PhotoGAUGE was founded on the insight that a software application based on cloud computing, smartphone, and commodity camera hardware would soon be able to replace bulky and costly metrology hardware. PhotoGAUGE’s core technology sits at the intersection of Photogrammetry, Computer Vision, and Machine Learning.

My Role

UI Designer

Platform

Web

Task

Design a website for PhotoGAUGE Inc. to help them showcase their product and services for their customers.

Process

My task was to design UI for a simple static website which meant I didn’t have to dabble in UX. Therefore, I used the following process depending on the time and resources available at that time:

01 Research

02 Ideate

03 Design

Research

I had been working on PhotoGAUGE’s product before, therefore, I had ample information about their target audience and their services. The website had to be a one pager meaning all the content would be on the single home page, divided in sections.

Ideate

Sketches

I sketched out a rough concept of what the website in order to explore design concept of what the website would look like. The website Home had to have the following sections:

  • A Hero with a slider.
  • How it works
  • About Us
  • Works
  • Services
  • Team
  • Testimonials
  • Primary Footer
  • Secondary Footer

Wireframes

I designed the wireframes in medium fidelity so that it would be easier for the stakeholders to understand the design decisions, and also it would be easier to turn those designs into high fidelity once finalized.

Design

High Fidelity Mockups

The color theme of the website had to be the same as the PhotoGAUGE mobile application that is white background with primary elements in blue, secondary in orange, and dark grey color for text. The high fidelity design phase was a bit iterative as compared to sketching and wireframing phases. A few minor changes were made in the design draft and was presented to the stakeholders. The Stakeholders requested a few major changes in the final design in which some new elements were added, some were removed, and the sequence of those elements was also changed.

Visit Website

Design Draft

Final Design