CLIENT-FACING ADMIN
Redesigning the Client-facing data input Editors* for StudyPortals
OVERVIEW
Redesigning the Editors* of the client-facing administration website for StudyPortals, into modern and easy-to-use interfaces with faster, more stable performance, that support the efficiency of the data entry team.
*Editor is a complex online form where the data displayed on the live websites is entered by clients, or by the internal data team.
ROLE AND DURATION
User-research
Persona creation
Conceptual design
Wire-framing
Prototyping
User testing
April - October 2016 (7 months)
USER RESEARCH
The Editors have two user groups:
1. Internal users, StudyPortals employees.
Although these users would not be directly affected by the redesign described in this report, they represent the “expert users” of the administrative website. They use the website every day, several times per day to update and manage clients’ information. The majority of these “expert” users have memorized the interface and all its possible functionality issues. Therefore, they can provide in-depth feedback on the ideal functionality of the website.
2. StudyPortals clients from Universities around the world are external users
Employees do not always provide the important clients’ credentials to log in to the administrative website. As a result, the clients visiting the administrative website are only a handful per month; much less than needed to ensure the self-sustainability of their data. User research with clients provided insights about if and how clients navigate through the current system, whether they understand the terminology used, and their potential ideal ow when using the system.
User research was performed with individuals from both groups. The insights were organized into two affinity diagrams, one for each editor, seen below.
Based on insights from internal stakeholders, I created four client personas, to get more insights on the demographics, challenges with the current Editors, and possible reactions to these challenges
CLIENT PERSONAS
INFORMATION ARCHITECTURE
Before tackling the design of the different tabs of the Editors, it was important to restructure the input fields in a way that is logical and easy-to-understand for the users.
To facilitate the mental mapping of information between the public and the administrative website, and to increase memorability, the tabs were restructured to match the structure of organization pages on the StudyPortals website.
To determine the most logical way to structure the information of the Editors, a card sorting exercise was performed with four users. The users were randomly selected, through convenience sampling, but covered the age (25-65) and computer literacy range (novice- programmer) of StudyPortals clients.
WORKFLOW ANALYSIS
I sketched out The existing user workflow for both editors to discover the moments when the system failed, requiring refresh, it was too ambiguous for users to understand their next move, or the information available distracted the users from their main task at hand.
I sketched out the new, desired workflow for the editors to identify possible improvements in functionality.
FIRST DESIGN ITERATIONS
I translated the ideas and requirements that resulted from research and ideation into an interface.
First, I roughly sketched low- fidelity paper prototypes with pen and paper, focusing mainly on the interaction.
The sketches representing the most successful ideas I transferred into digital drawings in Illustrator.
All designs were drawn on the 12-column grid that all StudyPortals websites follow. To ensure the efficiency of data input, I followed the form design guidelines by Bargas-Avila et al., 2010, Seckler et al., 2014, Coyle 2016, and I drew design inspiration from Google’s Material Design library (Google, 2014), as well as from other online sources.
At the same time, it was necessary to follow the company’s style guide and color palette. The digital designs at this point only involved the fields and interaction design of the Basic Information tab. Lo-fi designs were most suitable during this stage in the development cycle, as there was a need for a graphical representation of the ideas, but it was not, yet, necessary to create interactive, near-finished products.
To improve aesthetics and visual design, I developed a second series of screens, after receiving feedback from StudyPortals colleagues. The new designs involved all tabs of the new editor. In certain cases, such as the Links tab, the designs depicted step-by-step the interaction flow, while in other cases, where the functionality was similar to previously shown tabs the interaction ow was not sketched.
The results from these evaluations helped me choose and improve the usability in the design.
PROTOTYPING
To evaluate the new design, I prepared a series of tasks, together with their corresponding pixel-perfect screens. For hi-fi prototypingI used the JustInMind software.
HEURISTIC EVALUATION AND USER-TESTING
The first Editor was evaluated in the following ways.
RESULTS
Heuristic evaluation results
Usability evaluation results
VISUAL DESIGN AND COMPONENTS LIBRARY
Based on the initial findings from the user research, and all user evaluations the next Editor followed the layout of the first one, but the UI design was updated and rolled back to the first Editor. To create and maintain consistency of the design of buttons and fields within the Editors and the administrative website, the following style-guides were created.
Input fields
Buttons
PROJECT LEARNINGS
Further improvements followed, fitted in the regular development process of the scrum team responsible for this part of the product. The key take-aways:
1. Simplicity is always the best
As designers, we are often lured by attractive, trendy, and out of the box designs. But, we should always remember the ‘why’. The primary goal is to understand the user, their problems, and then come up with a design that solves it.
2. Keep users happy
This was a big project, which affected not only internal stakeholders but also external users who are the key collaborators to the company. Although our clients wanted this change for a long long time, it was crucial to slowly update their interface in order to flatten their learning curve. Yet, it was important to keep them involved and excited about the big changes we were planning.
3. Test as early as possible
Even the smallest increment should be timely tested, if not with users, then with various stakeholders. People from different disciplines can offer valuable knowledge on the design process, based on their previous collaborations.
