Ste Grainer

Product designer & front-end developer

(804) 516-3662
hello@stegrainer.com
stegrainer.com

I design, code, and write with a focus on clarity, usefulness, and delight. I am passionate about making the web a better place for people to create and connect.

Experience

  • Senior UX Architect Advance Auto Parts

    Richmond, VA March 2016 to Present

    Responsibilities:

    • Built and maintained a design system to coordinate design patterns and styles across platforms, starting in Sketch and moving to Figma
    • Mentored and trained junior designers on using Figma, best practices in design, and conducting user research
    • Designed and prototyped numerous features for a web-based point-of-sale system that went from a small pilot and rolled out to all stores nationwide
    • Helped to design and prototype features for a web-based system for professional garages and mechanics to purchase parts, manage vehicle fleets, and track part orders
    • Conducted usability research with general managers and team members on specific features of the point-of-sale system
    • Worked with third-party systems like Reflexis to design branded elements for company tools

  • Founder & Product Designer Saunter Studios

    Richmond, VA Apr 2013 to Present

    Responsibilities:

    • Created The UX Compendium, a set of Sketch templates for making UX artifacts like personas, scenarios, site maps, user flows, and more
    • Designed, built, and continue to write regularly for UXcellence, a blog on product design and front-end development
    • Wrote a monthly newsletter for UXcellence to share worthwhile tools and resources, articles I’ve written, and new books for UX designers
    • Designed and built ColorBot, a tool for converting colors, creating color palettes, and generating accessible color names
    • Created the UX Tool Belt, a web app for learning about UX methods and tools and planning out a UX process
    • Created Photoshop templates for holiday cards, trading cards, and invitations, built a theme for Ghost blogs, and created Photoshop mockups
    • Created an 8-bit pixel font that was licensed by Threadless for their TypeTees iOS app
    • Started and managed storefronts in both Etsy and Creative Market

  • UX Designer SingleStone

    Richmond, VA January 2016 to March 2016

    Responsibilities:

    • Led design on a DevOps Dashboard product pipeline view for version 2 of the Hygieia open source project at Capital One
    • Helped to develop the responsive front end of a new corporate site for WestRock

  • Lead Experience Designer Die Happy

    Richmond, VA June 2015 to October 2015

    Responsibilities:

    • Led research and discovery for various product concepts in an early startup stage
    • Created and iterated multiple mobile app prototypes using Sketch and Invision
    • Designed a product prototype for a mobile lifestyle app focused on living a balanced life
    • Designed a product prototype for journaling meaningful adventures, accomplishments, mood, and more
    • Designed a product prototype for sharing photos and memories with close family and friends
    • Brainstormed promotional tools to build an audience for apps
    • Researched press opportunities to promote the app launch

  • UX Lead SingleStone

    Glen Allen, VA Apr 2014 to June 2015

    Responsibilities:

    • Designed the concept and pilot for a Customer Effort Score dashboard product
    • Designed and developed the responsive front-end for myVDOT, a customer-facing portal for Virginia citizens to report road problems and track the status of repairs
    • Designed content-driven templates for Markel Specialty Insurance to help standardize their brand across a variety of different insurance programs and products
    • Designed and iterated on internal web applications for International Missions Board, AMF Bowling, and Advance Health
    • Developed the front end and interpreted static desktop mockups to develop the responsive redesign for DuPont Community Credit Union website
    • Designed print collateral for various marketing initiatives at SingleStone

  • UX Designer Launch Media Network

    Richmond, VA Nov 2012 to Feb 2014

    Responsibilities:

    • Helped to grow the site from a couple thousand total visits a month when I started to over a million unique visitors each month at the time I left
    • Managed the design and front-end development of GameSkinny, a video game news and culture site written by gamers for gamers
    • Designed, developed, and iterated on a powerful but simple interface for creating content on GameSkinny, balancing a simple interface for new users with powerful features for more experienced writers
    • Conceived and helped to implement a gamification system to encourage writers and readers to participate
    • Wrote much of the microcopy on interactive elements and calls to action, documentation for new features, and guides for improving writing and participation in the GameSkinny community

  • Interaction Designer Snagajob

    Glen Allen, VA May 2011 to November 2012

    Responsibilities:

    • Designed and developed an interactive prototype for a new mobile web app for searching for and applying to part-time jobs using HTML, CSS, JavaScript, and PHP
    • Tested the prototype in iterative stages with over 40 students at a nearby university to validate what worked
    • Designed interactive prototypes of new products and new product features using HTML/CSS, Axure, Photoshop, and InVision
    • Coordinated, conducted, and analyzed remote and in-person user research with job seekers and small business owners on a weekly basis for discovery, product viability testing, market research, and usability testing
    • Designed, implemented, and analyzed unmoderated A/B split tests and heatmap click tests to test the effectiveness of microcopy, call to action design, and changes to flow and interaction

  • Webmaster Virginia Commonwealth University

    Richmond, VA May 2007 to May 2011

    Responsibilities:

    • Managed the Technology Services website and blogs
    • Designed and developed web applications, including:
      • FileDrop: a web-based file-sharing system for sending large files and tracking their receipt
      • A-Z Index: index of all VCU websites organized by category and searchable by keywords, with a powerful back-end for university web developers to manage website data and view website statistics and compliance reports
    • Defined web and mobile app design standards for the university, and regularly reviewed sites for standard compliance and accessibility
    • Managed and provided technical support for university-wide web applications, including blogs, web search, iTunes U, wikis, and Urchin
    • Led regular training sessions on using the university’s Movable Type blogging platform

  • Web Developer Virginia Adult Learning Resource Center

    Richmond, VA May 2003 to May 2007

    Responsibilities:

    • Designed and developed the main VALRC website along with multiple other sites for various projects, conferences, and marketing initiatives
“Passionate, great, honest and a smart team player who was always ready to apply all his energy and stamina to get the job done. Achievement oriented and creative developer with excellent design skills. His technical wisdom, customer focused approach, and experience allows Ste to view solutions instead of problems. He strives to understand the user and build the best possible product.” Archie Miller, Snagajob

Portfolio

“I have worked with Ste Grainer for several years in two different environments. He is unique in that he has both design and coding skills. He is passionate about the world of web and often provides interesting tidbits from recent blogs or podcasts. His design is simple, clean, and engaging. Ste has a larger perspective when solving problems which produces careful and thorough results. And he is a swell guy.” Tiffany France, VCU & Snagajob

Skills

Interaction design
  • Prototyping
  • Usability testing
  • Personas & scenarios
  • User research
  • Workshop facilitation
  • Information architecture
  • Analytics
Visual Design
  • Design systems
  • Responsive design
  • Interface design
  • Mobile app design
  • Illustration
  • Photography
  • Print design
  • Animation
Front end development
  • HTML
  • CSS
  • Javascript
  • Accessibility
  • Progressive enhancement
  • Performance optimization
  • PHP / MySQL
Software
  • Figma
  • Sketch
  • Craft CMS
  • InVision
  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe InDesign
  • Axure
  • Omnigraffle
Miscellaneous
  • Git and version control
  • Technical writing
  • Agile/Lean methodology
  • MVC frameworks
“Ste is truly one of the rare triple threats in the business; a top tier talent in UX, development, and visual design. He is a passionate designer who brings an attention to detail and quality to everything he does. Curious and empathetic, he is an innate researcher able to understand an audience and bring their voice to the development team.” Chris Brown, Snagajob

Volunteer

  • Editor & Producer A List Apart

    2017 to Present

    Responsibilities:

    • Edited articles to help writers refine their concept and meet A List Apart standards and styles
    • Reviewed submitted articles to offer feedback, suggest further directions, and weigh in on whether to accept or reject
    • Produced articles in Expression Engine and then WordPress

  • Webmaster Echo Lake Elementary School PTA

    2016 to 2022

    Responsibilities:

    • Designed and built a website for my son’s elementary school PTA using Craft CMS
    • Designed a new logo incorporating the school’s dolphin mascot and created accompanying print materials including shirts, flyers, and more
    • Hosted and maintained the PTA site on Digital Ocean and trained PTA members on making updates to the site

Education

  • James Madison University BS Media Arts and Design, Interactive Design

    Harrisonburg, VA 1998 to 2002

    Extracurricular Activities:

    • Minors: Computer Science and Technical Writing
    • Co-Executive editor, Curio magazine, a student-produced annual feature magazine
    • Online editor & web designer for The Breeze, student newspaper
“Going the extra mile to create a better user experience is standard operating procedure for Ste. He cares about individual product impressions and the impact of small moments, while having the perspective to draw team focus to those things that will ultimately create the best experience for the most users.” Amy O’Callaghan, Snagajob & Launch Media Network