Self Assessment made simple.

I led the Self Assessment redesign in the Crunch app, giving freelancers and small business owners in the UK a faster and more convenient way to submit their tax return. The team was called “удача”, which means “luck” in Russian, and it was made by one Product Manager, one Scrum Master, six Software Engineers and myself, the Product Designer and a Business Analyst.

What is a Self Assessment, anyway?

A Self Assessment is HMRC’s way of finding out how much Income Tax and National Insurance freelancers need to pay by the 31st January each year. Read this story to see how the Team Udacha designed and built a more user-friendly and modern interface and experience.

Product goals

Two years earlier, we gave a fresh and modern look to the Crunch app, using a JavaScript library called React. ‘Expenses’ was the first part of the app, built using React. In late 2019, the business decided that it was time to rebuild the ‘Self Assessment’ to improve the customer experience and reduce manual effort on the Crunch side.

In particular, we wanted to deliver the abilities to:

• Auto-generate simple Self Assessments within the Crunch system.
• Make the Questionnaire easier to understand and upload, and much easier to edit in future years.
• Save the client time and Client Managers time.
• Bring this functionality to our Free products and Crunch Pro for Sole Trader.
• Calculate Self Assessment in the Crunch Application.
• Pay for submitting their Self Assessment within the Crunch Application.
• Allow client approval through the app, instead of by email.

Making a plan

We worked with the Client Experience team to analyse every user’s touchpoint and interaction with any part of their journey. We decided to break down this large project into three parts: Landing Page, Questionnaire, and Review page.

We then listed all the possible scenarios of each part. This was very important since the user’s journey depends on the Self Assessment’s complexity — including whether it’s included or not in their package. We wanted to have a better understanding of how to approach every scenario and make the experience as smooth and straightforward as possible for all our users.

Landing Page

I started by sketching some Landing Page variations, which included the following elements:

• Next step card: used to indicate the next appropriate Call To Action, depending on the Self Assessment date or status.
• Checklist: used to confirm what is needed before completing the Self Assessment questionnaire.
• Self Assessment summary: used to show the previous and upcoming Self Assessment years.

Initially, I designed a different solution, but we had to make compromises and create the ultimate product.

Here are a few:

• Remove the checklist to make the Landing Page less cluttered.
• Bring some extra resources that could benefit Crunch Free.
• Opportunity to upsell an add-on such as “Ask an Accountant” in Crunch Free.

Questionnaire

At this point, I was using Adobe XD as the quickest possible way to test ideas out. When it was time to design the Questionnaire, I decided to use Webflow as a more effective way to showcase interactions and responsive layouts. A key goal of this design was to display how subquestions would appear when certain elements were triggered.

Along with the Questionnaire, I designed the modals to simulate the different outputs based on the following user’s journeys:

• The Self Assessment is simple and included as part of their subscription
• The Self Assessment is complex and included as part of their subscription
• The Self Assessment is simple and needed to be paid for in their subscription
• The Self Assessment is complex and needed to be paid for in their subscription
• The Self Assessment is exceptions and a quote is needed

Payment

No online payment existed when we started this project, so we had to adjust our plan quickly. Designers, engineers, and product managers participated in several meetings to better integrate the new online payment process. We used a software called Asperato — a product held in Salesforce, and we worked with an external agency that specialises in Salesforce products.

Test, test and test

Usability testing is challenging. It requires you to do a lot of research, preparation, and of course, testing. At Crunch, we love a good challenge, so we tested our ideas until we got them right. As we didn’t have a user researcher in our team, my Product Manager and I conducted usability tests. We discovered that our users showed some challenges while filling the Questionnaire. Here are a few:

• The copy wasn’t always straightforward.
  Action: discuss the new copy changes with stakeholders; test the new copy against the old one.
• When errors occurred on the form, users didn’t scroll to these errors.
  Action: add functionality to scroll to the first error automatically.
• They wanted it to be clearer when items were conditional.
  Action: make it clear that not all of the listed items apply to everyone.
• The distinction between an answered and unanswered question wasn’t clear.
  Action: design an alternative solution for the “FormField” component.

The number of bugs, content changes, and functionalities to fix was quite overwhelming, so we listed and prioritised them in a Google Sheet. Only the most critical ones made it to the Sprint. When you work in an Agile environment, it’s essential to move fast to hit a deadline. Eventually, we updated the design and code according to the feedback, and we moved on to the Review page.

Review page

The Review page shows different information depending on whether it’s viewed by an accountant, client manager or customers. Both will access via the Self Assessment Landing Page:

• An Accountant or client manager will produce the Self Assessment using the Admin view of the client’s Self Assessment page.
• A customer will be able to log in and review on their Self Assessment page.

UX issues and where to find them

I initially designed a solution which showed some issues during internal testing. A front-end engineer noticed that when the page height was low, not all buttons were visible. This problem was more evident on tablet devices. Ugh.

I went back to my Adobe XD file and designed a couple of solutions for the Review Page. Only one made it to Jira Board, which layout was already used elsewhere in the app. That was the perfect solution as it ensured that the product was consistent and it sped up the development process.

Client Manager view

• Full assume mode (can edit self-assessment info): https://xd.adobe.com/view/8002444f-5a77-4a3e-9e38-837f0f25ffd0-d551/
• Assume mode (basic actions only): https://xd.adobe.com/view/b0cb2236-dc98-4887-877a-8f8e09e6d471-e598/

User view

• Awaiting approval: https://xd.adobe.com/view/cb3a0e3a-b1fa-4c1b-b701-c470e3c11ef2-9e69/
• Changes requested: https://xd.adobe.com/view/8e368b9c-22af-4edb-85d5-451eec12d33f-db65/
• Approved: https://xd.adobe.com/view/5169fab9-d038-48a6-a8c4-26141f73aefe-043a/
• Filed: https://xd.adobe.com/view/db48b535-d0d9-47e5-b822-7aeb5b2919ca-8e1b/

The team was delighted by this new solution and tweaking the code didn’t require too much effort. It was fun to see where I could take this design. We were very close to bringing the project over the finish line.

Wrapping up the Self Assessment

That was the story of how Team Udacha worked together to rebuild the Self Assessment in Crunch app. By building a feature that makes submitting a tax return more straightforward, we create something much richer. We created an effective system that allows our clients to manage their whole finances in one place and not have to worry about taxes anymore.

To make the Self Assessment available to all our clients and subscription types, we brought it to Crunch Free for Sole Trader and Limited Company and Crunch Pro for Sole Trader.

I wanted to thank the incredible people who made this project possible. Thanks to Aliaksei D, Sairhei, Valeria, Tseimur, Aliaksei P and Sasha for the high-quality code. Thanks to Scott, Dom and Gabi for managing the project and all the lovely people in the Client Experience team. Thanks to the Marketing team for turning my script into a great case study. Ultimately, thanks to all the people who took part in user testing and helped us improve the product.

Client testimonials

“My account manager guided me through this maze and I can’t recommend them highly enough. They also prepared my self assessment each year with the utmost professionalism.”

“The team at Crunch have been really supportive in solving issues related to my self assessment. I had some issues with getting registered with HMRC, and Olivia Beadle had been really kind and supportive in sorting this out for me in no time. I would highly recommend Crunch for your Self Assessment needs.”

“For the past 8 years they have been fantastic accountants for our business. Very helpful and accessible. Easy to use online system to keep on top of things like self-assessment and invoicing. Recently we bought a house using Crunch Mortgages. They were brilliant and very supportive at every step of the process.”

“Predefined fields required to complete made it easy to understand what aspects of my income are required for completing a self assessment.”

“Simple, wizard based data entry — loads of things automatically filled in for me from my company details.”

“Simplified version of the HMRC form and site. The process worked well end to end. Seemed fairly simple via crunch than when using the HMTC online site.”

Written by Sara Brunettini, Product Designer at Crunch