User Interface

User Interface

ucbr pl seminars
life Dr. Chris McNeil dentist

UCBR

 

ucbr  

CLIENT: Ulster County Board of Realtors

  • Management (sprints and reviews)
  • Template design
  • Supervise Photoshop to html and debugging
  • Designed custom interactive map

LAUNCH SITE

Define

 

The Ulster County Board of Realtors had outgrown their old website and needed a modern responsive platform with a user experience more aligned with their contemporary customer who is younger and more digitally oriented. They expressed the need for a new site, more service oriented and with visual cues.

 

 

Discover

 

In followup meetings, we presented mood boards and survey data. This led to the creation of sitemaps and wireframes that would inform the design iterations leading to the technical build of the site.

 

Sitemap

sitemap

Wireframe

wireframe
wireframe

 

Design and Build

 

I designed the site's templates in Photoshop and then assured that the tech buildout conformed precisely to my specs. My UI design is informed well by my experience as a frontend developer. I am well aware of how html, css and javascript need to be implemented for the best possible user experience on browsers and mobile platforms.

 

Key Feature-Interactive Map

 

UCBR wanted their users to easily connect through visual cues to the various counties, geographies and architecture in the region. For this, I created the interactive map and subsequent single page features for each of Ulster County's subdivisions.

interactive map ucbr

interactive map

interactive map

 

Mobile

 

ulster mobile

Etrazee

Etrazee

Client: Columbia University

My Role

  • Management (sprint and reviews)
  • UX analysis
  • Design (apps and branding)
  • Lo-fi to Hi-fi prototyping

 

Define and discover

 

Graduate students working on archeological digs in a hostile environments need the enhanced user experience of an app that streamlines their organizational needs as wifi availability permits.

Wireframe

etrazee sitemap

 

Design

 

The branding was sorted out in lo-fi Illustrator images and then applied to Adobe XD for the final hi-fi prototype. These are some key screens.

Ancient assyria

Pin drop map shows the location and link-to for logged in user (red) and colleagues (blue)

Assyria

Descending list of posts for logged in user.

Etrazee

Adding a post

etrazee assyrian dig site

On submit; option to add post to "Discoveries".

Antiquities

Catalog of discoveries.

Assyrian archeology

Co-workers can access qualifications.

 

Prototype

 

Barbara Hannah Grufferman

 

hg

CLIENT: Barbara Hannah Grufferman

MY ROLE:

  • Digital Branding
  • SEO
  • Info Architecture
  • Web Design and Programming
  • SMM
  • Maintenance

LIVE SITE

Define

 

I have had a long standing relationship with Barbara having worked on her first bestselling book The Best of Everything After 50. When she published her second book Love Your Age, we realized that she needed to develop her online brand as an author of more than one book; a  personality.

Discover

I did a complete SEO audit myself to help us narrow Barbara's niche. This added to some survey information yielded the best design result.

“I’m an expert in any number of areas, but website design and marketing are not among them. And when I needed a new site to help promote my new book – Love Your Age – and also a new logo for my personal brand, I didn’t know where to start. So I started by having Kenny do an Online Action Report covering everything  from website design to SEO – which I hadn’t even heard of at the time. The new branding and website look incredible and the results have been equally impressive. I would recommend Kenny to my fellow authors and everyone else.”

— Barbara Hannah Grufferman, Best Selling Author —

 

Design and build

 

Branding

First step was to create a branding for Barbara that was whimsical enough so as not to look like a corporation. Some iterations and the final result:

brand design Barbara Hannah Grufferman

Logo Barbara hannah grufferman

corporate ID barbara hannah grufferman
corporate colors grufferman
logo grufferman
corporate id grufferman

corporate colors

Web Design and Programming

publishing design
web design grufferman
frontend web design grufferman
ux grufferman

Mobile

Personal Leadership Seminars

 

personal leadership

CLIENT: Personal Leadership Seminars

  • Management (Sprints and reviews)
  • Photoshop template designs
  • Online signup and ecommerce site
  • Supervise Photoshop to html, testing and tweaks.

LAUNCH SITE

 

Design and build

 

whats new
licensing

 

Mobile

 

Personal leadership mobile

Chef Bespoke

chef bespoke

Client: Cent 100x

My Role

  • Management (sprint and reviews)
  • UX analysis
  • Design (apps and branding)
  • Lo-fi to Hi-fi prototyping

 

Define and discover

 

Development of a prototype to secure second round seed capital. I was supplied with UX survey and task flow data to start the process for a kitchen-aide cooking app that uses AI to learn an inventory of ingredients, make suggestions for recipes and suggest additions to inventory.

 

Design

 

The branding was sorted out in lo-fi Illustrator images and then applied to Adobe XD for the final hi-fi prototype. The prototype would reflect the task flow.

onboard ingredients

Onboard your ingredients

personality profile

Profile your personality.

vendors

Chose your stores.

inventory

Time to cook. Which of your ingredients to use.

possible recipes

You have the ingredients for these recipes.

Chef B chicken sandwich

Chosen Recipe

 

Prototype

 

The hi-fi prototype that helped the client gain a second round of seed capital.

The Life Institute

 

life

CLIENT: The Life Foundation

MY ROLE:

  • Management (Sprint and reviews)
  • Digital Branding
  • Info Architecture
  • Design and Programming
  • Photo Acquisition

LIVE SITE

 

Define

 

The Life Foundation sought an upgrade of an older non-responsive site and an update of their outdated branding.

Discovery

 

My review and consultation process with the client is best summed up here:

“When I started thinking about a new website for The Life Foundation, I realized that I needed more than just technologists. I also needed people who would dig a little deeper, fully understand our philosophy and mission and then ensure that both were reflected in the design. Kenny was the right choice. His logo design, graphic approach and photography were all spot on. And he integrated it all into a website that exudes warmth and humanity. Cannot thank him enough.”

— Barnett Davis III, Founder and CEO, The Life Foundation —

 

Design and Build

 

Branding

 

 

Old Version Logo

logo life institute

My Updated Version

holistic design life institute

 

Website

 

web design
ux design
user interface

Mobile

 

mobile first design

Terra Nova Consultancy

 

terranova

CLIENT: Terra Nova Consultancy

MY ROLE:

  • Management (Sprint and reviews)
  • Digital Branding
  • Template design
  • Frontend Web Design
  • Photo Acquisition

LIVE SITE

Define

 

Terra Nova Consultancy is a start up focused upon organic and natural business consultation based upon "five elements" methodology. When they approached me, our initial conversations centered on sustainability and proximity to nature in the workspace. We found synergy immediately since I am very close to this mode of thinking and practice. Their branding and website followed, closely adhering to the theme of the five elements; earth, water, air, fire and ether.

The look and feel of the site was more important to them than data driven design. However, using my experience as a front-end developer having used html, and css extensively, i was able to guide their design towards an effective digital design.

Discover

 

Through extensive back and forth and meetings we arrived at the sitemap for the site. We also discussed color which was key to the five elements ethos for the site.

 

color scheme

 

sitemap

Design and Build

 

Branding

I had extensive conversations about their desired image. Initially I came up with black and white concepts for their logo and then narrowed down the design and applied color. In this case, earth tones were most appropriate.

Hands Off Web brand design

corporate ID

 

Site Templates

 

web design
frontend design
ux design

Mobile

Mobile first

 

Dr. Chris

 

Dr. Chris McNeil dentist

CLIENT: Dr. Chris McNeil, DDS

  • SEO audit
  • Photoshop template designs
  • Supervise Photoshop to html, testing and tweaks.

LAUNCH SITE

 

Define

Dr. Chris McNeil needed a responsive update from a previous old site. His concern was to make his practice work better within his geographically isolated location.

 

Discover

I did a complete SEO audit to narrow and solidify Dr. Chris's niche. I found that his site previously had not been a good user experience for tourists.

 

Design

Working in Photoshop I created templates based on our SEO data and surveys.

dr chris mcneil

dr chris page

 

Mobile


 

dentistry