Alan Coughlin

Product Designer

UX/UI Designer-Developer

My Work

Celsius Network Employment Pitch, v2

Customers take the path of least resistance. Period. End of story.
Mark Cuban

Understanding the Role of Design

There appears to be a blind spot at Celsius Network as to the role of product design (including user experience design, user interface design, et al). This is not uncommon with technology firms, but if we are going to bring in "the next 100 million users onto the blockchain" we will have to address this. The problem lies in the difficulty for developers to see things from the users' perspective. Often the scope of design is seen as merely the cosmetic or branding aspects of a product. One developer I worked with (a brilliant mind) would tell me, "We build the application, then we'll give it to you to pretty it up before launch (if we have time)."

The actual scope of product design could not be any greater. Design being the discipline of applying reason to our goals, it should be as extensive as needed to secure its ends. Design is the "measure" in "Measure twice, cut once." Design considers all practical aspects at the intersection of the user's desires and the business goals in order to guarantee success.

Communication and Context

Communication is a good paradigm through which to view design of the user interface. And a key component of communication is context. Words have meaning within sentences, sentences within paragraphs, those within passages, stories, and so on, all the way up to the context of life itself.

The celsius.network website and the Celsius Wallet app have communication context issues throughout and on many levels. Users have various levels of technical aptitude and are at different stages in their journeys with both the technical aspects of blockchain and the macro- and micro-economics questions that impact their personal financial well-being. We must not ignore any of these aspects, nor leave them to others to solve for our users. At the same time, we cannot take a shotgun approach, overwhelming our users with all related information at full volume. We must hit that sweet spot of just the right amount of information while presenting it hierarchically and layered so it is elegant in its simplicity and in its effectiveness.

User Empathy Driving User-Centric Design

The methodology to achieve this begins with analysis of the user experience from the broad scope of the user flow down to individual design elements, based on individual user personas we identify. User personas should consider the many facets of our users’ journeys to the goal each is currently working toward. Immersing ourselves in empathy for the user will assure we tailor all design decisions geared to assuring a successful outcome for the user. As a very new crypto fanatic, the pain points are very fresh to me and I have left a trail of breadcrumbs in my mind so I can help others.

Practical Design Gets the Job Done

"Pretty" is a good goal—we don’t want to intimidate users with an overly-technical interface. But aesthetics must be balanced with the practical. There need be no conflict here. Our users have a practical task to complete which may significantly impact their lives and we cannot fool around with that. We have a difficult task; we must get down to business. Aesthetics and the practical must work in unison to get the job done!

Complexity and Simplicity—Solving for Opposing Goals

As stated above, we have an inherently complex subject matter—both the technology and the financial aspects combine to make this situation among the most difficult to design for. Given that our users run the gamut of knowledge and experience, but that our particular emphasis will be on the newbie with little technical aptitude, we have diametrically opposed goals of sophistication and simplicity.

Designers faced with this situation often err in either direction—overwhelming the user with complexity or over-simplifying—few get it right. You can’t just try to strike a happy medium by including a degree of complexity. This may work for some users, but will hurt both the users that need simplicity and those that need the complexity in order to succeed. Such a difficult project requires a designer of the highest level of skills and experience.

Aesthetics—Reliable, Yet Hip—Solving for Competing Goals

In the current Celsius Network interfaces there seems to be an attempt to appeal to youth with a post-modern aesthetic. While this is executed well in the CEL Bites topical video shorts, it falls short on the website and app. Seemingly random treatment of font, color, and content in general may add a very slight sense of a postmodern chaotic aesthetic, but at what cost? (I imagine some of the poor organization is just a result of rapid growth or poorly thought through categories—we can fix that too!) Communication is key to the success of the core goals of the business. We need to define a plan to meet aesthetic objectives without compromising other business goals.

One of our goals ought to be to bring order to the chaos that users perceive. This is lacking in Celsius Network interfaces. This is not “user friendly”.

Start with Well-Defined Goals, Iterate, and Recalibrate

Part of a designer’s success depends on the ability to get the vision right before implementing solutions, to develop the solutions with proper consensus by iterating as much as needed, and to implement and recalibrate as new input is discovered. These skills require clarity, tenacity, and persistence—disciplines I find to be rare in designers.

No Small Task

The depth and breadth and height of the task to be done should not be underestimated. This is not a part-time position! The need to bridge the chasm in this unique case of highly-technical to user-friendly is critical to the success of Celsius Network’s potential users and, in turn, Celsius Network’s own success. I think Celsius Network has something invaluable to offer to so many, if we can only help users to access it. This is the role of usability design. There are not many up to this task. I am one of them, and I am eager to help.

I see in Celsius Network—in Alex and in everyone involved whom I have seen so far—rare qualities and a work dynamic that I would be proud to be a part of. Please consider my thoughts. I would love to discuss more of what we can do to make Celsius the best it can be. I want to help bring the next 100 million people onto the blockchain with Celsius!

 

Thank you!

 

Alan

Utah Childhood Resources Website

Utah Department of Workforce Services, Office of Child Care

I designed the user experience and user interface for a new website for parents seeking resources for their birth through 5 children in the state of Utah. I also designed the provider portal in which service providers will maintain their listings and manage family referrals.

We began with a thorough research phase, conducting deliberative sessions with parents and service providers throughout the state, which gave us a strong basis for our design work going forth. I delivered mockups demonstrating design solutions for every aspect of the applications—discovery, services, services sub-search, articles, and the Provider Portal with the best referral management system you'll find.

The goal of the project (which will proceed if a federal grant is awarded) is to bring Utah's system of early childhood services, which are currently siloed, into alignment to provide parents with greater knowledge and choice of state and community-based services, and to help overcome the many obstacles they face in acquiring those services.

Tasks Performed: User Research, Experience Design, UI Design, Wireframing, Writing Design Guide

Technologies Used: XD, Illustrator, Photoshop, InDesign

Health Organizations Partner Portal

U of U Health

I completely redesigned and extended an extranet portal for Mountain West hospitals and health organizations partnering with U of U Health. I designed an interface that conveys the value the organization offers and is extremely easy to use. The site contains several custom apps — a job board, file repositories, event calendars, an education media library, an ad builder — all of which I designed to best-in-class user experiences. I then coded HTML, CSS, and JavaScript, and worked with developers to integrate into SharePoint.

Tasks Performed: User Research, Experience Design, UI Design, Wireframing, Prototyping, HTML/CSS/Javascript, SharePoint Integration

Technologies Used: XD, Illustrator, Photoshop, SharePoint

View Website

View Public Job Board

E-Commerce Redesign

Premier Medical Distribution

Modernized the look and user experience of a 20-year-old e-commerce website, streamlining the user experience, making it user-friendly and intuitive. Coded the HTML, CSS, and Javascript and integrated it into their PointForce content management system.

Tasks Performed: Experience Design, UI Design, Wireframing, Prototyping, HTML/CSS/Javascript

Technologies Used: XD, Illustrator, Photoshop, PointForce

Case Study

Career Portal

C.R. England

“A huge project to rework and automate many parts of the process from the time the drivers first apply to work for us to when they get hired (and beyond), cutting paper and time out, making it far easier for our brand new drivers who are signing on. It was a daunting enough IT project that it was given the name 'The Four Horsemen of the Apocalypse'."

—Chad England, CEO

We revolutionized the application process at C.R. England! Dozens of screens of forms meant I had to optimize the form experience like never before. Mobile usability was absolutely essential. Our usability testing proved we hit a bullseye. The Career Portal was an instant success and immediately evident that it would have a huge impact on the company’s success going forward.

Tasks Performed: Experience Design, UI Design, Mobile-First Responsive Design, User-Focused Design, Wireframing, Prototyping, HTML/CSS/Javascript, Usability Testing

Technologies Used: XD, Illustrator, Photoshop, InVision, Pencil & Pad

View Website

Case Study

Design System

Myriad Genetics

I created a design system with a living design style guide and pattern library to serve many developers in creating a multitude of internal apps. The design system was created using the actual components developers would use to build their apps. This means it was always showing the current style and behavior of components, and could be relied upon as the authoritative source to invoke them. Not only did this streamline development, allowing developers to focus on their areas of expertise, it assured Myriad achieved a highly-polished look and optimal usability, with maximum consistency, across all of their apps. Vue.js with Material Design has never looked so good!

Tasks Performed: Experience Design, UI Design, HTML/CSS/Javascript

Technologies Used: Adobe XD, Illustrator, Photoshop, Visual Studio Code

Internal Apps Prototype

Myriad Genetics

I designed the user experience and user interface for a new platform for internal web applications involving data entry, data analysis and processing, and data reporting for this leading molecular diagnostic company.

Tasks Performed: Experience Design, UI Design, HTML/CSS/Javascript

Technologies Used: Adobe XD, Illustrator, Photoshop

CRE Toolbox Mobile - CareerTrak

C.R. England

I immersed myself in the users’ motivations and process to design an intuitive and effective experience. Drivers tell me they finally understand their career options.

Tasks Performed: Concept, UI Design, Logo Design, Mockups, Prototypes, Dev Instructions

Technologies Used: Photoshop, Illustrator, InDesign, InVision

CRE Toolbox Mobile — 2-Way Messages

C.R. England

I conducted driver interviews, designed the experience and screens, and created mockups with developer notes for C.R. England's driver app 2-Way Messages. I designed for iOS and Android, employing the conventions that are most useful on each platform and inventing new ones when needed. User testing with prototypes proved invaluable to the app's success. The drivers I've spoken with cannot conceive of going back to the old way.

Tasks Performed: Concept, UI Design, Logo Design, Mockups, Prototypes, Dev Instructions

Technologies Used: Photoshop, Illustrator, InDesign, Invision

NeoCon Conference Microsite

ANEW Foundation

"The microsite was a pretty big hit at NeoCon!"

Glenn Sparks, Vice President, ANEW Media & Communications

Tasks Performed: Concept, UI Design, Mobile-First Responsive Design, User-Focused Design, HTML/CSS/Javascript

Technologies Used: Photoshop, Illustrator, Pencil & Pad

Workbench

C.R. England

The Workbench consists of hundreds of screens which office staff in all departments use to manage every aspect of the trucking business at C.R. England. I designed the user experience from the ground up for dozens of these to assure their success. I restyled the entire workbench, making everybody's workday more efficient and more enjoyable. The branding design concerns were nil, so I was free to optimize usability for those spending long days doing complex tasks on screens full of data. There were lots of tables and forms, allowing me to push my skills in these—which I've been at since the start—to new heights.

Tasks Performed: Experience Design, Concept, UI Design, Mockups, Prototypes, Dev Instructions, HTML/CSS/Javascript

Technologies Used: Photoshop, Illustrator, Pencil & Pad

Case Study

ANEW Website

ANEW Foundation

I designed and built a Joomla-based website geared toward getting people involved in the charity and environmental work in which the ANEW Foundation is leading the way. It is built on a content management system for a self-maintained blog and incorporates social sharing and sponsor recognition components.

"We love our new website – it’s really a great tool and reflection of the years of our hard work realized... something we keep adding to that gets better by the day. Thank you for this! Our site has been getting great reviews – those commenting on it understand its logic and format... they see a vast improvement from our former one... THANK YOU! It’s really great to have a website that compliments “us” and our public service... the blog shows our personality and it’s fun to see all the new content up on our Facebook page and on YouTube so readily. You really did a great job for us."

— Rose Tourje, Founder

Tasks Performed: Messaging Strategy, Interface Design, Joomla Custom Template Design, SEO, User-Focused Design, User Persona Development

Technologies Used: HTML5, CSS3, PHP, Dreamweaver, Fireworks, Photoshop

Personal Trainer Website

The Present Body

This San Francisco Bay Area based group needed a new website which would prioritize the needs of their existing clientelle while communicating their competitive advantage to newcomers. Since the number of their clients who train online is rapidly increasing, they also needed their site to be very usable when accessed via handheld devices. The result was a clean and professional look that's easy to use wherever it's accessed from.

Tasks Performed: Site Concept, UI Design, Mobile-First Responsive Design, SEO, User-Focused Design, Programming, Maintenance

Technologies Used: HTML5, CSS3, PHP, JavaScript, Dreamweaver, Photoshop

Mechanic Website

Arman Auto

I took a mobile-first approach to assure the priority target group—motorists breaking down on the road—have an optimal experience.

This is a custom-designed Joomla site. It has 2 sections that the client maintains themselves.

Tasks Performed: Site Concept, UI Design, Mobile-First Responsive Design, SEO, User-Focused Design, User Persona Development, Programming, Maintenance

Technologies Used: HTML5, CSS3, PHP, Joomla 3 Custom Template Design, Bootstrap 3, jQuery, Dreamweaver, Photoshop, Illustrator

View Website

Fashion Website Prototypes

The Blank Rose

High style doesn't sell itself; it needs the help of a web designer with a keen sense of style to carry the vision through to the visitor. I applied that sense as we rapidly iterated through prototypes for a new concept in shopping for fashion.

Tasks Performed: Messaging Strategy, Interface Design, SEO, User-Focused Design

Technologies Used: HTML5, CSS3, jQuery, Dreamweaver, Fireworks

View Website

Elite Awards Mobile

C.R. England

After spending a fortune outsourcing this gamified interface which incentivizes drivers' performance, C.R. England received an unfinished website. And it wasn't even usable on mobile, our primary use case! I made it work like a charm on mobile and gave it a much slicker look while I was at it. It is being used daily to facilitate conversations between drivers and driver managers on drivers' key performance indicators.

Tasks Performed: Interface Design, Mobile Responsive Design

Technologies Used: HTML5, CSS3, jQuery

Design System

C.R. England

I created a collection of resources and standards to serve developers in building a multitude of web apps, mobile apps, and websites across the company. It became the single source for governing and supporting coordinated and streamlined development from system administration, to design, to development, to QA. The resources included a complete list of development products and their authorities, reference materials, object names, CSS class names, naming conventions, widgets, scripts and how to invoke them, usability standards and instruction, and a repository of design goals and issues.

Technologies Used: Confluence Wiki

Web Development

Creative Marketing Services

The website for my own web development firm had to convey our capabilities in itself. So I gave it a mobile-first design, a user-focused message, and based it on a custom-designed Joomla template.

Tasks Performed: Site Concept, UI Design, Mobile-First Responsive Design, SEO, User-Focused Design, User Persona Development, Programming, Maintenance

Technologies Used: HTML5, CSS3, PHP, Joomla 3 Custom Template Design, Bootstrap 3, jQuery, Dreamweaver, Photoshop, Illustrator

Utah Childhood Resources Website

Office of Child Care

Health Organizations Partner Portal

U of U Health
View Case Study

E-Commerce Redesign

Premier Medical Distribution
View Case Study

Career Portal

C.R. England

Design System

Myriad Genetics

Internal Apps Prototype

Myriad Genetics

CRE Toolbox Mobile - CareerTrak

C.R. England

CRE Toolbox Mobile - Messages

C.R. England

NeoCon Conference Microsite

ANEW Foundation
View Case Study

Workbench

C.R. England

ANEW Website

ANEW Foundation

Personal Trainer Website

The Present Body

Mechanic Website

Arman Auto

Fashion Website Prototypes

The Blank Rose

Elite Awards Mobile Version

C.R. England

Design System

C.R. England

Web Development

Creative Marketing Services