Lab-Grown Diamonds Website

Duration: December 2020, 1 Week

Tools: Photoshop, Illustrator, Visual Studio Code, React.js; Codepen

Programming Language: HTML5, CSS3

Industry: Industrial, Luxury Goods & Jewelry

Roles: Graphic Designer, UX Designer, UX Researcher, Web Developer

Overview

Lab-grown diamonds are diamonds created in a laboratory using the three methods: high-pressure and high-temperature (HPHT) method, chemical vapor deposition (CVD) method, and ultrasound cavitation method. They are necessary for multiple industries, including Industrial and Luxury Goods Industries [1].

The usages of lab-grown diamonds include [1]:

Gemstones
Oil and gas drills as polycrystalline diamonds.
Materials for Window and defense and laser.
Protecting electronic and electrical devices by preventing circuitry from overheating.
Being heat sinks for telecommunications and microelectronic devices.
Production of laser optics.
Production of industrial and household water treatment products.
Materials for surgical scalpel and radiation detectors in the health industry.
Materials for diamond-based quantum computer technology.
Materials for loudspeakers as polycrystalline CVDs

Problem

Natural diamond mines cause negative social, environmental influences in the South Africa, Russia, Botswana, India, Siberia, Brazil, China, Canada, and the United States. The mining of diamonds is responsible for unsafe working conditions, child labor, and environment damages. The largest political impact of mined diamonds are blood diamonds. Blood diamonds are diamonds mined in war territories to financially support civil wars [2,3].

Despite the disadvantages of the mined jewels, the five most popular myths of lab-grown diamonds discourage people from investing in them.

The five popular incorrect myths are [4]:

Lab-grown diamonds are not real diamonds.
Lab-grown diamonds are synthetic.
Lab-grown diamonds are structurally weaker than mined diamonds.
Lab-grown diamonds do not have resale-value.
The production of lab-grown diamonds is not eco-friendly.

Solution

For this project, I designed and tested a one-page website to persuade the audience to purchase lab-grown diamonds over the Earth-formed diamonds due to their mines’ detrimental impacts on the mining areas’ society and environment.

Result

Figure 1: The Finalized Lab-Grown Diamonds website
CodePen link: https://codepen.io/GenevaRoyer/project/full/ZMEdGn.

As shown Figure 1, I coded and tested the website in HTML and CSS via Visual Studio Code. After accessing the website, the viewers will have the answers to the five major questions about lab-grown diamonds. The five major inquiries are origin, price, manufacturers, marketing questions, and resale value of lab-grown diamonds before purchasing them.

Process

Part 1: Creating First Low-Fidelity Wireframe

GenevaRoyer lab grown diamonds wirefame i.PNG

Figure 2: Wireframe I of Lab-Grown Diamonds

My first wireframe for Lab-Grown Diamonds is shown in Figure 2. The red lines represent the dividers between elements, while the black line refers the spacing between each paragraph.

Pros and Cons of the Wireframe I:

Pros:

The website is short and informative.

Cons:

Design looks crowded.
Unnecessary extra space.
The website only addressed three of the five must know questions that buyers should know.
Incorrectly addressed lab-grown diamonds as synthetic diamonds.

Part 2: Correcting Wireframe II

As demonstrated in Wireframe I, I almost entitled my website the prohibited term of “Synthetic Diamonds” because I did not research about the Federal Trade Commission’s ruling of 2018 prior to designing the wireframe. Additionally, I could have missed important information relating to lab-grown diamonds to shorten the data presented in the website. After reading about the top misinformation about lab-grown diamonds, I redesigned my previous blueprint and added the necessary data in Wireframe II. This resulted in a more educational and user-friendly wireframe.

Figure 3: Wireframe II of Lab-Grown Diamonds

Pros and cons of Wireframe II are:

Pros:

More organized
Has more consumer focus information.
More visually pleasing

Cons:

Longer webpage

Part 3: Prototyping

Design Scheme:

I chose the black as the background color for the website because I wanted the audience to focus on the information provided on the website and primary image. The primary image is a black and white closeup image of a diamond shattering from the left and right, giving the material an angelic effect. The diamond emits a spectrum of color, inspiring me to use a transparent rainbow line as the divider for each section. The font colors are white and light gray respectively in contrast to the black background.

Testing:

I tested the product by coding the website in React.js and running the site in CodePen. The programming languages I used were HTML5 and CSS3. The screenshot of the finished website is shown in Figure 4.

Figure 4: Finished website; CodePen link:https://codepen.io/GenevaRoyer/project/full/ZMEdGn

References: