How do you make new friends in college? Many of us had a group of friends in high school. In fact most people that I have talked to have only hung out with the same people for years. I often found…
Badi have recently released their new booking feature. Using a mixture of sketch and invision, I attempted to improve the usability, clarity and organisation of the information from a purely UX writing perspective. You can see the changes explained below, as well as the final result. The screen as it was originally is always on the left, and the new design is always on the right.
I made bulk content black instead of blue to try and save the blue for clickable buttons and titles.
“Seeker” has been used in all instances that the individual looking for a room is referred to.
“Lister” has been used in all instances that the individual advertising their room is referred to.
“Booking amount” has been used in all instances that the reservation fee is referred to.
3. Use of Upper and Lower Case
For all titles and buttons I have used upper case only for the first word. This is used by google and I think is more in line with Badi´s character than other options.
Note: The font used is “Source Sans Pro”, this has been used as the original font was not available to me, not as a design decision.
Screen 1 — Booking request
1.Booking Request — Earlybird booking
I changed the title to “Earlybird booking”, as it is a new feature and something to brag about, I wanted to try and give it a catchy name.
2. “i” and “?”” buttons
I put the original screens in to invision and tested them with a few friends. No-one was sure what they would be getting from each icon. On top of that the “i” icon takes you to the question page and the “?” Icon takes you to the further information page.
I replaced these with two clear buttons at the end of the text. The positioning also makes more sense as it encourages the user to read first to see if they need more information/help or not. Additionally, I took out the question page and made the “Chat with us” button available directly from the first screen. I think “Chat with us” is self explanatory and the extra screen is unnecessary.
3. Layout and content
Everyone I tested the original version with failed to understand the booking feature just from reading the existing text.
I broke the feature up into 4 clear steps and tried to make the text seem more visually pleasing and not so overwhelming. I stuck to consistent terms as set out in the “General Changes” above.
4. My account/ Moving in day/ Booking amount
I made these titles grey to remain consistent with the “My account” screen to tell the user that they still need to fill these sections in.
When I tested the original version there was some confusion with the term “entry date”. I changed “Entry date” to “Moving in day” — this is clearer to the user what we are referring to and has been changed throughout the screens.
I took out the text referring the user to booking information if they need more info as it didn´t make sense to have it here. Also after changing the icons to the two buttons above, it is clear to the User that they can find further information by clicking “I need more info”.
I titled this section “Earlybird booking guarantees…” as this makes more sense with the accompanying text.
Screen 2 — How does it work?
1.How it works
I changed this to a question “How does it work?” To maintain consistency with the other tab “What is it?”.
2. Layout and content
Again I split the process into 4 key steps. I tried to highlight each step in bold and blue, and then backed this up with further information using “Badi top tips”.
When I tested the original version with my friends again they said there was a lot of text and they probably wouldn’t read it.
I also tried to change the tone to make it more inline with the general character of Badi.
3. “When the entry date arrives” & “Cancellation Policy”
I changed the title of the section from “When the entry date arrives” to “Dealing with raised concerns”. I think this explains the purpose of the section more accurately.
I also shortened and condensed the text whilst ensuring each key point is explained clearly to the User.
For the Cancellation policy I just changed the wording and layout slightly in order to make it clearer.
4. Chat with us/ Questions
Again I changed the text to make it consistent with Badi´s character. I added the image to help give the section a personal feel.
I kept the “Chat with us” button consistent to the one I used on the first screen. I put FAQs in blue and bold to tell the user it is a button.
Screen 3 — What is it?
1.How does it work?
See change 1. Screen 2.
2. If you are the Lister / If you are the Seeker
I changed these two headings as I think they achieve consistency with the Badi language/ terms.
3. Content and layout
First of all I gave each point a green tick. We are explaining the advantages here and the green ticks reinforce and convey that positivity to the user as well as provide a clearer layout.
I changed the wording to make each point clearer and also catchier.
4. Chat with us/ Questions
See 4. Chat with us/ Questions, Screen 2.
Screen 4 — Information/ My account
1.Title — Information
I changed the title to “My account”. I think this makes more sense as the link the User clicks is “My account” not “information”.
2. Bank account number — details
I changed “number” to “details” as I think this better describes the section. I changed the text to put it more in line with Badi´s character.
3. Contact information — details
Changed “information” to “details” in order to keep consistency with the above.
4. Date of birth
Changed “date” to “date of birth”. This is clearer, I also changed the format.
I gave all sections that had been filled in, a green tick and all those that had not been filled in, a light grey tick. This makes more sense for the User.
6. SAVE IT — Save
I changed this because it is more common, the “it” isn´t necessary.
With the increasing popularity of cryptocurrencies, stablecoins have become a crucial aspect of the cryptocurrency ecosystem. Stablecoins are a type of cryptocurrency that are pegged to the value of… Read more
Co-working spaces such as WeWork put you in close proximity to professionals you’d otherwise not be around. The faces holding the door open for you, pressing your floor number in the elevator, and… Read more
Palamedes is one of the most famous masterpieces of Antonio Canova and it was the first work purchased by Sommariva form the famous artist. The sculpture represents king Nauplius’s son, Palamede… Read more