This is an UX/UI case study on Apartments Abl's Website.
Project Info: Individual Design Exercise
Tools: Adobe XD, Illustrator, Invision
About
Apartment Abl started in 2016 and is a small family driven pensione. They offer three different apartments in a quiet location in the middle of Bad Schallerbach. Bookings can be done on the apartments-abl.com website or via mail.​​​​​​​
What I did
After four years I decided to take a critical look at the website design and make a relaunch. 
But before diving deep into the design, I wanted to do some research to get information about users and how they think about/feel about/use the website and of course evaluated the website.
1. EMPATHISE
Collect Data, User Research
Guideline Checklist


Navigation
- Navigation area isn't always available
   (without back button)
- Text link to homepage isn't available


Design/Content
- Texts could be better structured (rethinking of content)
- Not many headlines

Accessibility
- not internationalised
Observations


Which types of guests did rent an apartment?
Because I lived in one of the apartments for a year, I could observe which type of guests stayed at the apartments.

Who is booking online?
To figure out some demographics of the guests, I looked at the online reservation statistics on the typo3-platform.
​​​​​​​
Survey

First I wanted to conduct 1-on-1 interviews and a user test with some guests. But because of work and also the fact that the guests were on vacation (and the interaction with the website might have already been a while ago), I needed to think of an alternative.

So I conducted an online survey which guests could freely participate after they had booked an apartment.

 -> 5 guests had completed the survey

I was aware that there might not be as many bookings and volunteers for the survey. That's why the timeline for the survey was set for two month, to get more range.
2. DEFINE
Problems identification

- Relevant information is missing

- Unclear hierarchy of content
- Lack in user control
- Unclear icons
- Only german

-> LACK OF USABILITY
Project goals​​​​​​​

How can it be improved?
- Include relevant information about apartments & activities
- Improve information hierarchy and content placement
   (with headlines and icons)
- Restructure navigation 
- Update error messages 
- Update icons
- Multilingual site
Personas
• Marketing manager (28)
• Lives with her partner Luke

• Computer and web savvy

Anna is a very successful marketing manager and always busy.
She likes to work efficiently and doesn't like it at all when something takes too long time.
When Anna gets some time off she really uses it to relax and clear her head.
She loves to make a spa or city trip with her boyfriend Luke. 



Needs:
- Wants quality time with her boyfriend Luke
- An easy booking
- Quick information available about activities/food


Frustration:
- Does not have a lot of time to plan
- Doesn't want complex booking-forms
• Mother & Nurse (42)
• She is married and has two kids
• Doesn't use the computer a lot 


Emma is a mother of two and part-time nurse.
She really loves to go on vacation with her family to make some nice memories.
Therefore, she likes to plan every detail of the trip to make it perfekt for her
two boys and her husband.



Needs:
- To have a nice holiday experience with her family
- Find a suitable stay/room/apartment for her family
- Get ideas for (alternative) activities

Frustration:
- The kids get bored or do not like the activities
- Get lost in the new place
- Something goes wrong with the booking
- Does not get time with her husband
3. PROTOTYPE
Sketching (Lo-Fi)
Navigation, Homepage, Apartment-Site, Booking-Form
Wireframes (Lo-Fi)
Homepage, Apartment-Sites and Booking-Form
Design System / UI Elements​​​​​​​
4. TESTING
Phase Sketching
Testing Navigation with Card Sorting

HOME
APARTMENTS
 AKTIVITÄTEN (??)
KONTAKT
Phase Design System
Icon-Garden A/B Testing

#1:
Picknick, landscape, nature, picknick table

#2:
Park, park bank, nature​​​​​​​
5. MOCK-UPs (Hi-Fi)
I set up a mid-fi clickable prototype using Invision to subsequently test the new design with users and get some new usability insights. 
6. FUTURE CONSIDERATIONS
- User testing and considerations to revise the site (desktop & mobile)
- Implementation (Develop, Typo3)
 - ... User testing
Thank you for your attention!
Back to Top