First Stage - Research

Before anything, we analysed the data that the client had provided us with as well as the multiple different user journeys which needed to be considered on the prototype. As you can see below, the first image displays all the different user tasks and different user needs at each stage of the prototype.

Following this, we split the data into a dashboard on a Miro board, which then we displayed to the client to then find the relevant action points at each point as well as find the unnecessary actions which would be carried out outside of the digital prototype. (Teal showing questions we asked beforehand, Orange being information provided via questions, & Purple being information/actions that are off prototype). We then refined the board again into the finer details and actions which would be needed in the prototype and organised them into the correct stages as you can see on the third image.

Finally, we then tackled the initial screening process of the prototype, which here the Project Developer will be inputting essential screening information for the Xilva employee to then decide if it is a project that they would like to continue working together with.

Second Stage - Low Fidelity Wireframes (Sketches)

After finalising the user journeys, I then started working towards creating initial low-fidelity wireframes through sketches to then present to the client from start to finish of the two different key user journeys (Xilva Employee and Project Developer)

As you can see below I created the full journey, in low-fidelity sketches, starting from the landing page where the PD would get in touch and submit their data for initial screening. Following this, the Xilva Employee will be logging in and then be able to navigate through the gated content on the prototype. Shown with this you can also see a filtered project archive and capital provider area.

The next stage of the XE’s (Xilva Employee) journey is the actions available on each project request. Here, they can either Get in touch with the PD, Decline the request or Accept the request. I also implemented the Calendly 3rd party tool into the sketches/prototype here as per the client’s request, which allows the XE to submit their available time to the PD for them to select slots and organise a meeting.

Following the acceptance of the project, the PD will be submitted a login for them to access the backend dashboard to get started on the submission of data to continue with their journey. Once logged in, the user can see all of the projects that they are allocated to (As one user can be on multiple projects) as well as an overall activity log showing all changes and actions across the projects.

The PD also has the option here to view notifications and alerts, as well as edit the project’s settings, which is where you can provide a primary contact and a secondary, as well as allocate users to each project.

The PD’s view of the Project displays a welcome message, project status, each individual content category status, CTA to ask for help, which is finally followed by the tabbed content area at the bottom of the screen displaying data assessments, feedback and activity.

The final sketch shown on this screen is once the user actually clicks through onto one of the content categories, it opens up into a new screen which displays all of the required fields and suggested additional fields with the relevant CTA’s shown. For Example, the first field displays that the content is approved so the only available CTA’s shown are to view the history of the field and the option to edit which would then re-submit to the XE for approval, or we have the second field which is a bit more detailed as it displays when the XE has actually given the PD feedback, so here we have the option to view the feedback, query the feedback, view the history of the field and finally update the field.

Following the above screens, the following set we can see is actually in the view of the XE. Firstly their view on the Project itself, here it is very similar to the PD’s screen, except we have reversed CTA’s on each of the fields but also allowed the XE to be able to edit/upload documentation to each field as this was a key requirement from the client as they could be discussing elements on a call/meeting so the XE can just upload as they wish.

The “Xilva - Approve Project” screen we see below, actually displays once the required documentation has been signed off after multiple rounds of amends and feedback, so and finally multiple Data Assessments have been signed off, which will then allow the XE to push the project live for Capital Providers to get started with their discussions and meetings with the PD & XE.

Following this screen, we can see the view of the PD once the project has been set live. The content categories and status layout stay the same, however, now we can see an inbox top right of the screen, as well as the new capital providers area which is currently active on the “Suggested” tab where the XE will forward capital providers to the PD.

On the next set of screens, you can actually see how the PD can filter through the different Capital Providers if they were to use the “Browse” tab. It is important to know that the PD cannot actually interact solely with the Capital Provider at this stage, as it was a requirement that the XE is actually the one who will organise the initial screening meetings and first round of calls.

Final Stage - High Fidelity Wireframes (Figma)

Lading Page - Screening Information / Input Field

These are the final wireframe screens that were created for the client around the landing page and initial account fields. Here you can see the landing page displays some brief information to introduce the user as well as a CTA front and centre so that the user can be anchored straight down to the input field to begin their journey.

The input field displays the mandatory input fields that the user must complete in order to submit their application. I have also created an active state for the tabbed system at the top of the screen to easily differentiate what user journey is beginning, as well as a dropdown for the Certification Type.

The client explained to us that if we were to use the certification number/code the user provides us, we can actually find out quite a lot of information online which could simplify the journey down the line. Taking this into consideration, I created a pop up to inform the user that if the certification number/code was authentic, as well as if their application was successful, once logged in they can use this code to automatically generate data for the input fields required to push the project live (Which can be seen below on the PD screens)

The two final screens for this area are displaying the input field for creating an account, which is a link that the XE will submit to the PD if the application is successful, and finally a login screen.

Final Stage - High Fidelity Wireframes (Figma)

Xilva User Journey

Below are the final screens for the Xilva Employee’s user journey from start to finish of the prototype. Firstly, we can see the high-fidelity screens based on the sketches that I created before to present to the client. Here we can see the dashboard, project archive, project request and finally the actions available to respond to the request.

After careful consideration and research into the functionality of the status wheel we had included in the sketches, we decided to change the status design to move to stages as we would need to allocate different weights to each of the input fields/categories and these can change rapidly depending on the different stage of the data assessments. Having the projects now display stages simplifies the journey and needs no explanation for either user to understand where the project is currently set and where it is headed.

The next set of screens we can see are the improved designs of the project dashboard in the XE’s view. The top of the screen now displays a tabbed system for the user to easily navigate through the whole project as well as easily being able to see the notifications for each area. We decided to change the layout of this page due to the nature of the categories now becoming a dropdown upon click, so having multiple different content areas below this can increase page load time as well as create quite a data-heavy screen for the user which can be overwhelming.

You are greeted front and centre of these screens with the stage bar followed by the new imported “Xilva Star” progress bar which displays the completion across all fields on the project (As not all fields are required but completing all suggested fields as well as the required would essentially make the user a “Star”). Underneath this, we now have the content category fields which upon click drop down and show all of the relevant fields for the user to use as well as use the corresponding CTA’s on each field.

As you can see on the screen which displays the active state for the “Additional Information”, we also have allocated an input field for the XE to input overall feedback for that category so that the PD can view this easily front and centre and action accordingly.

The final screen on the second set displays once the PD has uploaded all of the required information in the input fields, and then requests a Pre-Screening assessment from the XE to further their project towards becoming live. Once the XE is ready to create a Pre-Screening assessment, they will click the CTA and move to the final set of screens shown below. Xilva explained to us that their current process at this stage is to grade the project on different categories in a spreadsheet to generate scores for each area. For the prototype, we integrated a functionality where the user can upload the spreadsheet to the prototype and it will generate the scores and also create a radar graph as we can see also in this set of screens.

Alternatively, the user can use the line chart we have created to manually input the scores and potential scores for the PD user to view once the assessment has been completed. As this assessment is also to be used for guidance and suggestions for the PD to improve their data, we also have included two input fields for the XE to explain the actual score as well as how the PD can improve to get the desired potential score.

The final screen we see here is once the back and forth feedback and assessments have all been completed and the XE can actually change the project’s status to live so that they can begin the journey of getting in touch with Capital Providers and having discussions about investments (Not included in this prototype)

Final Stage - High Fidelity Wireframes (Figma)

Project Developer User Journey

The first set of screens is introduced by the PD’s view of their dashboard once logged in. Here we have two examples of projects that they are assigned to currently and working on, as well as two Xilva contacts displayed below with the information, expertise and projects that they are working with the user on so that they can be differentiated easily and also have clear communications. The dashboard now also displays a tabbed view top of the screen for the user to easily navigate throughout the available pages.

Again, we have now shown the functionality of editing the projects settings where the user can add primary/secondary contact information, allocate new users to the project and edit existing user information.

Once the user has clicked through to one of the projects that they are currently working on, they will be taken to the individual project page which now displays a different navigation at the top, return arrow above the title for easy navigation back to their dashboard (Which can also be met by clicking the home icon in the top navigation bar).

Following the Data Generation example, I explained in the initial screening input form, here we can see the functional piece shown front and centre of the project for the user to actually activate the data automation, which upon click will remove the pop-up we see and start inputting data to the various fields. Once the PD clicks on one of the categories, you can actually see the fields where the data has been generated and to make sure that there are no errors from the automation, we included an “Approve and Submit” CTA to the corresponding fields in case there were any mistakes.

On the fields in each category, we can see that they all have different coloured statuses to make sure that the user can easily see how the documentation has been actioned from either user, as well as displaying the appropriate CTA’s to continue with the journey.

Finally, in the second set of screens, we can see the view of the PD once all of the required fields have been actioned and also signed off by the XE. Here the user can now request a data assessment for the XE to carry out and then allow the PD to continue with their journey if successful.

Once the Data Assessment has been carried out and submitted by the XE, the PD will see the Pre-Screening feedback below the category fields with clear instructions on how to find out more information about the scores provided. Once the user has clicked on the “Data Assessment field, here we can see multiple different accordions which once active, will display the scores and feedback that was provided from the XE on how they can improve and get the optimal scores.

The final set of screens we have below is displayed once the project has actually been set live after numerous rounds of feedback and meetings with the XE. Here we now can see, that the previously locked Capital Providers tab at the top, has now become active so that the PD can explore the available Capital Providers in the prototype, filter through the numerous different categories and once they have found a capital provider that they might like the look of, they can then submit to the XE to arrange a meeting to begin that side of the journey! (Again, the Capital Provider journey was not included in this set of sprints / this stage of the prototype)