My Role
My job as the Lead Designer involved setting up the design and research processes, introducing human-centred design, creating the style guide and design system as well as complete redesign of the Cosmos website including content and structure of the site layout. This involved creation of the UI system as well as illustrations, iconography and full brand guidelines. 
Services & Tasks

•Planning and scope definition
•Research and Interviews
•Information Architecture
•Design Execution
•Visual UI Design
•Brand Strategy
•Illustration
Discovery
The discovery process began with establishing the project goals, user audience, design strategy, and a review of the current site architecture. We asked, how might we describe how developers can use 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 with 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 and Tendermint.

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 and interface design. 
Hi-fi Prototype and UI
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.
User Testing
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. 
Style Guide & Design System
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. 

Cosmos Vision Video
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).

View more work

Back to Top