Lab-Grown Diamonds

Roles

Duration: March 2021-April 2021

Tools: Adobe Photoshop, Adobe Illustrator, Miro, Figma, Marvel POP

Industry: Automobile

Roles: Graphic Designer, UX Designer, UX Researcher

Overview

Figure 1: The Five Whys of ABS DMV Service. Miro link: https://miro.com/app/board/o9J_lM5Q6Wk=/

ABS DMV Services is a local Department of Motor Vehicle, located in Brooklyn, NY. It provides its customers all of their vehicle registration and insurance needs at the same location, preventing working professionals from waiting on long lines to address their automobile registration renewals. Figure 1 demonstrates the five whys of the ABS DMV Services providing faster registration assistances than their competitors in Miro. Their services include transfer title or change in ownership, duplicate title, and address change.

Problem

Solution

Problem

Figure 2: The Official ABS DMV website. Website link: https://absdmvservices.com/

Reasons for the current ABS DMV Services website needing a redesign:

The About Us page does not provide many details about the organization
Lack contact information, only provides the company’s telephone number.
There are too much unnecessary images posted on the page.
Broken links. The clickable link redirects the user to the same website

Solution: For this project, I redesign the official ABS DMV website to allow customers to locate the company's contact information, renew their vehicle registration online, and create/log into their accounts on the site.

Result

ABS DMV Services Home page (1)_edited

Capture 2

Capture6

ABS DMV Services Home page (1)_edited

1/6

Slide 1: Redesign ABS DMV Services Website. Marvel Pop link: https://marvelapp.com/prototype/c313a0i/screen/78156768?sign_up_origin=player

The benefits of proposed redesign of Slide 1 are:

Detailed contact information includes, location, telephone number, email address, operation hours, and Google Map.
Service page that lists all the services provided by the company.
Appointments page to quickly setup appointments and record documents from their previous car services
About page to provide description of the enterprise.
Contact page for contact information
Login/Sign Up page to make or access your account

Result

Part 1: User Research Plan

Process

Part 1: User Research Plan

My user research plan is accessible at this link.

Part 2: Task Analysis

Figure 3: The task analysis of the ABS DMV Services website. Miro link: https://miro.com/app/board/o9J_lMD8SFw=/

The user goal is to renew to user's vehicle registration on the site. The task analysis listed eight steps to achieving the customer's objective:

Get your vehicle ensured.
Gather the required documents.
Sign up or sign in to the website.
Submit your required document online.
Pay registration fee.
Get your vehicle inspected and upload inspection documentation.
Get these documents from the DMV.
Save and sign out.

Afterwards the user have completed the renewal online, with physical documents in the user's possession.

Part 3: Competitive Analysis

Figure 4: The competitive analysis for the ABS DMV Services website. Miro link: https://miro.com/app/board/o9J_lMCIfqI=/

ABS DMV Services Website

Mostly non-responsive Landing page:
No Section Page.
No Contact Page.
No Service Page
No Sign in/ Login Page

Overall User Experience: Poor

NY Department of Motor Vehicles (DMV) Website

Landing page that links to popular services.
Section Page organized into vertical subdivisions.
Contact Page has a navigation bar and many calls to action that helps users use the site.
Service page has many actions and easy-to-use.
Simple Sign it/ Login page. Users use Google accounts to login.

Overall User Experience: Great

Arizona Motor Vehicle Division (MVD) Website

Responsive Landing page that displays links to the frequently used car services.
Section Page shows frequently used information displayed on the top of the page
Contact Page has several labeled phone numbers that address specific user needs.
Service Page only convinces users to go to their AZ MVD Now account and lists all the services provided by the account.
Sign in/ Login Page uses users' email addresses and passwords. It has a Google Map element.

Overall User Experience: Good

Part 4: Wireframing

Figure 5: The wireframing for the ABS DMV Services website. Figma link: ABS DMV Services - Wireframe

The wireframe of the proposed landing page is split into 5 sections:

Section 1: Navigation Bar:
- Contains the links to social media and the Services, About, Contact, and Sign In Pages.
Section 2: Commercial Section:
- Has the main and three supporting images from the original website.
Section 3: Contact Information Section
- Helps customers contact the establishment quicker.
Section 4: Services Section
- Lists all of the services provided by ABS DMV Services.
Section 5: Index Section
- Where users can navigate to the links at the navigation bar.

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

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:

Process

Part 2: Task Analysis

Part 3: Competitive Analysis

Part 4: Wireframing