. . .
Type: Team, 10+ members Role: Sole UX Designer
Timespan: 8 months Company: ITHAKA
As part of being a University of Michigan Professional Practice Fellow, I was awarded a paid design two-year internship position with Ithaka.
During first year working ~25 hours a week as the sole UX Designer on Artstor (a digital image library housed under the Ithaka brand), I was able to create new designs and improve current designs for Artstor features.
These various projects took place over a span of the year while collaborating with other designers at Ithaka, researchers, product managers, and developers.
The Artstor Digital Library is an image resource available for educational and scholarly use. Collections feature visual media from leading museums, photo archives, scholars, and artists.
The process below was followed for each UX design project I completed for Artstor. Each project involved extensive research, scoping and iteration before moving to higher fidelity designs shown below.
Due to the educational nature, I had to design for both teachers and students.
I worked on various design projects for Artstor that involved scoping, prioritization, attending design reviews and critiques, daily stand up with developers, and participating in the UX research process for the following projects.
I also began a style guide and accessibility roadmap for making Artstor more accessible with established design patterns.
One of my first goals after being onboarded onto Artstor was understanding the audience. I looked at existing personas for who used the site (educators vs. students) and from there I explored user research done for the platform. From this, I assembled "speed" personas to compare certain measures.
A common case (shown below) is that there is a difference between new students who are open to change and use the platform in bursts, and teachers who often have been using the platform for years and are more resistant to change.
What did this speed persona achieve?
It allowed us to identify and visualize the key differences between student and teacher users, and these are key to consider in our designs. Maybe the flashy, new UI may cater to a student - what about a teacher?
Next, I discovered key flows for both of these personas.
I identified 3 key stages a user touches during my research:
1. Searching & filtering
2. Viewing image results and metadata
3. Adding images to a group to share
After identifying this flow, I watched usability testing videos related to each stage, and created an experience map for this small subset to better understand the user's feelings and pain points at each stage.
What did this map achieve?
It really focused prioritization of what parts of the current UX are most key to modify. We know those flow points mapped below are the key actions a user needs to perform, so the challenges faces at these points are especially important.
It also humanized the search process, so we can understand what emotions the user is feeling instead of just KPIs, such as number of clicks.
I also then got the context to begin on the image group browse project!
Image group browse redesign
There is a central page to browse through and search for image groups, which are groups of related images that instructors or students can create that have associated user-created tags for identification. The final designs I created underwent beta testing before being released and were well-received.
The "before" state of the image group browse page is shown below. Users often scrolled through long lists to find existing groups, and often reported that the group list lacked metadata. Tags and group lists were not associated by appeared to be. The search group function was also not well-known.
Image group browse ideation
I began brainstorming possible solutions to make group viewing more robust. After sketching a multitude of options, I wireframed a card view and got feedback from the team.
How did brainstorming help?
The ideas below helped generate discussion with the team on what metadata is important to the user and what actions they are trying to perform on groups. It also brought the idea up of credibility - should we mark which groups are educator-created and which groups are student-created?
After sketching some possible solutions, I was able to identify an important tradeoff in user needs.
1. Users wanted to be able to scan a lot of groups on the page at once, similar to scanning a list.
2. Users wanted a more robust preview of image groups with more metadata and imagery.
According to this, I tried the 2 different views below:
How did identifying this tradeoff help?
By framing the user needs as a bit of a tradeoff, I was able generate a more focused problem statement than "redesign this page."
The problem statement became, how do we make the groups list-like (scannable) but also more visual, so that users can identify the group they are looking for quickly?
Framework for breaking tradeoffs
To break the tradeoff outlined above, I created a map with axes representing the two factors we care about: scannable vs. visual. I wanted to know how we could devise a solution that maximizes both.
How did this map help?
It helped simplify the problem into a graph that allowed the team to visually rank options. It helped us eliminate solutions and eventually converge on the horizontal card view, which breaks the tradeoff between visually oriented and scanning a lot of groups vertically.
Shown below is the cycle of iterations I went through with the team to arrive at the final design.
A design sure is never final, but this is the layout we settled on! It's now live on Artstor.
How did this impact users?
At the most recent user feedback session, educators and students alike reported that the new view is "intuitive, visual, and speeds up work time."
Accessible Button Layout
Next, I worked on the button layout of the image result view.
Each image has a button group that allows you to cite the image, copy its link, and more.
The button grouping was unequal in width (not aligned), the color contrast was not accessible, and there were opportunities to increase user efficiency.
Understanding Page Interactions
Before beginning to explore altering the button layout, I first wanted to understand the mechanics of the page. I worked with the research team to analyze a heat and scroll map of the page using Crazy Egg.
Before this exercise, I had not worked with WCAG guidelines or accessibility for color contrast ratios, and this project really gave me into a deep dive about hover states, tooltips, and other factors that make pages inaccessible.
I experimented with screen readers and prototyped button states using codepen.io to review with the team.
What did these radically different iterations achieve?
By showing radical concepts for the button layout that completely modified the old - in terms of color and positioning, it got the team discussing whether the current layout was conducive to taking action in the first place. It also allowed us to prioritize actions on the page and identify what the primary actions were.
Finally, it inspired a roadmap for accessibility compliance and a style guide, which I helped to plan and begin with multiple stakeholders.
Further important exploration
Another thing these iterations brought up is the structure of the image view as a whole. What is missing? Why is there no hierarchy on the page?
I mocked up a version to show what a difference simply adding some weight to the headings and title can make in scanning!
Final layout with annotations.
What are the results?
One of Artstor's differentiating factors is the user's ability to create groups.
After this layout page, we saw an increase in click rate on the "add to group" button (increasing discoverability and engagement) and also the copy link button, which promotes sharing.
The next project I worked on was search filtering. The process to filter and refine a search on Artstor can be intimidating for users, since the filter list can look dense and long.
My role was to re-imagine what search filters could be!
One first pass included adding more hierarchy in the text.
Response to user behavior
Another user behavior we noticed was users trying to collapse the filter panel. During some think aloud sessions, users interacted with the filters and then mentioned that it was getting in their way of their research and focusing on the results.
From this, I reimagined what a dynamically resizing image results page would look like when filters are collapsible.
To get feedback from the team, I prototyped what the filter collapsing interaction would look like and how it could impact the user browsing experience.
After the resizing interaction, I looked at the old layout of the filters themselves. The expanding / collapsing of facets could be a bit confusing, especially when all facets were open by default.
As shown in the experience map above, users may feel overwhelmed by the facets at first glance.
Based on this, I created some iterations on what the filter facets could look like.
More coming soon!
So...what have I learned from Artstor design as a whole?
1. Always ask, what underlying problem are we trying to solve? A problem is not just "better typography." The underlying problem may be that users are having a hard time scanning a page, which is a lot more interesting and valuable. Problem framing is essential to the solution.
2. Always ask, what research validates the need for this design? What research validates the direction you chose? Research is important when not just defending priority of a change but also the reason behind a specific change. If there is no research in the problem area, this indicates more should be done.
3. Getting feedback from other UX designers, researchers, visual designers and developers is key. Visual designers can put a final polish on a design, and developers can highlight important edge cases and zero states you may not have considered. Developers also like being involved in the design process, since they will be building the designs. Fellow designers can provide critique you may have never seen.
4. Do not leave accessibility as an afterthought. Accessibility is not a checkbox, but a very important pillar of the design process.
5. Look at analogous competitors in a space. While designing, I often referenced tools that were not image libraries. This was invaluable in understanding industry trends and intuitive design.