Diamond Foundry is a Tech Start-up that specializes in lab-grown diamonds. The headquarters is located in San Francisco, with an additional office in downtown Los Angeles. The company sells diamonds to retailers around the world.
Challenge
Diamond Foundry struggles to keep track of the current inventory and sales. They are using excel sheets and emails for their transactions. They need the ability to display the full inventory via a digital interface with less friction as possible through the digital transactions.
We needed to establish a clear user interaction with clear information architecture. The experience should be seamline: clear and free of distractions to focus the business on ordering diamonds. The end users are broad. They range from a small local business such as artist-designer to a world-wide large retail store like James Allen.
The requirements were very vague as the star-up was still trying to figure out their optimal internal processes for the sales funnel. The weekly change of priorities, directions, requirements and the pressure to add new features in a more agile way added more complexity to this already complex project.
Roles
Major Stakeholders: Diamond Foundry CEO, VP of Technology, Sales representatives, Account Manager, VP of Marketing, Internal Developers and myself, the UX Designer.
I helped collecting and drafting requirements, such as a secure login flow, a full diamond inventory, ability to download PDFs, Invoices, brainstorm with a selection of key stakeholders, define the IA (Informational Architecture), define the user flow/customer journey to purchase via the portal, create prototypes and wireframes, and designed and QA’d the final UI.
Scope
TIMELINE
The first launch was scheduled in May 2019 with a B2B Portal with minimal features. Additional iterations to the project were added with new features/users needs from May to December 2019. There have been 4 major deployments of the B2B portal.
MAJOR ITERATIONS
- Launched in April with minimal features and basic functionality
- July – Add additional features to diamond inventory table (sort, filters, attributes)
- October – Update branding to reflect overall Diamond Foundry branding changes
- December – Updated backend
After the initial launch of the project there were constant weekly feature pushes, including:
- navigation updates,
- ability for a customer to download their accounts invoices to CSV format,
- ability to see new diamonds in inventory with specific badges,
- opt-in/out for various email notifications,
- save function on Filters
- creation of a library with in hand tools for businesses,
- resource center,
- digital services,
- save specific filters.
Objective
The overall goal was to engage and direct leads from the business audience to create conversion via the B2B Portal and change the users’ habits (stop using excel sheets).
Methods
UX: I created a user interface that allowed users to shop for diamonds easily via mobile, tablet or desktop. As this Portal was for wholesale business, Diamond Foundry customer accounts should be able to purchase one or countless items at a given time.
UI: I created UI elements respecting the current branding (colors, typefaces and overall feel). The final interface had to be consistent with the branding and current website to make the branding more recognizable, comprehensive and solid. The header, logo, images and other visual assets had to feature the same stylistic approach.
Softwares & Tools
Phase 1 – Research
With the Ecommerce Account Manager, we started to do a deep analysis of the request. This involved some benchmark on different tools already on the market (Netsuite SCA compatible).
The company leadership was not satisfied with the current offers provided on the market. They asked the team to build a proprietary B2B Portal – a Web Responsive Solution.
The key question was how to speak to different customer segments and scales of businesses.
A business to business audience is very different than a business to customer audience. Businesses are looking for more information while ordering products or creating a wholesale order. The B2B purchases have in general longer decision-making phases and are extremely price-conscious. Their purchases are reaching into higher price tags. In contrast to B2C users, B2B users have less need to market based on raw product desirability. The content must therefore support long purchase decisions. The purchases are not impulsive but instead are business-oriented with the goal to make additional revenue when selling the product on their retail market. Furthermore, a B2B purchase may involve multiple people under the same account.
The research involved the creation of personas based on the different customer database that the company already had: Admin, Retailers, Affiliates, Designers. The B2B portal should also contain specific prices and/or products per type of customers/accounts – API-based – and interact seamlessly with Netsuite.
Phase 2 – Informational Architecture
The first step was to determine the flow and architecture of the product. I worked with the Ecommerce Manager, the back-end developer and the VP of Technology to determine what would be the best informational structure and user flow based on the initial requirements.
We analyzed the overall available information and assets to assess the optimal IA approach. We brainstormed on the overall funnel. From there, I sketched ideas on the UX flow and users needs.
Phase 3 – Prototypes, Wireframes
I created a seamless and simple experience for all B2B users. I worked on multiple scenarios with concise and minimalistic solutions to fulfill the sales funnel and process. Along with the account manager, I worked directly with the key stakeholders to validate internally, the wireframes, high fidelity prototypes in Invision and various presentations. I would run the stakeholders through all the customer journey across the B2B Portal (See first Invision here).
I would adapt the wireframes and prototypes according to the feedback I received during this testing and discovery phase.
Per the feedback I received during this testing and discovery phase, I would adapt the wireframes and prototypes.
The overall first main layers of the project contained:
– The Login Flow: make sure it is highly secure login, a personal way to log as a customer, the ability for non existing accounts to be considered as a business partner. The user should also have the ability to reset her/his password.
– Quick Order: the ability for a user to make a quick order for a specific diamond shape, a specific carat weight and quantity.
– Checkout: create a checkout flow matching the internal invoicing flow and process.
An additional part of this project was to allow a business partner to access the full diamond inventory without being too overwhelming. With the help of filters, the user would be able to search for a specific shape (carat, color, cut, clarity, MSRP, price).
As most of the businesses buying diamonds, they are often looking for the same type of diamonds in inventory. He/she would also be able to save her/his filter research and then find it in the admin panel with the possibility to run the similar search again in a click.
Phase 4 – UI Design
The visual design of the B2B Portal needed to be very simple. It had to be clear, without visual distraction, and contain short pages. I created a consistent strategy and visual interface including copy and visual assets to fulfill all the stages of the sales funnel without friction.
I opted for the following main elements:
1. Sticky navigation/header:
- Navigation had to feel natural and personalized per users needs. Example: Businesses buying polished diamonds vs rough stones.
- A Sticky navigation at the top of the page sale links. The current selected page link includes a different style (underline and color) so that visitors can easily know what page they are on and navigate from one page to another (dashboard, quick order, inventory).
- A hamburger menu with additional content non related to a direct sale or order: Resource center, comparison table, Invite user, digital services, cart, etc.
2. Content:
- A clear hierarchy prioritizing the content to strengthen the visual performance of the core information.
- Make copy blocks digestible adding white space around the content. Rather than adding several paragraphs, I broke down the content on editorial pages related to the use of the B2B Portal. One page block could be broken into one paragraph and bullet points. This way, the content is easily scannable.
3. Call-to-actions:
- The CTAs needed to be bright and perfectly visible.
- The white space around needed to be balanced so that businesses could focus on the content first and clearly read the CTAs.
- The most important information were placed by the CTA (lab-grown diamonds need to mention legal information related to the diamonds).
4. Responsive Layout:
- The Portal should be used freely by users whether they are connecting from the office where they have a high-resolution large screen, from a laptop, or home via mobile phone. Users are able to use the mobile phone to easily check things when they are on the go or maybe when they are in a meeting or discussing pricings. The larger screen resolutions is displaying more content and details about each diamond.
- Use of scalable vector graphics (SVGs) on the site that change size based on screen size.
5. Branding:
- Typography: the use of the simple clear typography helped to keep the core-data available from pre-scroll.
- Colors to match the Diamond Foundry branding.
- The B2B Portal had two branding UI revamped due to the rebranding of Diamond foundry mid 2019. The colors and fonts have been adjusted on the Portal to match the new branding so there was consistency across the board.
Phase 5 – QA and Iterations
This project was managed on Jira with one outsource dev team in India. Throughout, the account manager and myself would create and QA the tickets in Jira. As the project started to be used and developed, it went through multitudes of iterations to correct bugs, UI adjustments, new features, as well as an expansion of the Portal (see Invision here).
Towards the end of the project, the portal was then moved internally as the outside developer team struggled with our internal API. The in-house back-end engineers worked on revamping the back end and improving the speed of the site. The new business form and registration flow was also altered at this time.
Conclusion
The sales reached 6 figures the first month of use in May 2019. It has been received with great enthusiasm by the sales team and the Business Partners.
As of December 2019, The B2B Portal was used by over 200 users (wholesales and businesses). As of January 2020, it is now used by the entire sales team members who also order for their accounts via the portal through an admin session.
The whole digital initiative generated over half a million in sales in 2019, with just over 6 months of operating.
