A redesign of Axis Workshops
A journey into Axis Workshops’ registration and onboarding processes.
The Project
This was a 3 week design sprint embedded within the General Assembly UX Design Immersive course that I was enrolled in.
Our client was Axis Workshops — a platform that encourages collaboration and efficient decision making within facilitated workshops.
I worked in a group with Ibolya Olah, Emily Munday and Robbie Cook.
We worked evenly and equally, with everyone being given a chance to have an input across the design process. I worked mostly on the research, the wireframing and the presentation.
The Brief
The brief changed over the course of the project. At first our aim was to make the platform more intuitive, but after further discussion Axis decided to focus on redesigning the platform themselves, whilst we worked solely on the registration process.
However, after tackling this for a week, we agreed that the registration process was not a broad enough scope for us, and we were once again given the green light to work more broadly across the registration, onboarding and platform itself.
Research
Axis provided us with data from their registration analysis (see diagram below) that showed a drop off rate of 65% during the registration process — i.e. 65% of users failed to complete it.
We also shared a survey which received 150 respondents, with 97% stating that they wanted to complete a registration process in under 2 minutes. In addition, 68% of participants cited ‘inputting unnecessary information’ as their main reason for frustration during a registration process. Users also stated that being able to sign up through a third-party would speed things with Google overwhelmingly being the preference.
Furthermore, after testing the current Axis product on 8 users, the frustration centred around similar issues. Users felt it took too long, they felt they were inputting unnecessary information, and they felt slightly confused about when they were actually going to be ‘registered’. One particular user stated:
“You have to do lots of work for them before they have anything to offer you”
After examining a few indirect competitors such as Meetbutter, Airtable, and Asana, we saw that most registrations allowed for all information to be entered on one page. In comparison, Axis had split their registration process over several screens. Competitors’ respective registrations also took less than 1 minute, whilst Axis took a little longer than this.
Design
Once we’d gathered insights from the users on their pain points with the lengthy signup process, we moved onto the design stage. With our early sketches, we decided to place the password and the email inputs on the same page, solving the problem of the lengthy, split-up registration process.
The feedback from 3 users for this initial sketch was that it ‘worked’ but the ‘get started free’ was not a choice of wording that they would have.
“If I’m signing up free then that would suggest there’s an option to pay as well, what am I paying for and why can’t I see that on this page?”
We drew a more detailed sketch of the registration, fixing these issues, and this time also ensuring that users had the option to sign up with Google. As mentioned before, this was recommended by multiple people in the initial testing. We further tested this model with 5 users and received positive feedback, with the speed and clarity now being rated highly.
Once users had made it clear that they found our designs intuitive, we decided that we could move into a mid-fidelity mock up. The only thing that still needed changing was ‘let’s go’. Users wanted it to say ‘sign up’ to keep it as simple as possible. It must be said that with a more complicated design, more paper wireframes would perhaps be required but it seemed superfluous at this stage.
Once we had created our mid-fidelity version, we tested it on 6 users. The next issue arose once users had clicked ‘sign up’ they were taken to an email verification page. One user immediately made a helpful suggestion to add the option of a ‘shortcut’ selection of email providers.
This would potentially improve speed, but would also make things more simple.
“Rather than having to go to another tab to find your email perhaps you could just open it straight away?”
Above are our 3 ‘shortcuts’ to email providers. We chose these three as they were the only options suggested to us when we ran it by users. Again, Gmail was overwhelmingly what users wanted which is why we put it first.
With these recommendations implemented, all that was left was our final high fidelity design. Users stated that they understood the entire process and that the site seemed professional and easy to follow.
Below is the example of the email links, followed by what the actual email would look like once you’ve gone into your inbox.
After another round of 5 user tests, we were receiving little to no feedback on any UX decisions. Users were happy to offer their two cents on UI and we did have a laugh about perhaps implementing biometrics, but knowing full well that we didn’t have enough time in the project to tackle such complex ideas.
Change of plan
We had reached the above stage after 10 days and after testing our registration designs on so many users, we were able to conclude that people found it intuitive and it ‘worked’.
Of course, it’s always possible to dive even deeper in pursuit of perfection, but after several discussions with Axis we were in agreement that we should revert to the original brief for the remainder of the project. This meant that we could move beyond the registration and we could focus on designing what happens when users reach the landing page.
Research… Again!
This stage of research was slightly less thorough than the registration process as we were far more pressed for time. However, we were still able to conduct 8 usability tests and 5 interviews.
The key findings from this research centred largely around terminology and navigation. Users found the current designs somewhat unintuitive because they didn’t understand the language on the page, they were unsure of where exactly to look, and what exactly to interact with. Indeed, this was evident in one user’s real struggle:
“This page is very overwhelming, I’m not too sure where I’m supposed to be looking”
We decided we had to create a problem statement to really nail down what exactly we were going to solve as a team.
Users consistently stated that they didn’t know what a ‘workshop’ actually was, so we concluded that we needed to create a persona of someone who was visiting the site for the first time, who wanted to ascertain if the site would be useful for them.
Meet Claire:
Claire’s statement is as follows: as she is pressed for time, she needs to efficiently determine whether the product is something that she is going to be able to use for business.
Whilst a speedy registration plays a part in convincing a user, successful use of the platform itself is what will convince her to actually come back for more. This was backed up by the data:
Axis informed us that 95% of users who did complete the registration didn’t complete a workshop.
It was clear that the platform needed some tweaks to highlight its value.
We split this into two parts: the homepage and the landing page.
Homepage Design
Whilst the homepage is in fact the first page a user will see — before the registration even — it still plays a vital role in a user’s understanding of a product. We know that human beings have a narrowing attention span:
https://www.sciencedaily.com/releases/2019/04/190415081959.htm
Therefore, even if it is the platform that users will be actively interacting with, the homepage needs to make a good first impression. Users will simply turn away if the first thing they see doesn’t have the necessary content.
We tested the page with 12 people. Users were generally confused by what exactly the value proposition was, so one immediate conclusion was that we needed to simplify and demonstrate what Axis have to offer.
In the current model there are three buttons in the top right hand corner, but users found this unintuitive:
“where exactly do I log in?”
Without going into detailed wireframes, we began to quickly sketch some potential solutions to these issues:
After a couple of rapid tests, we found out that users now knew where they were going to sign in, but that the terminology still didn’t really show where they were going to navigate next or what the product was going to offer.
We started to make some adjustments based off of this feedback. We moved into very low-fidelity due to our lack of time. As can be seen below we changed the ‘try for free’ to ‘log in’, as this had caused confusion — users did not know where ‘try for free’ would take them.
As previously mentioned, terminology was generally a problem. The current site suggests that Axis are ‘reinventing workshops’ but as one user put it:
“They say that they’re reinventing a workshop, but I firstly don’t know what a workshop is, and secondly don’t understand what they’re actually offering me”
This was a difficult issue to navigate because Axis made it clear that ‘workshop’ was something that they would like to keep. Specifically within the business strategy of running and facilitating workshops to come up with solutions to complex issues, it is a commonly used term. So for their market it did make sense to keep it. We therefore tried to hone in on what specifically the product was going to offer. One senior member of Axis had stated that the different ways of running workshops were a strength of the product, as well as the product’s capacity to value every participant in a workshop equally. He stated to us:
“We’ve all been in a room where the extroverted or obnoxious people speak up the most, and the introverted expert is stuck at the back of the room, unable to get a word in”
We therefore tried to implement some of their suggestions on the homepage.
Another pain point identified on the homepage was the video that Axis currently have. Its intention is to explain the product to first time visitors, but during our 12 user tests we were repeatedly informed that the video left users none the wiser as to what the product was going to offer. A couple of users suggested that the video should be a tutorial, rather than a brief explanation of the business.
So we inserted a video of Axis’ product in action.
Below we can see a large part of the homepage, with our key amendments. Testing this final iteration on multiple users, we were informed that the navigation and the video were very clear, so we feel as though we did take significant steps to improving the UX on the page. One negative was that users still had a slightly difficult time in understanding the terminology, although it must be said that this was significantly decreased in comparison to our initial testing.
Landing Page Design
Once we had resolved many of the issues on the homepage, we needed to work on the landing page. We now had a flow which ran through past the registration, but we needed to understand what pages we were going to design. Considering users stated that they did not understand what the product was offering, we decided that we needed to have as much of an ‘onboarding’ as possible.
Our final user flow looked like this:
In terms of our designs, we knew that we needed to make the navigation easier. Users simply did not know where to look when it came to the landing page. To reiterate a previous quote that I shared:
“This page is very overwhelming, I’m not too sure where I’m supposed to be looking”
The main issue identified was that there were no clear calls to action.
As we were pressed for time, our ‘rapid sketching’ was done digitally. I am a firm believer in the efficacy of paper wireframes but in this specific instance we had to make a collective decision to bypass them.
Below is a lo-fi mock up of how we first envisaged the landing page. In response to our user tests proving that users felt overwhelmed, we wanted to implement far more white space onto the page, with a clear navigation at the top.
The current site takes you to a ‘workshop builder’ from which you can select different templates, but users found this very difficult to locate. To fix this problem, we adopted a ‘netflix’ style of ‘tile’ selection for the templates.
After 4 tests on this design, users reported that the page itself was easy to navigate, but that they still didn’t really know where they were within the site. It wasn’t clear that this was a landing page.
Therefore, we created a side navigation which highlighted where users were. By highlighting that they had reached their dashboard, we believed we had solved this problem.
Thankfully, this was received more favourably. 3 users were still somewhat unsure of what the icons and sections were, but all were understanding of the fact that this is navigation of the landing page after signing in.
The next part of the design was the hardest — we struggled mightily with making the workshop setup intuitive. With every test — 12 in all, users found it hard to know what they were doing, and how they were going to start a workshop. It is worth stating that these 12 tests were carried out across 4 different iterations. I must give credit to my teammates for their input as I worked on this part for 3 days from early until late and thought I was going a bit mad!
Our objective and our solution to users’ pain points was to create a clear, concise onboarding process. Users simply kept stating that they needed a better understanding of how they were going to be able to use the product, so we concluded that we needed a friendly, concise, onboarding which was going to make things as painless and clear as possible.
Below are several of the notifications that users receive when they go on the site for the first time.
We updated the navigation wording and icons according to what users reported as finding clearest, whilst titling everything correctly — i.e. Dashboard etc, so users knew where they were. We kept the tiling as users stated it was intuitive, whilst we added an ‘upcoming workshops’ feature, so when revisiting, users could begin workshops as swiftly and painlessly as possible.
This was received well by Axis, and they stated that they will be looking to implement several elements of our design in their updated model. The link to the full prototype is below:
Prototype
https://www.figma.com/file/kpmQKZ2m2w6bv8a4sVF4ki/Axis-Prototype?node-id=0%3A1
Next Steps
After completing this project, we identified several things that we could improve on. In terms of communication and planning, both Axis and ourselves may have needed to make our intentions and exact plans clearer to avoid any confusion. This was not a major problem, but the switching of plans midway through perhaps hindered the process just a little bit.
With our designs, in time we’d love to see the registration be made even quicker — perhaps even with biometrics!
With more time, we also would need to further test the platform and start developing the facilitation of a workshop.
What did I learn?
Personally I learned a great deal about the importance of deep-diving into a product yourself. It might seem an obvious thing to say, as every designer needs to do this to improve a product. However, I have always taken what I considered to be the most ‘user-centric’ approach, which has resulted in me listening to users and trying to implement their suggestions/fix their pain points. In reality I was perhaps not engaging with the product enough myself, and understanding how I myself interacted with it. It’s a fine line, and whilst I will always put the user first — that is the whole point of UX after all — I now recognise how important it is that I understand a product in its entirety. If I am slightly in the dark as to what is trying to be achieved, how can I design solutions?
And finally…
I absolutely loved working on this project. We were lucky enough to gain a lot of invaluable insights from generous participation in our survey, interviews, and usability tests. The human psychology part of UX is a large reason why I wanted to get involved in the first place. It was also a real test of rapid prototyping skills — working under these time constraints made me feel the pressure, but ultimately was very rewarding.
