Kiefer Ipsen

Product Designer

Community Gallery

UX/UI Design
User Testing
Project Management

I'm going to go over possibly the largest project I worked on while at esri; redesigning the gallery page. It needed updating, some studies and testing done, and to match the new design that was updated a couple months before I got there. This is a screenshot taken in August of 2015 comparing how it looks now to when I helped complete the project in January of 2014. The header is the only change since my update. The functionality of the page is exactly the same. I will show you what was done and how we got to the final design.

These are screenshots of the original gallery and all its glory. The second screenshot is the hover effect which was the largest part to tackle of the entire process.

Here was one of the first wireframes I came up with. It utilized the universal header and identity strip (blue bar) that could be seen throughout the application.

Esri also had a comparable product ArcGIS Marketplace that had a new gallery page that they wanted to utilize some of the design from that. This is where we got the 1/4 3/4 layout of the page and having the categories be on the left.

Side note: At esri we had to create left to right and right to left designs because their users come from all around the world. Certain languages were read differently. This was a first for me.

I laid out the sort by option the same way the original had them which later would change and they wanted the item type icon (checkered flag) to be a secondary piece of information instead of hiding it in the hover.

As we progressed we moved the sorting options into a dropdown, took the navigation out of the blue banner and put them at the top of the left column which would toggle content and categories depending if you were on maps or apps.

Now that we had a base for the design of the gallery items more of the tasks came in. They wanted to introduce favorites into the gallery. Favorites was a place to save some of the items you consistently used while making a map. We went back and used the blue banner to create navigation because now it made more sense since everything below that point would change if you were in your favorites, your organizations content or esri's content.

Now proceeding with the UI we came up with a look that was close to what the Marketplace was doing with some minor tweeks. I wanted to match as much of it to items you could find throughout the application.

I was playing with font-weights in the second one but those didn't make the cut. Good thing too that was a rookie move.

After a month we learned that users didn't like the switch (maps/apps) that well so stacked those links with text hierarchy. I'm still not a big fan of how that came out but there were other battles won in the process I knew I had to let somethings get away.