Elle Kelsheimer: Research-based, User-centered UX and UI design

Elle Kelsheimer

Welcome to my UX / UI portfolio.I am a user-centered designer who utilizes research to make informed decisions that serve users and business goals alike.

UX Design

  • Wireframing
  • User Interviews
  • Information Design
  • User Stories
  • User Personas
  • Rapid Prototyping


  • Layout
  • Color Theory
  • Hierarchy Principles
  • Copy Design
  • Mood and Voice
  • Type Design

Dev Skills

  • HTML
  • CSS
  • Sass
  • Javascript
  • jQuery

Windward Education & Research Center

Windward is a cooperative community of over thirty years in the making dedicated to preserving and developing village scale technologies needed to support a thriving sustainable community on marginal land. The current keystone technology under development is the development of a village-scale Biomass to Methanol (B2M) - a fuel that can be used to power converted cars and tractors as well as a number of other essential machines.

Project Details

Meetings and Tour

My primary contact for this project is Walt, a brilliant engineer and long-time veteran of co-op living. His main goal is to secure "drip-irrigation funding" - small, recurring donations - for his Biomass to Methanol project.

We talked about institutions that receive such funding - museums, private schools, public radio - and what motivates their donors to give frequently. Upon further research, I found that museums and private schools often assign titles to donors within certain dollar amounts and that the appeals and perks offered all center around the theme of "be part of this thing you believe in, be part of a community". An additional challenge is that the existing donors are mainly engineers themselves and are interested in schematics and blueprints that would go far, far over the average person's head, so the finished product needs to accommodate both groups.

My visit to the research center helped solidify my grasp of the design challenge. There are many inter-weaving ideas, philosophies and clever synergies that make up their village system and to be invested enough, a donor will need to understand the cohesive whole and the B2M's role therein.

Concept sketches

After a few sets of ideas, I decided the best approach would be a pictorial, interactive diagram of a B2M village. A user will be able to click through at their own pace and read brief descriptions, with links available to dive deeper into the concepts. In addition to organizing the concepts, the image will act as a "hook" and provide a framework for the information.


Walt emphasized that it's important not to over-promise. Many past green tech projects blow up quickly, and then envelope their creators in other obligations and distract or derail the project completely. Thus, it's important for the feel of the site not to be too cute and/or romanticized while still remaining inviting and humanistic. There should be an element of handmade-ness to support the philosophy that villagers will be very in touch with the land and technology will not replace hard work.

I chose to avoid cottage-looking buildings and elected instead for metal-roofed, utilitarian buildings. To support the hand-made idea, and to communicate the village is purely conceptual at this point (Windward is a research center, though it operates like a B2M village will), I colored the background in a watercolor-esque style with fuzzy edges. The gasifier and other B2M equipment are in the center and rendered red to draw extra attention to them and empathize their central role in the B2M village. Clickable objects react to hover-overs and are colored and outlined more clearly than the non-clickable background.

Website Design and implementation

The graphics of the site needed to walk the line between credible and hand-made while strongly veering away from sleek. Walt was initially very drawn to the header font, so I made an effort to design around it. Walt wrote the copy for the larger paragraphs below, and I advised and guided him on his voice and media strategy.

Implementation was done with Sass and HTML. I needed to avoid the use of Javascript so that the site can be maintained with the resources available to Windward, so the menu and mobile text sections are created solely with CSS. You can see the site here: The B2M village

View Project

What Would You Like to See?

What Would You Like To See? was a local start-up that filled the gap between communities and commercial real estate by collecting feedback on what the neighborhood would find useful in the vacant storefront. (The community gets a needed service, the tenant gets security that their shop is welcome, and the owner doesn't have to pay taxes on an empty property. Win-win-win) I created a comprehensive graphical scheme ranging from logo creation, to printed collateral to online UX and UI. This was a wonderful asset to my UX career, because I got to plan the in-person user experience all the way through to interacting with the service online. I had my hands on every aspect, so it is a great point of pride that it was so successful in attracting users and compelling them to submit their input.

Project Details

Brainstorming Meeting

I first met with my development team and the founder to discuss the goals and philosophies. It was important to all of us that the tool not become a gentrifying force, so we knew from the beginning that we'd need a branding scheme that appeals to a wide demographic and a UX design that didn't not confuse those who may be less technically literate. A speedy workflow was also extremely important. We estimated we had less than a minute to collect the user's input before they were distracted.

In-person Poster

(1st step in users' workflow)
The poster was the POS for the service- and on busy street corners it had a lot of visual noise to compete with! I decided to pull out all the stops to draw attention to the QR code, which was our action item, by using bright orange and pointing many line paths straight at it. And it worked well! We had hundreds of interactions with the service based on these posters alone.

screenshot - What Would You Like to See?

Locations' page with Graph

(2nd and final step in users' workflow)
The location page, complete with it's bar graph, is an easy, universally understood way to represent the existing feedback. A busy passerby need only tap a bar on the graph, and they are done! A more involved user saw how to easily add a new category (click here for screen grab of a active location), increasing their workflow by only a few seconds. For further secondary engagement tasks, they can read comments below the fold, or expand the description.

View Project

Active Children Portland

Active Children Portland keeps children active in their club, classroom, and community. Programming is an active and holistic approach to childhood development, which includes sports, creative writing, nutrition education, and service learning projects. A large portion of their funding comes from selling raffle tickets at timbers games, and they find themselves spending a lot of time training the volunteers at the start of each game. They need a comprehensive teaching tool on their site so that they can focus more on selling and less on instruction.

Project Details

Brainstorming Meeting

I met with the head salesperson, Kenny and we discussed some of the primary ideas and sketches I'd hashed out with his boss. He discussed his pain points - training takes up sales time, the distracting environment of a game-day soccer stadium makes it difficult to train, and volunteers forgetting what they had been told or not being informed on what Active Children Portland does and how they do it. I refined my sketches to better suit his needs while we talked and he remarked that he anticipates the page being very helpful.


After reviewing all the existing training content and my notes from my conversation with Kenny, I organized the main points and ideas into a wireframe laying out functionality and information hierarchy.. Not only is this a good foundation for structure, it also serves as a communication framework for me and the AC Portland employees.

Implementation into wordpress

I built out my wireframe using AC Portland's Wordpress theme, both to assure the page updates along with system updates and to make sure AC Portland employees can add to and edit the content easily according to their needs. You can see the page here: 50/50 raffle volunteer training

View Project

Contact Me

Email: ellekelsheimer@gmail.com

Call: 503.290.6462

LinkedIn: linkedin.com/in/aerayelleellekelsheimer