Contractbook is a software business enabling organisations to manage their contract lifecycle. Users can create draft contracts, share and sign them via digital signatures. This enables users to streamline workflows, avoid errors and scale legal operations.
This project was to review the current Contractbook experience for new users. Propose improvements to enhance the user’s first impressions of the platform.
A focus must apply to the current product's user interface and design system. New design components can be introduced based on design decisions and assumptions.
I began my discovery process by exploring and analysing the current product. I employed the Double Diamond model to structure my work. I presented my findings in two groups as positive elements and areas of opportunity.
A positive tool I found focused on new users were video tutorials. These show a short demonstration of key features in action. The videos help to gain a concise overview of the platform.
I found the introductory tutorial video missing when exploring different user profiles. This meant the video was only shown once on the user's first login journey. No replay function was available for user whom missed information or needed a recap.
My assumption was this might be a quick win: by making the video repeatable to a new user's needs.
The on-screen tooltips were an excellent opportunity for development. These described or explained the different content presented. This was especially effective on the homepage.
I wanted to consider if the tooltips might be organised specific to a first time user. Might they be shown in sequence to introduce each feature or display of information?
I next conducted a series of three user interviews with first time users to Contractbook. This would better expand user empathy and grow understanding around their needs.
I could then converge ideas from the research process. A goal was to form a common user persona to fit the business case.
The interviews were a key exercise in understanding user goals and behaviours. I wanted to test my own assumptions about how intuitive the software was at present. Many useful questions where asked about the current layout and workflow.
An emphasis on wanting to quickly learn the software was shared by interviewees. This was easy to understand for professionals working in collaboration under time pressure.
More explicit direction to this challenge would need design development.
A user persona would help to focus my next design developments. I created a synthesis of the collected insights and information I had captured.
One specific interviewee raised relatable working scenarios that were important to emphasise. One key example is if many directors are each required for sign-off on contracts. This in turn reduces efficiency if a director's computer literacy skills are low.
By conducting the interviews, I had built a more comprehensive and informed understanding of my target user.
With my research and persona formed, I next would diverge into the designing process. I used the product's design system as source for building specific components. I would iterate on different versions through the active process of development.
My initial intention was to expand on the present tooltips within the homepage. I would add sequential information as a feature is demonstrated.
This way the homepage's layout deconstructs for deeper explanation in smaller steps.
The existing page header component was advantageous for starting the walkthrough journey from. This made sense to position a new call-to-action message with the welcome indicator.
A clear proximity to key features makes this easily accessible for new users.
I aimed only to use pre-existing elements within the design system where possible. I would (if needed) next create new components to fit specific design specification.
The Figma file above includes the components specific for executing the walkthrough journey.
New components would reference current items for consistency with the established design language.
In the example above, the current "Navigation/Page Header" component combines with two unused colour options. I considered and applied available options first, before reasoning to introduce new foundational elements.
I checked my typography for accessibility with the colours applied. In this instance, both of the design system's existing colour options failed testing.
Therefore, I saw importance and good reason for introducing a qualifying new colour.
I applied a new purple tone distinct within the current design system's colour palette. This tone scored high within accessibility testing.
This could become an identifying colour within other components of the walkthrough journey.
In this initial user flow the CTA button would appear within the page header component.
New users can access the walkthrough journey here for repeat viewings.
This modal fuses a combination of visual elements from a range of components. Working in this way saves time by using the design system as source material. This in turn helps to match new designs for visual consistency.
Adding the modal as a pop-up window will introduce the walkthrough journey. This communicate to new users a risk versus reward scenario.
This means users can judge the amount of their time that is needed, versus what they can expect to learn in return.
I had found the tooltips a simple but useful element within my research process. I intended to build on this to not only use for feature descriptions. I aimed to guide the user through stages with explanations of what is happening at each moment.
By combining icons and pointers to the existing design more flexibility is made available.
More information can reveal through a sequence of demonstrated steps.
By developing this series of new components I made a prototype of my walkthrough journey. This first prototype is for testing purposes with internal and selected stakeholders.
The Figma file is linked within Maze.co to generate a shareable test for capturing feedback and data.
At this point, I stepped back to observe my developments. I was curious if I could expand on the components developed to add further advantages to the user. I reflected on my discovery process, findings and user persona.
I returned to the idea of the tutorials and if these could improve. I questioned the visual hierarchy of the screen when these are being played.
Though helpful in content, the display of the content is unpractical in application.
Currently, the video's on-screen subject reduces in size through a series of windows. This means the user cannot see to reference their own display.
My assumption was users will want to cross-reference the software with the tutorial.
I benchmarked products with a mini-player feature such as YouTube. Here users have more flexibility to size and position videos with other on-screen content. My assumptions were also formed from my own experiences with e-learning websites and tools.
I developed sketches of how might a new visual hierarchy distribute what is seen on-screen.
With this concept defined, I iterated on the prototype to combine a tutorial video modal. The instructor directs the user to specific tasks and actions to do for themselves. Additionally, tooltips synchronise with the video's context and content.
This will enhance the experience to inform and deliver key instructions.
The video will pause in tandem to the instructor setting a task. Next, the user can interact on-screen with a specific element. Once achieved, the tutorial will continue with the next step of the process.
Now the user will be performing tasks themselves. This way they interact with the software, not only absorbing the verbal instructions. This gives a deeper, more active way to retain new information.
I continued to observe products that communicate this learning experience in great ways. The video platform in the ProtoPie Academy is an excellent example. In the series of video tutorials different points include bookmarks. Users answer questions and perform task to move to new learning chapters.
Additionally, I evolved the walkthrough journey components to reflect a new Contractbook brand identity. This incorporates newly developed illustrations and colour palette.
The illustrations could animate to add character and more interactivity within the journey.
This project received positive responses when presented to my design and product teams. Teams felt the initiative of the tutorial video player had strong value to new users. What I had developed extended beyond the current experience.
The next challenge would be in front and back-end implementation. This required technical feasibility scoping with the developer team. A goal was aligning new components to the product's existing Pendo integration. This platform manages the product's current tooltips where video content is needed to integrate together.
User onboarding and education is a critical aspect of a product's success. I would love to execute this project further aligned with the business goals.
