After 5 Cleaning
A Case Study By Timothy Wightman
About A5 Cleaning
After 5 (A5 Cleaning for short) is a company that deep cleans apartments and buildings via arranged bookings.
It was a B2B application and website
A5 cleaning is my first UX Project undertaking that I ever did
It was and remains to this day a turning stone in my life
One was an online questionnaire
The other was a mobile app
It was effectively two projects
Tools used
Adobe Illustrator
Balsamiq
Photoshop
Adobe XD
The User Needs
Before any research or sketches happened, the first thing I did was to find out who the user was, In this case, it is employers of the company.
Once I found this out. I decided to give a survey. I needed to know how in depth they were going to quiz the user. Because this is them effectively determining the survey themselves for what the user wants cleaned.
This is the sole reason, that I implemented the search function to the mobile app. The survey that the users create for the customers can easily get quite large, as such, scrolling through twenty to thirty questions to look for a specific one to change is a very easy possible pain point.
The other feature that I also wanted to implement to the application, is the ability to collapse, and expand questions either separately, or entirely. This is also because of the scrolling issue that is mentioned before.
The User Goals
To summarise, for members of the company whom are making the questionnaire, they need to be able to do the following. Add a both a question and sub question, delete, search for matching words in questions. These are required for the MVP (minimum viable product)
For the end user simply viewing the questionnaire, they simply need to be able to understand the question, and it needs to also be laid out in a way on desktop, that takes advantage of the space. One of the first things I
wanted to have available, is an option to modify the text size at the very least. Whilst this is available via most browsers, I still would rather also offer that option to those who are also viewing the website via a phone.
Cross Over between business and user goals
Above all of this, the main goal is to increase the business grow. To start with, the application for adding questions to the website. The ultimate goal is to have more customers ordering cleaning visits. The quicker and easier the app is to use, any new questions hat needed to be added can be done quickly with no hassle, making updates cheap on time and resource, saving money at the very least.
The second overlap between business and user goals, is of course the questionnaire itself. Simply put, the easier it is to use, the quicker users can get through it, and book their appointment in. This is
important, as they’re considerably long (around 40 questions, not including sub questions, on average)
After Five Cleaning Mobile App — Wireframing
So, the first thing I did was pull out my pen and paper and got to drawing. I wanted to design something that can take advantage of the one key advantage mobiles have.
Hand gestures, such as the ability to swipe left or right on your device making things that would require scrolling on a computer or doing certain actions (such as closing or changing page)
incredibly swift and easy.
This is one of the main draws. My first worry, was making the app be a chore to scroll down, as you added more and more questions. The Sketch was just a good idea of what to do before the colour scheme was to be decided
Pictured: My Initial Sketches
After Five Cleaning Mobile App — Wireframe Problems
The sketch for the mobile version was quite a ways different from what the final product ended up becoming. As you can see from earlier pages, the final design is very different from the initial design.
What I mean by this is that I have designed the interface to be able to take advantage phone specific features (in this case, swiping).
This was where I learned about user testing. Once I designed the application (I could quickly mock it up with colours, as these had effectively been decided for me)
I immediately received the following question from my software engineer:
“what would I do if I wanted to edit a question I already submitted”
And right there the design fell apart. Effectively, I had no real answer for this. So, immediately it was back to the drawing board.
After Five Cleaning Mobile App —Market Research, Survey Monkey
So, it was effectively. Back to the drawing board. For the next one, I looked towards different inspirations for the layout of the mobile version of the app. This time instead of trying to design what I “think” would work, I instead wanted to go and see what similar apps there was on the market place that was currently being used.
“what would I do if I wanted to edit a question I already submitted”
And right there the design fell apart. Effectively, I had no real answer for this. So, immediately it was back to the drawing board
The app layout of this was pretty solid, it was easy to use familiar, and it actually reminded me quite a bit of google forms. The only problem was.
One of the key requirements was that each question was to have “sub questions”, as due to the layout of the question, there also needed to be sub questions related to it, to them determine what sort of equipment would be used (e.g. if you have a room with windows, how many windows?)
So this presented a different problem. This effectively meant that I needed a way to
“group” a question for ease of use for the employees. The reason for this was that the cost, hours and equipment they would visit the house with, was determined by what answers were given.
Pictured: Survey Monkey UI
After Five Cleaning Mobile App —Market Research, Survey Monkey
So, it was effectively. Back to the drawing board. For the next one, I looked towards different inspirations for the layout of the mobile version of the app. This time instead of trying to design what I “think” would work, I instead wanted to go and see what similar apps there was on the market place that was currently being used.
“what would I do if I wanted to edit a question I already submitted”
And right there the design fell apart. Effectively, I had no real answer for this. So, immediately it was back to the drawing board
The app layout of this was pretty solid, it was easy to use familiar, and it actually reminded me quite a bit of google forms. The only problem was.
One of the key requirements was that each question was to have “sub questions”, as due to the layout of the question, there also needed to be sub questions related to it, to them determine what sort of equipment
would be used (e.g. if you have a room with windows, how many windows?)
So this presented a different problem. This effectively meant that I needed a way to “group” a question for ease of use for the employees. The reason for this was that the cost, hours and equipment they would visit the house with, was determined by what answers were given.
After Five Cleaning Mobile App —Market Research, Google Forms
This is partly what the first version was based on, as this is software that I use often, So I decided to take another look at the layout and analyse it once again to see where I went wrong.
As you can see, the similarities between that two, is that there is a
“panel”. This is where the idea to have employee’s “swipe” left and right came from (this is a desktop screenshot).
The problem that I encountered here and therefore needed to solve (again) was simple
How does one keep track of all of the questions they have added? And how do you make this straight forward to view and modify?
Pictured: Google Form UI
After Five Cleaning Mobile App — Tree List Layout and Low Fidelity Sketch
This was something I actually found upon by accident. The tree list layout (pictured opposite) is when you have a parent and child
relationship layout. The parent is the main object on the screen, and the child are the things that are related to it.
This sort of structure is used often in the programming space, as someone who has done computer science in the past, I am very used to using it conceptually whilst doing object oriented
programming
As a result. I decided to try out this layout for an interface. Instead of making question a “question”, it becomes an “Object”, the sub
questions merely become the “child” of the “parent”, this isn’t just UX related per say, but this is programming related.
This effectively describes how the programmer would need to implement this method, which is important because I was actually working side by side with a programmer as I was implementing the interface (he was the one that asked the question) This line of
thinking, resulted in the following sketch Pictured: low
fidelity sketch for adding questions
After Five Cleaning Mobile App — V2 Wireframe
This is the V2 Wireframe. The idea was to have one main menu which allowed you to add
“parents” (questions) which automatically gave you answers (the child).
This is the V2 Wireframe. The idea was to have one main menu which allowed you to add
“parents” (questions) which automatically gave you answers (the child).
The one problem that could still be present with a view like this is overwhelming amounts of information, or having to constantly scroll through layers upon layers of information (especially when the questionnaire gets large)
To somewhat resolve this, I put in a collapse all or expand all button, something which is fairly common when working with folders in
applications.
After Five Cleaning – Mobile Questionnaire
This is the mobile/desktop website section of the project. As this is the more end user orientated section of the project. I opted to design the mobile page first. The reason for this is because it is far easier to scale up when designing a page, than it is to scale down. The latter often leads to awkward compromises that can trouble the user experience.
For the desktop version I had the
advantage of space. This mean that whilst I had a lot more room. I decided to keep it simple, a three by three grid with a CTA button to progress on the page. This is also where I implemented the search function for the page.
The End Result
Closing thoughts
As my first project as a UX Designer, I had a lot to learn still.
The project went relatively smooth, as my software engineer was also somewhat of a mentor
Despite the project going initially well, I decided that I needed to have a solid process for my next project, as a result I started reading several books such as the design of every day things by Don Norman and don’t make me think by Steve Krug
