THE WHITE COMPANY


CLIENT



PORTFOLIO

Biagio Goetzke


ROLE

Brand Strategy, Product Design, UX/UI, Visual Design


PROTOTYPE

See the prototype


TECHNOLOGY USED

Adobe CC, Sketch, InVision, Zeplin


PLATFORMS

Responsive web for desktop, tablet, and mobile







ABOUT


DETAILS

The White Company, a cryptocurrency start-up, was launched in 2017 to offer an entire ecosystem of crypto products, including a stable coin, the first crypto debit card, a luxury marketplace, and more.


CHALLENGE

Lead brand experience to demonstrate blockchain technology integrated with consumer products and solutions and to illustrate meaningful relationships between them.


SOLUTION

Build brand strategy through conceptual and creative execution in digital campaign and website architecture. Create an integrated web platform that seamlessly presents and serves up six independent business products: stable coins, crypto exchange, merchant processing, debit card, luxury purchases, and crypto investments.


RESULTS

Directed completion of the company's responsive site for successful and immediate launch inside of three months.








COMPETIVE RESEARCH




DETAILS

I wanted to understand how both direct and indirect competitive brands within the same space presented similar content on their websites. I searched for inspirational material and engaging user experiences in unique layouts, creative use of imagery, and interaction design elements and assets that could be applied to the White Company website.




REFERENCES








LANDING PAGE A-B TESTING




DETAILS

We needed to have a landing page up immediately. I quickly built two different versions for testing. First, I started with a classic look. I wanted to instill a sense of legacy and stability found with brands like Tiffany’s and Goldman Sachs. Second I designed a modern version. This design focused on a more techie look found on sites like Coinbase and Stellar. We then presented both options to our friends and family focus group to inform our design direction. The modern version was a clear winner.




OPTION A: CLASSIC




OPTION B: MODERN








PERSONAS




DETAILS

Because The White Company offers six products, it was important to understand what the customer of each of those products might look like. I am a student of User-Centered Design, and understanding the humans that will be using the interface I am designing is critical.




PERSONA











WIREFRAMES




DETAILS

I developed the framework for the layout and structure of the pages in the form of high-fidelity wireframes. These pages were designed with responsive compatibility in mind. Additionally, close attention was given to the assets' arrangement, so they are presented in a clear aesthetic format consistent with the website's proposed look and feel.




WIREFRAME











NAVIGATION




DETAILS

The White Company website posed a challenge with the requirement of showing six separate products in addition to presenting the corporate information. There simply was not enough room to place them all in the top navigation bar. After exploring multiple options, I decided to create a dropdown menu (shown below) that lists each product with a short description. The menu was placed in the center of the top navigation bar to be obvious. Also, each product is presented on the homepage, so there are multiple access points. We conducted some light user testing, and this solution worked best.




Product Drop-down











Project Management / Schedule




DETAILS

From the beginning of the project, I met with the development team to make sure they had input into the design to make a seamless handoff when Visual Design was completed. The backend was considered in my Interaction Design process to avoid pitfalls and take advantage of options and opportunities. Once I delivered design assets and functional specs to the dev team, I acted as a Producer/Project Manager to ensure the code matched design specifications.

 

The project followed a hybrid agile-waterfall process, as can be seen below in the Gantt chart. Once we were in development, I conducted daily standups with the dev team to keep the project on track.




Gantt Chart











INFORMATION ARCHITECTURE




DETAILS

I developed a flat taxonomy site map that outlines the simplicity of the site structure I created.




Site Map











BRANDING / LOGO




DETAILS

The client created a logo contest using an online platform. I provided creative feedback to the finalists and worked with the winner to get the logo pixel perfect.




LOGO EXPLORATION











Typography





HTF49, HTF69





BOOK







COLORS










VISUAL DESIGN




DETAILS

Bouncing off the high-fi wireframes, it was straightforward to add the finishing Visual Design touches. I polished typography, iconography, copy, imagery, and color to get the design pixel perfect. The below screen is the Home Page in its entirety.




Landing page











VISUAL DESIGN / White Standard




DETAILS

This is the Home Page for the White Standard coin. The above-the-fold section of the page includes a short description of the product, a large CTA to get the coin, a row of press for 'social proof,' and finally, proof of funds. The proof of funds section shows the bank's actual amount of money along with third-party reporting to show legitimacy.




Landing page









VISUAL DESIGN / White WALLET




DETAILS

This is the Home Page for the White Wallet platform. White Wallet is where customers manage their cryptocurrency holdings. The above-the-fold section of the page includes a short description of the product, a large CTA to sign up, a row of press for 'social proof,' and finally, more details of the product and its benefits.




Landing page









VISUAL DESIGN / White PAY




DETAILS

This is the Home Page for the White Pay service. White Pay is a merchant processing service for cryptocurrency. The above the fold section of the page includes a short description of the product, a large CTA to sign up, a row of press for 'social proof,' and finally, more details of the product and its benefits.




Landing page









VISUAL DESIGN / White MARKET




DETAILS

This is the Home Page for the White Market online store. Here you can purchase luxury items using cryptocurrency. The White Market was the first to sell artwork for cryptocurrency, generating a lot of press.




Landing page









VISUAL DESIGN / White CAPITAL




DETAILS

This is the Home Page for the White Capital service. White Capital will allow investors and cryptocurrency asset holders to invest easily and efficiently in several tokenized funds. These funds, known as Investment Tokens, will represent multiple asset classes managed by top asset managers. They will be available in the White Wallet under an “Invest” section. The above the fold section of the page includes a short description of the product, a large CTA to join a waiting list, a row of press for 'social proof,' and finally more details of the product and its benefits.




Landing page









VISUAL DESIGN / PRESS




DETAILS

The White Company generates a lot of press, and it was critical to have a smart Press Page. I created cards for each story that included the source logo, date, teaser blurb, read more CTA, and social sharing links.




Landing page









VISUAL DESIGN / THIRD PARTY REPORTS




DETAILS

It was critical, in my opinion, that customers knew their money is safe. Third-party reports were important in adding an additional layer of credibility.




Landing page









VISUAL DESIGN / FAQ




DETAILS

Help sections and FAQa are perhaps one of the least fun parts of Interaction Design. Regardless, I insisted customers have access to really well throughout answers to just about any question that might come up. If the FAQ didn't have the answer, there are plenty of options to reach a person in the Contact section.




Landing page









THANK YOU




CONTACT ME

If you'd like to discuss a job opportunity or have any questions please email me or call (323) 206 0875.



Next Project

GO TO NEXT PROJECT