CreativeHub specializes in product engineering and product marketing to empower businesses. As a digital product design  company in San Francisco, we offer custom eCommerce website development services, UI/UX design, software development and more. If you're in the process of creating an eCommerce website for your startup or enterprise, we can help you with the best web development services. 

Let's get in touch.

Our Process of Online Jewelry Shopping Website Development for CJM

Ceylon jewelry Manufacturers (CJM) is a luxury jewelry manufacturing organisation and exporters of Gold and Platinum jewels. They are recognized for their high-quality craftsmanship, fantastic service and marketing products at a cost based rate. As a brand associated with exquisite jewelry, CJM reached out to us to develop a custom ecommerce website for their jewelry business to raise sales. 

In this blog, find out how we implemented technology to solve their key concerns and develop a strategic e-commerce solution.

01. Problem Definition

02. Ideation

03. Design and Prototypying

04. Development 

05. Scalable Deployment

06. Evaluation

07. Quality Assurance

Let's dive in!

01. Problem Definition

As the initial step, we conducted interviews with our clients and collected data on the business goals, customer database, and the final product requirements. We further researched on the target audience to create user personas, empathy mapping and market research to understand the eCommerce solutions for jewelry businesses. 
 

With all the data and information, we identified 03 key challenges. 

01. The platform has to attract visitors to become customers. 

02. The customers are more likely to make jewelry purchases in-store rather than purchase online.

03. The brand has to be credible, transparent so that users could trust the platform to make payments.

02. Ideation

Ideation is what we consider as a critical phase and one of the favourites of our developers. During our ideation stage, we brainstorm our strategy, tech stack, ideal methodologies and more to solve our key challenges. It's a lot of thinking out of the box and questioning everything. 

Here we questioned,“How we can use technology to solve these issues?". Storyboarding, 6 thinking hats, Anti-problem, P.O.C (Product of Development) are a few tactics we applied to derive to the effective eCommerce solutions to tackle our product problems. 
 

Here are the solutions we brainstormed : 

01. A user-centered UI/UX design showcasing modern luxury elements

According to the information we gathered from our research and clients, we discovered that most of the sales flow from social media such as Facebook and Instagram. Considering that our visitors belong to the young audience who prefer to be captivated by visuals, we decided to create a minimalist, modern UI incorporated with High-Resolution product images. As for the UX, we decided to create a frictionless navigation and facilitate ease of discovering products. 

02. Introducing an order inquiry option for the visitors to place their orders and complete transactions in-store.

Having recognized that majority of visitors would prefer to buy in-store to be confident about the brand credibility and product value, we decided to integrate this approach to the eCommerce website. How? With an order placement system which would email an invoice to the user and CJM to refer for in-store purchases.  

03. Incorporating business information to raise brand recognition and a secure payment portal to make direct online transactions.

Since this was an eCommerce platform, we also took into account that we had to trigger visitors to make online purchases. Therefore, we had to build brand recognition with the essential business information such as the brand history, craftsmanship, awards, sustainability and more. And the payment portal would allow users to complete secure transactions successfully. 

Learn more about our services. 

03. Design and Prototypying

We designed a UI/UX that was user-friendly and at the same time that any visitors would feel comfortable and be enticed to browse the products. 

The main features of the UI/UX design are :

• A simple, minimal modern User Interface with consistent elements.

• A seamless navigation for quick user access.

• Clear, simple typography and copy to highlight the brand authority.

• White, pale, gray backdrop color palettes that showcase the luxury, elegant appeal.

• Products sorted into categories, collections, Best Sellers, filters for a convenient browsing.

• High Resolution WEBP product images that are captivating and displays the exquisite product value.

Read more in the Case Study

04. Development 

Frontend, backend developments and database integrations

HTML, CSS, Bootstrap, and Javascript were used as the front-end languages. We implemented reusable components to make the filtering and sorting of products more easier to integrate. 

AJAX (Asynchronous JavaScript And XML) calls made during form submissions to the server enabled for a quick round trip to and from the server to retrieve data without sending the entire page back to the server. AJAX's "asynchronous" nature, which enables it to communicate with the server, exchange data, and update the website without requiring a page refresh, is its most alluring feature.

We utilized PHP as the back-end language as it was extremely useful when encrypting sensitive data. This maintains security while addressing flaws. PHP also has optimized speed performance since it uses its own memory and competes well on speed. Mysql was utilized to develop a secure, reliable database management system. Mysql enabled us to develop a high perfoming, customizable database according to our product requirements. 

Order Placement Process

Our strategy was to create a smooth order placement process to increase conversions. Understanding that the CJM products were high-end, we determined that we needed to consider two order placement approaches.

• Place order inquiry with 'Buy now' and make payments in-store.  

• Make instant payments through the 'Payment Portal’. 

01. Place an order inquiry

Under each product, when the user clicks 'Buy Now' they can enter their contact details and both CJM and the user will recieve an email with invoice info. Next, users can take the invoice to CJM stores and proceed with their product purchases there. This facilitated the users to build their trust on our clients. In essence, this is an innovative solution to upsurge conversions and returning customers. 
 

02. Payment Portal 

The payment portal is where the visitors can finalize an online transaction with the invoice details. The payment integration takes place with the merchant APIS and through Javascript. With a payment gateway API, we connected the checkout system to a payment network. This also allowed CJM to incorporate one or more payment methods with minimal integration.

The Request process : 

01. Send API Request - When the user confirms 'Pay',  the application submits a JavaScript request with the required data to the MasterCard Payment Gateway to display the Hosted Payment Page   (all non-sensitive parameters to the embedded SDK). 

02. Process the Request - .The MasterCard Payment Gateway collects and verifies the payment details and processes the payment. The Payments Integrated API communicates with the merchant the user card details and encrypts them. Then it's sent with authorization to the Payments Integrated Platform.

03. Capture Results - Once the transaction is complete,  the Payments Integrated SDK provides the non-sensitive payment results along with an encrypted token. If the payment is successful, the payer can obtain the payment details via the website. If the payment is unsuccessful, Hosted Checkout displays the result, allowing the payer to retry the transaction with different payment details.

04. Receive Invoice - The customer will receive an invoice emailed and also view the invoice through the website after the payment.

Read the case study on order placement solutions

SEO

E commerce websites can rank higher in search engine results by using SEO. To boost the website site visibility on Search Engine Results Pages and generate traffic, we added optimized content such as alt images, optimized product descriptions with commercial intent keywords. Moreover, the site was developed to be mobile- friendly, render positive user experiences, internal linking, with structured sitemaps for a higher rate of crawlability. 

05. Scalable Deployment

During our deployment phase, by using the MVC (Model-view-controller) architecture, development is scaled. All of the user's data-related logic is represented by the Model component. The application's entire UI functionality is implemented in the View component. In order to handle the business logic and incoming requests, manipulate data using the Model component, and interact with Views to generate the output, controllers serve as an interface between the Model and View components. 

As a result, we could get the following benefits:

• Multiple developers can work on the model, controller, and views at once during development.
   
• MVC makes it possible to logically put together relevant actions on a controller. Additionally, the views for a particular model are also collected.

• The MVC framework's design results in low coupling between models, views, and controllers.
   
• Due to the division of labour, future development or modification is simpler, increasing the product's scalability.

06. Evaluation

During the evaluation stage, we ensure that the client requested requirements are met. We prioritized the evaluation of the product placement and whether it satisfied the client's needs. Moreover, we further evaluated the functionality and any errors for certain functions such as product filters, product presentation, order placement, custom order inquiry, payment gateway integrations, contact us module and more.  

07. Quality Assurance

In the quality assurance phase, we incorporated testing methods to identify any errors in usability or with security. Hence, Unit testing, integrated testing, security testing were conducted. Test cases were written and tested for categories, product detail pages, product listing pages, filtering options, search algorithms and relevant search results, and payment. 

Conclusion

With a well-performing, profitable eCommerce website, we were able to effectively approach the challenges with our innovative tech integrated solutions. As a result of the order placement solution, the clients experienced a surge in customers and a rise in sales. Further, we continue to maintain the website and update frequently to ensure that the website is secure and functions flawless. 

Let's build your product

Visit the CJM Website

Recommended Next : 

Read the Case study

How our Shopify Developers revived an e-Commerce website.