Dates:
Jan 2016 – Oct 2016
Skills:
Agile/scrum
Rapid prototyping
Wireframes
Design reviews
Comparative analysis
Usability tests
Software:
Axure RP
Trello
ReadyTalk
Collaborators:
eScholarship product team
User experience design team
Progress:
100%
eScholarship is an open-access reading, searching, and publishing platform by and for the University of California (UC) community. The application works similarly to YouTube, where users can publish and view content: UC scholars can publish their scholarly work, while readers from around the world can view it.
Due to the UC open access policy enacted in 2015, UC faculty and other employees must provide a copy of their scholarly work for inclusion in eScholarship unless publishers prohibit them from doing so.
The goal of the re-design was to update the look and feel of eScholarship’s user interface, expand its functions and features, and make the application responsive in order to have a uniform presentation and appearance across devices.
My role as an interaction designer was to create the website’s schematics, which included the information architecture (content and layout), workflows between screens, and prototyping interactions. The direction from my team was to create medium-fidelity/just enough wireframes to discourage wasting time on the perfectionist polishing of deliverables.
With Axure, I created 150 responsive, medium-fidelity wireframes with complex and dynamic interactions for desktop, tablet, and mobile viewports.
I used dynamic panels, incorporated motion design, and used masters for common design patterns. I also annotated the wireframes with detailed notes to make it easier for developers to understand the underlying intent and ensure that they could work as much as possible without stopping to ask for clarification.
Agile is a pure software development framework and does not specify how UX methodology and agile should play together. While agile works for relatively simple applications, more complex applications need to be fleshed out by prototyping. Prototyping addresses one of the major flaws of waterfall by allowing stakeholders to visualize the application and understand how screens and widgets will interact.
The combination of user research, collaboration, and prototyping is called UX waterfall. UX waterfall allows stakeholders to digest and come up with new ideas, incorporate new insights, and establish their own points of view before committing to designs. At UC, UX waterfall has allowed stakeholders to make changes quickly and inexpensively to minimize the amount of work being done and redone.
Each week, I scheduled a design review session, in which product managers, and occasionally the development lead, could review previously assigned work and assign new work.
I published the wireframes on Axure Share several hours before each meeting to allow everyone an opportunity to inspect the changes at their own pace. I also emailed an agenda along with any questions that I had. During the meeting, my role was to walk through the previously assigned work so that the team could give feedback.
Once the previous week’s work was approved, product managers assigned new work, and I created a list of everything that needed to be done for the new sprint.
After the meeting, I typed the detailed requirements into Trello and groomed the notes. I then emailed the product manager to have her verify that the requirements were complete and accurate.
Since I was not a part of the user research for eScholarship, the product managers were the users’ voice.
Ninety-eight percent of page hits for eScholarship come to the “Item view” page because users come in from search engines looking for specific content.
Notable features that consistently remained prominent included (1) the ability to return to the eScholarship homepage by clicking on the eScholarship logo, (2) the ability to search eScholarship, (3) breadcrumbs showing users exactly where they were on the eScholarship hierarchy, a search box for articles on eScholarship, (4) a button to download articles, and (5) a button to share articles by email and on social media.
Without user research, it was sometimes difficult to communicate visual hierarchy to the end-user. For example, I was unsure about the importance of the (1) reuse license, (2) language selection dropdown, and (3) “Related items.” It was also challenging to assess the value of the “Deposit/Publish” button on the tablet and mobile wireframes, given that the user will have limited access to input devices such as a mouse or a keyboard to input metadata.
Since eScholarship users use a variety of devices, our team wanted to ensure that users would have a consistent user experience across all devices.
Responsive design hinges on three technologies that enable its usage:
1. Fluid grid = containers resize based on the viewport width
2. Fluid images = images resize based on the viewport width
3. Media queries = the layout changes when certain conditions are met
My role as the designer was to create layouts representing the approximate “breakpoint” for each viewport width. With decreased screen real estate, I had to decide what was most important at each viewport width and make hard choices about what was visible and what was not.
Our team aspired to meet or exceeded WCAG 2.0 standards, in accordance with the American with Disabilities Act of 1990, and to meet our obligations as a recipient of federal grants. Compliance meant that our team could avert unnecessary risk.
As the person doing the wireframes, I was at the top of the workflow for driving accessibility. I attended trainings and researched this standard.
To make sure that users with vision impairments would still be able “see” form metadata, I worked with software developers to ensure that the labels could be presented off screen, so that screen readers could still “see” them.
For users with mobility impairments, I made sure that the user would be able to tab through all of the forms consecutively without a mouse.
Universal design posits that designing for accessibility has positive side effects for all users. For example, having better webpage metadata is better for search engine optimization, and being able to tab through forms is more efficient for people who are entering data into multiple fields.
Once the medium-fidelity wireframes were complete, we performed usability tests on the wireframes with multiple target users to validate key use cases and ask questions we were unsure about. If necessary, we changed the wireframes based on the feedback. Only when the wireframes passed the usability test with sufficient confidence did the team move forward into visual design and development.
Once my wireframes reached a sufficient level of buy in from product managers, the team sent my wireframes to an outside, contracted visual designer, who put a refined visual veneer on key screens.
The development team used my medium-fidelity wireframes and interpolated the styling from the visual designer’s mock-ups to understand the final specs for development.
The redesigned eScholarship has hundreds of thousands of articles, has been deployed and in production since 2017, and has received millions of views worldwide.
© 2024 · Robert Wang.
