Setup Wizard
2019
What was this project about?
At Financialforce, we often get feedback from customers that implementation time and costs are too high. Due to having a number of different products, all with different foundations and dependencies, it can be very complex to get multiple products up and running together.
The Problem and Target Audience
The concept of improving the implementation process from the product teams' perspectives was new to us and so this was a bit of a pilot project. The implementation and consulting team were asked what the most painful product(or products) were to implement and so we took this information and decided to tackle the highest voted combination of products first. These were our PSA(Professional Services Automation) product and RM(Revenue Management).
By tackling this problem we would be looking to decrease the time and cost taken to implement customer's products and get the working live quicker. This would in turn improve customer satisfaction and make the lives of our consultants a lot easier.
My Role
This project kicked off whilst I was on the graduate scheme. This would be my first experience of working on a brand new feature in the product team. I worked closely with the PM(Product Manager) and my Graduate Success Coach, a senior UX Designer. The feature crew which was formed to work on this project were based in Spain so it would also be my first experience working with a remote development team.
Discovery
Kick Off Workshop
As a lot of the interviews and information gathering had already occurred prior to joining the team, my first involvement was during the kick off session. This session took place in person in our Harrogate office where the developers from Spain came over to take part.
The purpose of this workshop was to get to know one another a bit better, introduce the problem and to decide on how we begin to tackle it. I helped the PM to facilitate this session as we invited another development team who's remit this work also came under, in order to share knowledge with the new development team. We used a Lean UX canvas in order to structure the session and gather the existing knowledge and come up with next steps.
Next Steps and Handovers
Following this session and introduction to the project, myself and the product manager went away and began to break down the problem. The product manager had already put together a detail user journey map. This became a foundation to begin to mark the pain points and similar problems. Combined with the approach and technology all teams agreed to in the kick off session, we began to build some concepts. At this point I then resumed with the next phase of the graduate program and so handed over the project to the original UX designer.
Following my successful completion of the graduate program, the project was handed back over to me. During my absence, concepts had been developed further and initial designs formed and tested with users. As a design team we used a combination of sketch, Invision and confluence to design, create prototypes and share design decisions and store feedback. This made handing the project back and forth between designers much easier as all work that had been carried out was very transparent.
User Feedback and Changes
At the point where I rejoined the project, the initial round of user testing and feedback had just occurred and changes to the design made. I met up with the product manager to review all the notes and hear first hand any observations she had from each of the 5 sessions. We discussed the changes in design that had been made as a result of the user feedback and finalised them ahead of further testing. I organised and carried out 7 user testing sessions with internal resources (the end users of this feature). A consistent theme appeared in first 3 session. They liked the new design however they expected to see a review or summary page before completing the process. We decided to take action before taking the same design to the remaining sessions and designed a preview final page. We used A/B testing to decide on two different preview page designs as we'd had differing feedback on the summary information users wanted to see. The A/B testing resulted in one design being strongly favoured over the other. Following the next couple of sessions we had a similar experience where both shared the same feedback of the design and then changes were made afterwards. We tested the design changes on the same people who gave the feedback as well as an additional participant and we got really positive feedback.
Design Iteration
The first design (by the other designer) focused on hierarchy and ensuring choice for the user. This is a one page modal design.
The next iteration of the design (designed in collaboration with the other designer), simplified the visualisation of hierarchy and combined it with the selection of objects to have a more simple design. This is still a one page modal design.
The original modal design had a slight tidy up and re-design of the multiselect component and then the summary page was added to create the multi-step experience.
The modal had additional design changes applied following feedback. A path component was used to better communicate to users that there was another page following this one. The multiselect component was redesigned again to simplify and to make it an "opt-in" method rather than all objects being selected in the previous design. This way, users select which templates they want rather than having to unselect the ones they don't. The wording of the button was changed to "Next" to signal the move to a multi-page design.
During development, we found difficulty in providing system feedback to the user after clicking the "Save" button in the previous iteration. To address this, we created an additional page at the end which would act as feedback and provide links to the natural onward steps in the larger process of setting up these products.
This was the next iteration of the summary screen. This was redesigned as the previous design of this screen didn't budget for the possibility of a user selecting all templates and objects. There just wasn't room to display them all so this design made use of grouping and summarising selections. A count was used as participants of the feedback sessions noted that they always knew they had done the process correctly if they had a certain number of templates installed.
An A/B test was run on the above two screens after we received feedback from both the design team and participants, that the previous summary page was a bit too loud. After seeing the design, participants decided that actually the count for each group of templates wasn't that important. They liked the totals for templates and settings overall but not the design of it. I brought this to the design team to ask for previous examples or inspiration. A previous pattern had been created which is what the design on the left is based from, the one on the right was my own creation. The screen on the right was the preferred design in the testing sessions.
The final page in this flow was the success/failure feedback page. In feedback sessions, we asked users "what is the next step in your process after completing this task?". The feedback was pretty split between navigating to the settings or templates page to view and make further changes to the objects they've created as a result of this flow. Participants found this addition really helpful and remarked that they would find it really useful.
Further Feedback and Final Remarks
Two years after designing this, I recently ran some user feedback sessions of this design now that it has been used regularly. This was to review the usability of the pattern and to find out how effective it has been in reducing the time taken to install these products.
The feedback I received was that it is still a really useful feature, both for the experienced consultants and those who are new to the company or product.
"It saves me around 3 or 4 hours which is how long it takes to do this manually"
Overall, this pattern has been deemed to be very successful and is now a commonly used pattern in the design team for setting up and integrating features. Subsequent uses of this pattern in other feature crews all receive positive feedback as it is now a recognised way of installing products.