PROJECT OVERVIEW
Cosmos is a decentralized network of blockchains, powered by a byzantine fault tolerance (BFT), Proof-of-Work consensus algorithm. It is the first blockchain network to allow communication or transfers between blockchains.
MY CONTRIBUTION
My job as the Lead Designer involved setting up the design and research processes, introducing human-centered design, and redesign of the Cosmos website including content and structure of the site layout. This involved creation of the UI elements as well as illustrations, iconography and brand guidelines. 
TASKS
•Planning and scope definition
•Research and Interviews
•Information Architecture
•Design Execution
•Visual UI Design
•Illustration
PROJECT GOALS & DISCOVERY
The discovery process began with establishing project goals, user audience, design strategy, and a review of the current site architecture. We asked, how might we describe to developers how they can build on the Cosmos blockchain?  There was a lot of buzz around the Cosmos product but many struggled to understand the intricate technology behind the consensus algorithm. 
Our aim was to be one of the first to communicate our technology clearly, inspiring blockchain developers to build on our platform. I began by speaking to staff and community managers who had first-hand feedback from developers. I also attended conferences, creating surveys and interviewing developers who were interested in Cosmos.

Persona developed for primary user group

SKETCHING & WIREFRAMES
I began by creating lo-fi sketches on paper to create mock-ups of the layout. These sketches let us to move fast and validate ideas. Once we had confirmed that a sketch concept could work, I designed the layout using Sketch and Figma. I created greyscale wireframes, introducing one brand color. Creating greyscale wireframes allowed us to test functionality without having users and stakeholders getting distracted by visual imagery. 
After creating early wireframes for the primary and secondary pages, I designed a layout system using a modular structure that would allow developers to easily build future pages using the given template. From there, I begin to implement the modular elements into the design for the secondary and tertiary pages.
We asked a sample size of current and new site visitors what they thought of the three design iterations above. We asked questions like:
•Which layout scheme do you prefer and why?
•How does each the layout make you feel?
•Can you remember the steps to building a blockchain?
By using this information we were able to make an informed decision, on which style was more likely to be enjoyed by a large percentage of our user base. We also began to A/B test landing pages to conduct the best possible experience for users.

Evolution of SDK (software development kit) page

Some of the content-heavy pages involved straying away from the modular structure. This page below was a custom design, specially created for users who are interested in taking a deep-dive into the origins of blockchain, Cosmos, and its benefits. A specific UI and chapter system was developed to make navigation through the extensive content, easy for the user. 
As I developed the structure of the site, I began building out a library of UI elements and iconography. It was necessary to develop the iconography and illustrations while simultaneously refining the color style and typography. The iconography is minimal, yet clear, using simple, two pixel lines and small circles to emphasize the technical features of the blockchain space. The typography (Ubuntu and Muli) is modern, yet technical giving an informative, yet accessible feeling to how Cosmos speaks about itself and its network. 

The vision video was created to give a comprehensive overview of Cosmos and its origins. The video is an introduction to Cosmos for new users of the SDK (developers interested in building blockchain applications) and investors interested in joining the ecosystem. 
My role involved art direction and management of the complete production (animation, voiceover, sound, script production and assistance with content coordination).

More Work

Back to Top