Nanostone Water Website

UI/UX project for Nanostone’s website started with an outline drafted by the client. The initial research and interviews were waved but some research from the client was provided to assist in the overall UX design process.

Few documentation were created to uncover some key issues in UX within the pre-existing website layout. Initial idea was presented but the iteration process was halted due to external influence.


Compilation of different user characteristics that answers the questions, "Who are we designing for?"
UI Visual Design
Designing assets and overall branding for applications and websites, pixel to pixel.
UI/UX Mock-ups
Mock-ups are created mostly for application and website UX projects. Both or either of low-fi and hi-fi mock-ups may be provided.
Layout design for user interface that specifically focuses on space allocation and prioritization of content, functionalities, and behaviors of assets.


The deliverable for this project were three different layouts for the upper main section of the application pages. The client wanted to make sure the visitors can easily access the documentations and resource files. They also wanted alternative ways to engage with the visitors instead of a static banner.


I was hired as a visual designer for this project. However, additional skills in UI/UX process were used to complete the project. Though I was not required, following assets were created to help develop the ideas behind the re-design: persona, information structure/architecture, and wireframes.


I was not directly participating in the website development. The limitations were discussed prior to the execution of the project and the mock-ups were created within the outlines of those limitations. Limitations include: font, availability of asset behaviors and functions, colors, and images.


Sam Chaddsford

Age: 33 | Marital Status: Married | Location: Kansas, USA

I meet multiple candidates to fulfill the need of our facility and a fact driven information helps me to make a solid decision on which candidate to present to my supervisor.

Sam is a research and development specialist sent to a conference by his corporation to research a fitting candidate for designing a new facility for their dairy processing operation. He is assisted by one of his colleagues to get much information as he can for this project and perhaps few other projects.

He has traveled from his home town where his company is located to the conference location and will have to fly back. The stay is as long as the conference period. Sam can’t carry all the brochures and flyers. He will only take few artifacts and note memorable information on each candidate.

With the specific guideline and knowledge base he has on his project(s), Sam and his colleague will ask knowledgeable questions that applies to their market and are looking for a specialist who can respond in a reasonable time. They are mainly looking for datasheets and factual information that can help their decision back at the corporate office.

Key Attribute
  • Professional specialist with a sound knowledge base of the market
  • Has specific questions to ask
  • Need factual data/datasheet to back up the findings
Location Specific
  • Has limited time for gathering information
  • Can’t have massive materials to carry
  • Expects knowledgeable answers within a reasonable time
Post-contact (Website Only)
  • Able to find additional information of the services and products easily off the page specified for the market being researched


The information structure shown above are limited to the section of the application page and its relations to the resource page and other links.

The diagram was created to see how the information provided can work for visitors with different individual preferences.

The diagram provided other questions we needed to answer to create a better information structure.

Common objects presented were News/Updates, Links, and Inputs.


Initial mock-ups were created on paper. The three concepts presented below are based on the sketches I provided to the client.

The blue section represents the revised portion of the website. Some common objects outlined in the information structure were omitted.

Wireframe A
Wireframe B
Wireframe C

The pre-existing layout had no visible sectional division. A background color was added to the upper main section to differentiate the News/Update content from the main content. The document links were moved in the aforementioned section with a UI asset redesign.

From early on, there was a discussion of creating a video media to be placed on each application page. This wireframe shows a layout with a video media and the News/Update placed in the upper main section. The document links were kept in its pre-existing location without any alterations.

In case the video media project was not approved, I provided an alternative layout with a slider. A different category for the links were created for this layout. The categories presented in this wireframe would be under the application category and divided by document types.


Dairy Page Mock-Up
Mock-Up A
Electro Coating Page Mock-Up
Mock-Up B
Leachate/CTX/FGD Page Mock-Up
Mock-Up C

When the initial mock-ups were presented, some UI assets were created. The icons created were used to represent either the categories of different document types (Available on Mock-Up C) or the icon representing the type of document for the quick links. (Available on Mock-Up A and C). A quick link is a direct link to a downloadable online document rather than a page.

Stock images and video captures were used as placeholders.


The project had a great potential but it was abruptly stopped before the completion. The layout changes suggested were never implemented.

There has been some changes in management and I’m no longer under the contract with the client. It would have been my pleasure to see it through.

Related Projects