Symplectic Elements
Introduction to Elements and my role.
Symplectic Elements
Elements is a scholarly information management system, allowing organisations to collect, analyse, showcase and report their scholarly activities. Elements is used by Universities and Research Institutes all over the world, serving over 350,000 users.
My Role
Initial research with current users and scoping workshops were undertaken in 2019 to set out a vision for the next iteration of the Elements platform. My involvement started in early 2020 when I was brought in as a UI/UX Design Intern to assist the Senior UX Designer. My initial contract was for 3 months which has since been extended twice, now into its 9th month.
My role has been principally as a UI/Interaction Designer, working closely with the wider development team including Product Managers, Developers and QA.
Challenges and Successes
I faced the challenge of learning about this extremely complex SaaS product, understanding the different users and then integrating into a new team. I also had to learn how to use new design tools in order to be able to effectively contribute to the successful redesign and launch of Elements v6.
For this role I have learnt many new skills, not least improving my visual design and understanding of UI design principles. I’ve been able to learn how to use Adobe XD, Illustrator and Photoshop to become proficient in each.
I have been able to successfully translate user requirements, sketch and develop numerous creative solutions to page redesigns and task flows undertaken by users.
Below are a few examples of the work I have undertaken, including my process for approaching each task, the difficulties and the outcome/successes.
Redesign the impersonation user flow.
Brief.
As it suggests this feature allows a user to impersonate another user and undertake tasks on their behalf. Typically this would be an Administrator who would ensure a Professors profile is kept up to date.
The brief was to update the current impersonation design and user flow, maintaining the same functionality of being able to search and select users, switch and end impersonation.
Research suggested that this functionality was causing some frustration by removing the user from their current task to impersonate a new user and then not returning them to the current page.
Design Process.
Understanding
The first step was to understand the different use cases, who undertakes this task, why and how often. I was then able to take this and create a list of requirements, this included keeping the impersonation functionality on the page the user currently on.
Ideation
I followed this by sketching ideas and user flows. The search functionality needed to work as a ‘quick search’ and a more in depth search. I also needed to work through how I would show this on the page, also allowing the user to switch and end impersonation without interfering with the page the user is engaging with.
Biggest challenge / failure
The biggest failure, and ultimately what stopped this being implemented for the first release was the technical requirements. Not getting a developer involved in the conversation early enough in the process meant that when I presented my ideas there was disagreement in the direction and the ability to complete the technical work within the timeframe required.
Outcome / success
The design was refined and presented to the wider team, technical requirements meant that the new design could not be implemented in its entirety, however the new ‘impersonation mode’ frame has been implemented. The new search and impersonation user flow will be implemented in version 6.1.
Homepage Editor.
Brief.
This was a new feature that allows a user to add, remove and rearrange tiles on their dashboard homepage. This needed to be created in the same style as the v6 redesign and should be fully accessible.
Design Process.
Understanding
A developer had created a working prototype before I had been asked to design the UI, so I had a lengthy conversation to discuss technical limitations and any further requirements. The prototype included a drag and drop feature and accessibility controls.
Ideation
I was able to sketch some initial ideas, considering the core functionality which must include the ability to rearrange the homepage to include the available tiles the users wish to show. I wanted to ensure the user had a preview of their homepage, I also wanted to show the available tiles, let the user edit, save or cancel their changes.
Prototyping
Two options for the tile design were considered, either to render the actual user content, blurring the background to emphasize the users selections. The second option was to create illustrative versions of the tiles which could be used for all.
Sharing with the Product Manager, Developer and Senior Designer it was agreed the illustrative approach would work best, reducing loading time on the page and providing consistency with the onboarding process which also include illustrative page designs.
Mock up and hand off
I created a mock up of the page using Adobe XD, utilising the developer mode to share the design with the lead developer. I was also able to create SVGs of each of the illustrative tiles using Adobe Illustrator and XD, again handing these off to the developer.
Biggest challenge / failure
Creating an accessible design that would provide the user with a preview of their homepage but also allow them to quickly view and switch tiles. By making the preview the working ‘canvas’ this would allow the user to see their changes in ‘real time’. There was a challenge in ensure all the content could fit side by side. Having the disable tile panel below the canvas meant it could get lost and user would need to scroll to view the tiles they could swap. This wouldn’t provide a good experience when dragging and dropping in place. Instead I designed it so that the panel and canvas were side by side by each could be expanded to show an enlarged view and give the user a better sense of the tiles available to them.
Outcome / success
The design incorporates accessibility controls and allows users to drag and drop from the panel next to the canvas. This is provides a real time view of how their homepage would look once the changes are saved. Now handed-off to the developer I am working closely to ensure the design is implemented accurately.
Default colours.
Brief.
I was tasked with creating a colour palette for Elements default label schemas. This required a dark logo and light background colour for each of the 12 schema.
Design Process.
Started by working through different variations of colours that could work as a set, distinctive but feel like they’re within the family. I used an arc to choose the two colours for each set, moving along the arc to soften change the tint.
Initially needed to consider a foreground / icon colour and a lighter variation for the background. My first attempt, I created an initial colour palette and shared this with the wider product and development team. Although received well there were questions about accessibility and the use of two different colours for each set.
I did some research into accessibility requirements, looking at WCAG 2 contrast and colour requirements. I was able to determine that as this was a graphical object that is not ‘required to understand the content’ i.e. the Schema name and link were used in conjunction with this icon/colours set then this does not need to fulfil the contrast ratio accessibility requirements. Having said this I still wanted to ensure a strong contrast between the icon and background colour.
Biggest challenge / failure
The biggest difficulty faced was presented when the Developer highlighted that as he was dealing with dynamic SVGs he could only change one colour. This resulted in rethinking the colour palette, taking the darker colour and creating a contrasting background that was a 10% tint. This provided consistency across the colour palette and solved the issue with the dynamic SVG as a tint could be calculated from the SVG colour.
Outcome
A colour palette that the Product Manager was very happy with, doesn’t include any of the Digital Science or Elements branding colours, avoiding confusion or assumed ownership. Each set has a background tint which allows for the dynamic SVG to change colour when selecting different schemas.
