Web UX UI | Mark Watkins

Revamped websites and created marketing collateral for Curriculum Technology and many other clients. Managed web development at Graphis. Handled UI asset management and built wireframes at TiVo. I’m an experienced eLearning Designer and Developer, as well.

Sample Projects

UX for Curriculum Technology

Case study: UX development
Client: Curriculum Technology
Description: Researched content, produced site maps, met with shareholders about what worked and what didn’t. Then produced multiple site map proposals and made many, many mockups showing the variety of possible new directions. Honed in on the most important elements and kept it pretty. Produced user flow charts, wireframes, and researched development requirements for communication with developers. Worked with developers to build out test pages, followed by a full test site. Worked with developers to replace the old with the new. Boom, easy peasy.
Software: Some combo of InDesign, Illustrator, Photoshop, Axure. Currently playing with Invision and Sketch.

Web Design: After/Before

Case study: Redesigning websites
Client: Curriculum Technology
Description: The original CT2Learn website was the company’s placeholder for their educational product. The site’s generic graphics and poor device repsonsiveness did not support their business growth objectives. The 2015 redesign focused on color and graphic continuity on the page and site level, clearer navigational elements and improved mobile support.

TiVo Graphics and Wireframes

Case study: Graphics, UI prep, wireframes
Employer: TiVo
Description: Worked on two projects. First, prepared and managed graphics for the Series4 TiVo Premiere released in 2010 using Flash and second, created 50-75 wireframes for the Series5 TiVo Roamio. Both projects included developing nomenclature and defining exact positioning for all the little bits and pieces, like “fadeTop_mc”, “List Item”, “the pill”, “the BoD”, etc.

Kiosk

Case study: Real Estate Kiosk
Client: Louis Dreyfus Property Group / Kevin Roche Architects
Project: Station Place, Washington DC
Description: Created interactive kiosk for new building in Washington, DC. Collaborated with Animation+Images, Tom Wood Design and Earth Data Solutions. Used Director, Flash, Quicktime, After Effects. Won 2003 Applied Arts Award Annual, 2003 Bronze Award for the ID Interactive Media Design Review, and 2003 Creativity 33 Award Annual.

Mark has done a remarkable job for us at Curriculum Technology. We brought him in during a time we were rolling out a major new product/service initiative and while the product was good, the presentation to the market was not. His vision, creativity, skill, and work ethic were major factors in enabling us to firmly establish the new product in the marketplace, where we are still experiencing very strong year over year growth. Mark is the real deal, a consummate pro.

Jon Doyle, President, Curriculum Technology, February 2, 2017

Making Pretty Websites since 2000

Graphis (2013)


In 2013 I worked for Graphis Magazine, a publisher of annual compendiums of work by international design, advertising, and photography talent. I produced many new website design mockups and built some of them, including a standard issue WordPress blog. I managed a freelance Django Python developer and a few design interns and blog writers. Job also entailed proposing new functionality, tracking and interpreting Google Analytics, making eBooks, streamlining InDesign processes, space planning, curating for museum outreach, providing tools for institutional clients, prioritizing, troubleshooting, and customer support.

Graphis
Graphis Blog

Architecture & Sculpture (1996-2004)


Clients and employers included:

Alice Aycock, Artist. January 2002 – March 2004.
3D models, animation, graphic design in production of sculptural work for national venues. Used form•Z, Maya, Photoshop, Illustrator, After Effects.

Diller + Scofidio Architects, July – November 2001.
3D models, digital video for Eyebeam Atelier Museum design presentation. Exhibited at the Whitney Museum. Used form•Z, Photoshop, After Effects.

Open Office Architects / Diller + Scofidio Architects, Summer 2001.
3D models for Shiseido cosmetic counter designs. Used form•Z, Photoshop.

Morris Sato Studio, January – December 2000.
3D models, animation, analog video shoot for Vineyard Theater interior design and for Grey Art Gallery exhibit on designer Shiro Kuramata. www.nyu.edu/greyart/exhibits/shiro/index.html. Used After Effects, form-Z, Media 100.

Duany Plater-Zyberk & Company, April 2000.
3D models for town planning charrette for Liberty Harbor, NJ. Used form•Z, Photoshop.

Susana Torre / Team for Environmental Architects, April 1999 – February 2000.
Construction drawings for the Brooklyn Children’s Museum. Town planning charrette for Liberty Harbor, NJ. Used form•Z, AutoCAD, QuarkXPress.

Karen Van Lengen Architects, July 1997.
3D drawings for “The Busy Woman’s Dream Home” project. Used AutoCAD.

Marpillero Pollack Architects, May – June 1995, May – June 1997.
3D models, graphic design. Used formoZ, Photoshop, QuarkXpress.

Baratloo/Balch Architects, October – November 1996.
3D model, animation for video art project titled “C is less than P minus G times T (Queens Conjecture)” exhibited at Queens Museum of Art. Used formoZ, Alias, Media 100.

Keenen/Riley Architects, July – November 1996.
Construction drawings, photocollage and maquettes for Palm Island aviary and private residence and for Field House. Used pencils, bass wood, Photoshop.

Jody Pinto, artist. May – June 1996, October – December 1998.
3D models, animation, digital video for bridge design presentation. Used Softimage, Media 100, Premiere.

Environmental Simulation Center, May 1993 – December 1994.
3d models of New York City buildings and streets. Used AES.

Sam Anderson Architect, June – September 1995.
Construction drawings for Fogg Art Museum, Harvard University. Used trusty old pencils.

PATH Architecture, May – June 1995.
3D models of Hudson River waterfront for physical exhibit at the Storefront for Art and Architecture. Used formoZ, Photoshop.

Manhattan Timeformations (2000)



Manhattan Timeformations
http://www.skyscraper.org/timeformations

An old school website consisting of animated, wireframe representations of New York City high rises and urban development since 1890, produced for The Skyscraper Museum with a grant from the New York State Council on the Arts.

12.01.2000: inception date

Manhattan Timeformations was begun in the early 90’s by architect Brian McGrath, author of a folio called Transparent Cities, “a boxed edition of twenty-four historic and contemporary maps on clear acetate — twelve of Rome, twelve of NY — that invites readers to assemble, transform, and contemplate the ever-evolving urban spaces of almost any city”.

In 2000, McGrath and The Skyscraper Museum received public funds from a Technology Initiative Grant from the New York State Council on the Arts, allowing this previous research to be revisited with specific focus on New York and the age of skyscrapers. Designer Mark Watkins was brought in to put the website together, and to help reimagine the project in interactive form.

Throughout the Summer of 2000, The Skyscraper Museum, curated by Carol Willis, held a series of informal discussions with the public, presenting the aims of the project while 3d digital models of New York skyscrapers were constructed in the gallery by Parsons School of Design architecture students Akiko Hattori and Lucy Lai Wong. These models, also built by McGrath and added to his large, historical / analytical model of Manhattan, were exported and formatted for online presentation.

I was responsible for research, analysis, interface design, production, animation, presentation. The project consists of 3D models brought into Flash. Heavy Photoshop preparation. Praised for intuitive navigation. Recognized by the 2001 Prix Ars Electronica (Award of Distinction for Net Excellence), the 2001 New York Flash Film Festival (Winner in the category “3D”), received a Macromedia Site of the Day Award (December 19, 2000). Exhibited at Ars Electronica 2001 in Linz, Austria (background image), in “net.ephemera” at Moving Image Gallery (May 2001, NYC), the 2001 Los Angeles Siggraph Technical Images Gallery, at the MIT “Image and Meaning” conference, on the online art database Rhizome.org, and featured in the 2001 New York Digital Salon and in the pages of Wired (November 2001), Architectural Record (June 2002), Leonardo, and others.