jonmccon

Photogrammetry on a Pen Plotter

2024-06-01T00:00:00Z

Originally I built a single head printer to draw vectors and while flat things are fun to draw, I decided to extract vectors from photogrammetry models and print them flat with a ballpoint pen. #

Eventually I didn’t feel I had enough control over the fidelity of the drawings. So I stripped all the electronics and rebuilt the plotter with an Arduino + gShield, a gentler printhead, and more power. #

My early scans were with a digital camera, which was great for large objects. Many forums later, I was able to build a rotating turntable and python server that ran on my phone to take photos and step to the next position, which allows for consistent detail on smaller objects. #

Ongoing project, 2016 People, object & pattern studies Prints available

https://www.makeblock.com/project/xy-plotter-robot-kit https://www.arduino.cc/ https://synthetos.myshopify.com/products/gshield-v5

Resonance AI

2021-08-01T00:00:00Z

[] two versions of the copy

[] add bit about auditing the system

Content & performance analysis

The summer of 2021 was all about boiling down disparate data points into storytelling elements. As the sole designer for Resonance AI I was able to reorient the brand & product to be an opinionated feedback platform for video & TV production clients. Two fonts were chosen to provide a distinction between hard data and analysis, as well as exploring color pallettes that created understandable distinction of an desired outcome. Taking these visual standards and combining multiple datapoints in novel ways, I created charting systems that individually represented a section of episode performance but that could be read together overall due to the shared design system.

Once we had an understanding of how we wanted the charting to work, I prototyped them in Plotly / vanilla js with mock data and migrated them to Plotly / Jupyter before handing it off to the engineering team.

Platform redesign for a machine learning video feedback platform. Initially the data from the ML scientists was being represented as individual data points and the product & marketing teams needed to decipher and present the story of their work to customers. I approached the work as a rebranding of the company and revamping of how the proprietary data is presented.

In collaboration with Dan Wiegand, I helped build data visualizations that were emailed daily & weekly to customers consolidating their show’s performance. After automating this previously manual task, our work focused on building an episode analyzer so that a customer could dig in to the details of who & what was on screen at a given moment and corroborated this data against audience attendance.

https://twitter.com/stopitdan

Section Header #

Seattle Creative Directory

2021-06-01T00:00:00Z

[] update images

Seattle's creative community has a strong identity but its data is disparate, resources exist but aren't comprehensive or easy to find. So I’m starting to catalog the design studios, inhouse product groups, architecture firms, printers, photographers, letterers so we can support each other and act as resource. #

In tandem with the website, I’m recording audio interviews with the owners of these companies in an effort to understand them, but also to understand what it means to be a creative professional. #

A nice profile of the work was written up in Marketing NW #

Available on Github SeattleCreative.Directory SeattleCreative.Show

https://bit.ly/New-Sea-Directory https://github.com/jonmccon/seattle-creative-directory https://seattlecreative.directory/ https://seattlecreative.show/

Lumedic

2021-01-01T00:00:00Z

Covid-19 Passport Medical records on the blockchain

I spent most of 2020 looking at opportunities to help the general public navigate the public health crisis. Lumedic, a Providence portfolio company, had an existing broad use medical-record-on-blockchain technology that we pivoted to serve as a single use digital passport. Our product planning & research followed as the science & politics evolved throughout the year, first as a time oriented test result passport and eventually also containing vaccine status card. #

The app was originally based on an existing structure from Connect.me that we audited from a user experience pov with the goal of creating a Holder & Verifier handshake scenario. My work centered around architecting the multimodal experience of permissions, mobile devices scanning QR codes on desktop web apps, and on each other’s devices, working with user expectations and building prototypes with my UX Research partner Jeanine Ledoux. In addition to serving as the daily scrum designer for the web app and both iOS & Android releases. #

Wireframing was done in Miro and Figma. The visual branding work was built on top of IBM’s Carbon design system. Illustrations by Smashing Ideas. #

Available on iOS & Android

https://www.lumedic.io/ https://connect.me/ https://www.linkedin.com/in/jeanineledoux/ https://www.carbondesignsystem.com/ https://www.carbondesignsystem.com/ https://apps.apple.com/us/app/lumedic-connect/id1519412921 https://play.google.com/store/apps/details?id=io.lumedicidconnect.lumedicid

Metastream

2019-08-01T00:00:00Z

[] anchor to imags?

Strengthening our spatial citizenship A minimap for good locales

Metastream sought to engage with the cohabitants of Seattle through an augmented reflection our environmental timeline. A map to see and understand surrounding realtime data and accessible only by being near a physical locale. #

In collaboration with cofounder Mike Shrieve, a study that leveraged Node / React as a progressive webapp, Mapbox, Firebase, Google Cloud platform, and Gitlab. In collaboration with the Open Streetmap community and public data from the City of Seattle. #

Unreleased #

Metastream sought to engage with the cohabitants of Seattle through an augmented reflection our environmental timeline. A map to see and understand surrounding realtime data and accessible only by being near a physical locale.

In collaboration with cofounder Mike Shrieve, a study that leveraged (and required us to learn) progressive web apps, Mapbox, Firebase, Google Cloud platform, and Gitlab. In collaboration with the Open Streetmap community and public data from the City of Seattle.

Mobile / Desktop demo

All images in browser windows built by Mike Shrieve

https://twitter.com/untelcombat https://www.openstreetmap.org/ https://data.seattle.gov/ https://d.metastre.am/

Progressive web app prototype / built by Mike Shrieve

(left) Combo prototype map layer & location tabs with (right) architecture breakdown / built by Mike Shrieve & drawn by Jonny McConnell

Initial prototype with geolocated Twitter posts & OSM points of interest along with neighborhood distinctions / built by Mike Shrieve

Additional Twitter + OSM data study looking at non north map orientation / built by Mike Shrieve

Locale querying based on user position / built by Mike Shrieve

Responsive web app with user login, user generated messages attached to OSM shops, restaurants, and points of interest / built by Mike Shrieve

(left) Mapbox visual study in map projection / built by Jonny McConnell (right) messaging prototype for users at a locale / built by Mike Shrieve

Sculpture Park specific iteration of metastream system and PWA installation on mobile phone / built by Mike Shrieve

Installation specific content and attached user messages / built by Mike Shrieve

User flow diagrams / drawn by Jonny McConnell

Map and messaging studies / drawn by Jonny McConnell

Pattern and visibility studies / drawn by Jonny McConnell

Data analysis structure / drawn by Jonny McConnell

Original concept layout of posts on a map / drawn by Jonny McConnell

Original concept layout of a realtime location feedback mechanism / drawn by Jonny McConnell

Inspiration from the work of Normal Future / drawn by Jonny McConnell

Fire OS 7 Upgrade

2019-05-01T00:00:00Z

As a member of the Digital Devices Group, I helped migrate the release of Android P into Amazon’s Kindle tablet os. Developed ux adaptations & updated visual treatments of existing and net new system level features including the architecture of the home app launcher, content organization & recommendations, search results, top toggle, status alerts, and dark theme treatments. #

Along with balancing the performance on a different hardware spec and different appstore architecture of the Amazon product ecosystem. #

Available on Amazon

https://amazon.design/ https://developer.amazon.com/docs/fire-tv/fire-os-overview.html https://www.amazon.com/dp/B07FKR6KXF/ref=cm_sw_r_tw_dp_U_x_zBX5EbR8RPXWF

Multimodal Video Chat Services

2018-06-01T00:00:00Z

[] probably rewrite this

The Hangouts Meet team was interested in prototyping connection alternatives to better serve customers with infrastructure limitations and explore hardware enhanced performance. My role was two-fold, one in helping to prototype a downloadable Windows & Mac adaptation of the existing webapp. Collaborated with the Material team to discuss appropriate translations of interaction language outside of the browser. Including early visual explorations of dark mode. #

Secondly, in designing a more robust web-to-phone connection that lives online. So that you & your voice show up as the same participant. #

Available on Google

https://design.google/ https://material.io/design https://material.io/design/color/dark-theme. https://support.google.com/meet/answer/9518557 https://apps.google.com/meet/

Providence Healthcare

2018-05-01T00:00:00Z

Providence & Swedish Making healthcare a little easier

My time with Providence Health & Services' Digital Innovation Group focused on two distinct digital product categories. First, designing an on-demand emergency room video call platform with remote diagnostic instruments. After partnering with Sunny Lee & Kelly Elston to research Providence's established caregiver process, protocol, and hardware we designed and tested service workflows and case management tools. Secondly, a quartet of established care services were rearchitected as a suite of Express Care options and brought together on a shared marketing & scheduling platform with a multitenant architecture. #

I also helped develop a visual language for the suite of provider & patient healthcare tools. A team process of leveraging Abstract (git), Sketch (layout), Invision (public prototyping), Zeplin (internal prototyping), along with the Adobe Creative Cloud (production). The visual design system was based on Google's Material language, but out of the box it felt too cold for the healthcare world. After partnering with engineering, we developed a solution of taking React Toolbox and subbing in a humanistic typeface, rounded some corners and generally opened up the vanilla styles (more padding). By working with these tools, we were able to more fluently migrate interaction & visual work into React components via direct collaboration in Storybook. #

Interactive prototype (Invision / Craft) #

Team presentations Integrated Consumer Experience - Web & Native design preview Scheduling & Registration wireframe review Account Management wireframe review #

Available Providence locations

https://www.providence-dig.org/ https://www.linkedin.com/in/sunnyleeux/ https://www.linkedin.com/in/kellyelston/ http://react-toolbox.io/#/ https://fonts.google.com/specimen/Source+Sans+Pro https://storybook.js.org/

https://invis.io/C3GJN9VJ6TE#/287567188_Top_-_Virtual_Landing https://drive.google.com/open?id=1ss_K_amsJ9OYZBD8vctijzRE01LrXCpc_uov3vu_fBA https://drive.google.com/open?id=1sx5oSIAm3E5Iy58XSNeil_Sm9JZLPkbQ8cuO9EfFSzI https://drive.google.com/open?id=1le_gtlHi5ts94gTg8oRfCq3uBW-u4xO7HZUxbrvMl9o https://scheduling.provinnovate.com/virtual/precheck/availability

Provider view of video service from a cart situated in an patient's room. Clockwise from the top left: Patient information card with NIH stroke scale tool, provider account, audio/video controls, remote camera controls, saved xyz view positions, self view, on cart tool controls. We did a facial detection prototype during one of the group's hackathons.

Example of switching to the handheld JedMed video tools.

Telestroke dashboard for centralized management of session requests and hardware connectivity with partial Epic api integration for patient records.

Design language being applied to a provider's detail view.

Custom skin for prototype dashboard (patient detail view) built on Salesforce.

A clinic location page with appointment time selection, symptom triage, insurance coverage and costs.

An example of different form states used throughout the paperwork sections.

Material's card based structure was imposed on the sign up forms.

Toast and a status bar error.

Progress indicators and success states were imposed to clarify user actions.

Pared down video interface for virtual triage service, with text chat.

Progession of screens for a hardware diagnostic system.

A user flow, as seen in a Sketch + Invision's Craft prototyping method.

Leveraged Material's mentality for simple theming variations and a single type choice. A 960px wide 12-column structure and 16px baseline grid formed the basis of the Material modifications.

Example of theming control.

Collaborated with Sunny Lee to help develop a mapped out user flow.

Collaborated with Sunny Lee to accommodate for native apps interacting with web services.

Collaborated with Sunny Lee on administrative dashboard wireframes. Many iterations until we ended up with something that helped the staff and didn't add daily stress.

Collaborated with Sunny Lee to develop mobile wireframes for video visits.

AIGA Seattle

2014-09-30T00:00:00Z

As a programming co-director for the Seattle chapter of AIGA I was responsible for event production and general chapter engagement with the public. However, after a handful of years of being involved in varying on-the-ground capacities before taking a proper board position, I was able to see where we had stumbled operationally. So in the process of streamlining my planning, promoting and running events I built out structure on varying web platforms and adapted them into chapter wide processes. #

Helping to build out our portfolio of tools, the chapter handled ticketing online at Eventbrite and in-person checkin (or at the door sales). Square readers are still on hand for any merch or drinks (with distributed gray accounts for volunteers' personal phones). #

Below is a site theme built on a Wordpress backend that the national organization had proved chapters to leverage. Ina addition to Google Forms for internal requests automatically routed to the correct board member, and a server structure for shared resources on our Google Apps account (in collaboration with my co-director Calvin Carter). #

Design collaboration with Ben Hubbard for the theme. The geometric graphic work was a part of a membership rebrand from Kiss Me I’m Polish done at the same time. #

The custom theme was built but not used, in favor of the default theme provided

https://seattle.aiga.org/ http://aiga.org/

http://www.calvinkcarter.com/ http://www.benbusy.com/ http://kissmeimpolish.com/work/aiga-membership-initiatives/

LYFE

2014-06-01T00:00:00Z

[] stub — content coming soon

LYFE was a mobile health and wellness platform. More detail to follow.

Seattle Studio Tours

2014-05-01T00:00:00Z

[] better presentation of

[] include photos from the flickr pages

To keep the neighborhood tradition alive, I helped produce the Capitol Hill & Pioneer Square studio tours. Collaborations with Neil Palmer to build promotional and mobile mapping tools made it feel like a proper gallery walk. #

https://www.flickr.com/photos/aiga_seattle/sets/72157641575143395/ https://www.flickr.com/photos/aiga_seattle/sets/72157644638789788/ https://www.linkedin.com/pub/neil-palmer/48/215/245

Xbox One Smartglass

2014-04-01T00:00:00Z

While a part of the Xbox One R&D group I helped produce the TV Guide app to universally control your watching experience. Simultaneous development for iOS / Android / Microsoft phone & tablet for a 10-foot controller experience, voice, and Kinnect. #

Vine Wars

2013-11-30T00:00:00Z

When Vine launched there was no way to view the best videos and no means of pulling them into an interface outside of the app itself. I partnered with Angel Samano to not only take a crack at scraping the Twitter API but make it into its own game. That team at Vine has since built, and shuttered, their first party API for exploring content. #

https://www.linkedin.com/in/angelsamano/en

Decibel Festival Popup Artshow

2013-08-01T00:00:00Z

[] rewrite that subtitle

[] change to mopop

The 2013 centennial show called upon the talents of Benajmin Van Citters, Nick Bartoletti, Chris Blohm and Patrick Wright to projection map and augment the whole show (from window displays, to rotating poster frames, to dancing skeleton tracking via Kinnect). A monday night quadruple kegger later, it was the highest attended opening event in the festival's history. #

2014 marked the introduction of EMP Museum's partnership with Decibel and made the poster festival a part of the Opening Gala in the Skychurch. #

Email is often overlooked, but when approached at a person-to-person scale, it can be a powerful and honest driving force to inspire being a part of a poster show full of your friends. All it takes is a Google Form, a spreadsheet, Mailchimp's merge tags, a heavy dose of heartfelt honesty and you're just a pushpin supply away from an artshow. #

http://dbfestival.com/ http://benvancitters.com/ http://vimeo.com/bartoletti https://www.mopop.org/

Microsoft Learning Platform

2013-06-01T00:00:00Z

When Microsoft approached Tether to concept a digital learning platform that leveraged the capabilities of its Surface tablets, the team got out the sticky notes & whiskey and went to town. #

https://www.microsoft.com/ http://tether.com/ https://www.microsoft.com/en-us/surface

Awake Chocolate

2013-06-01T00:00:00Z

Digital cartography platforms are notably difficult to theme visually due to the quantity of information presented and how it’s rendered. I asked myself just how far could I push Google Maps with a simple JSON styling tool and GPS locationing. Honestly that led to me pushing myself to the brink of copy & paste insanity when I needed to geocode all the gas stations across greater Ontario that carried these.

https://mapstyle.withgoogle.com/ https://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp

Pixels of Fury

2012-11-15T00:00:00Z

[] 2012 not listed on the shutterstock page! reach out to them

Shutterstock wanted the Seattle AIGA chapter to host one of its first battles in the Pixels of Fury championship and I was able to play ringmaster at the lovely Makers Space for a night. #

Fueled by pizza, cupcakes and Hilliards, six local designers duked it out in front of creative directors from Tether and Digital Kitchen in three rounds of 20 minute poster battles announced by Terry Marks. I built my own 3D cardboard & hot glue adaptation of the newly announced Adobe CC logo to have it disassembled in a festive mere seconds after announcing the final winner. Luckily we had a proper crystal trophy, just in case. #

Built with Neil Palmer. #

Double exposure Polaroids from Erik Simkins. Whole photoset is available here.

https://www.shutterstock.com/ https://seattle.aiga.org/ https://www.shutterstock.com/design/design/design-inspiration/pixels-of-fury http://www.themakersspace.com/

http://www.tetherinc.com/ http://thisisdk.com/ https://www.linkedin.com/pub/terry-marks/1/1b5/91b

https://www.linkedin.com/pub/neil-palmer/48/215/245 http://simkinsphotography.com/ https://www.flickr.com/photos/aiga_seattle/sets/72157632061861162/

Bakedin

2012-03-01T00:00:00Z

Embeddable image wrapper tool developed for infographic marketing. Backed by an analytics platform to track where the image ended up being shared. As well as providing author, data sources, & ad promoter.

Early Work

2011-09-01T00:00:00Z

A collection of work from Western Washington University and the Pacific Northwest art scene, 2009–2011.

This Film is Free (2010) — After finishing BA courses ahead of schedule, an independent study year exploring traditional and new media. In collaboration with photographer Erik Simkins, we gave participants a single roll of 35mm film, a series of themes and constraints, and a shared cataloging site. Packaging built from a Fedex dieline with my own photography. WordPress theme built on the Grid-a-Licious framework.

Blackspot Collective 4 (2011) — A screen-printing atelier and art show series in Bellingham and Georgetown. Four shows of loosely themed and hand-printed work, culminating in a former antique storefront on a corner of Georgetown. With: Ally Creighton, Nicole Mills, Glenn Newcomer, Battershell, Riley Hoonan, Erik Simkins, Sean Morrow.

WWU Design Day 09 (2009) — Campus design workshops and fountain installations.

Klipsun Magazine (2010) — Editorial design and layout for WWU's student publication on a 48-hour deadline. Even if it flies off shelves in campus records, sleep afterward. And no exacto blades after 6pm.

WWU Dean's Report (2010) — Months of investigative journalism into the history and trends of culture at the student union building on WWU's north campus, scouring photo archives and directing additional photo shoots. Design lead in collaboration with a handful of designers and an editorial team.

Unosolo (2009) — Packaging 101: given a gallon of dry spaghetti, figure it out. Single-serve pasta in boil-away rice paper with soy ink.

Erik Simkins Photography (2010) — Processing algorithm compiling an entire photography show into varying histogram channels as a simple promotional piece.

This is Us (2009) — Tumblr theme design and PHP/CSS/HTML skinning for a Portland-based director who had strung together production crews across multiple cities shooting the same film.

Yakitate!

2011-08-01T00:00:00Z

Identity system for an exhibition of emerging Japanese product designers at Dwell Magazine's 2011 Dwell on Design Conference in the LA Convention Center

https://www.designboom.com/design/yakitate-at-dwell-on-design-2011/

A Few from Western

2010-06-01T00:00:00Z

In the North, near an arboretum strewn with brick, was a small tower dedicated to learning the craft of applied design thinking. Problem was, no one ventured up there much. #

I was able to pull together an extra graduating show, planned with a handful of students, in Seattle's Pioneer Square at the Tether Gallery. Single projects from 16 seniors, packed house, ridiculous guest book, what's better? #

Design and production in collaboration with Riley Hoonan, Glenn Newcomer, photography from Erik Simkins. Special thanks to Daniel Petrzelka & Bebet Caguin of Tether and the WWU Class of 2010.

https://g.page/copalseattle?share https://tether.com/

Short Shorts & Lawn Sports

2010-05-01T00:00:00Z

The culture of design school is often described as immersion training. No one going in knows what's going to happen and the results are quite relieving & stunning if you join the club. #

Once the inch of ice on the inside of my Bellingham bedroom had subsided, spring time brought us the prospect of taking the classroom outside: Glenn Newcomer and I created a whole league, bracket and uniform requirements for the two of us to put our design skills to the test. We were successful at gaining the appropriate media coverage on #LATFH #

http://glennnewcomer.com/ http://lookatthisfuckinghipster.tumblr.com/post/613915076/dude-nice-shuttlecock

Selected Poster Work

2010-01-01T00:00:00Z

Posters I like to put myself in my work Campus promotional work is all tabloid while the rest are 18 x 24"

Scanned self-portrait, large format Epson print, with screen printed clear thermographic lettering.

Nacho Picasso for Sasquatch! We printed this two color Sasquatch! poster on the crummiest brown package paper and it was just perfect.

STRFKR for Sasquatch! with Nicole Mills.

Demonstrating the progression of a split fountain to get other students up to the printing attic.

-- Take a photo of real Nacho Poster - Ask rosie?