UX/UI Design website, onboardings, guest/host dashboards, search, book, messaging, pay, review, API

[stefanhopman1]

UX/UI Design website UX/UI Design app

Improve UX/UI research, discover & define phase

• [x] Desk research
• [x] Persona's
• [x] Mindmapping
• [x] Questionnaires
• [x] Value proposition canvas
• [x] User needs
• [x] Storyboarding
• [x] Service blueprints
• [x] Business model canvas
• [x] Requirements analysis
• [ ] Data driven design

Improve UX/UI Develop, Deliver, Test & Publish

• [ ] Persona based walkthroughs
• [x] Sketching
• [x] Wireframing
• [ ] Stylesheet
• [ ] Flow diagrams bookingflow traveller + dashboard, onboardingflow host + dashboard, search, chat, reviews, API.
• [ ] LoFi
• [ ] HiFi
• [ ] Usability testing
• [ ] Multi language / Multi currency

Website

• [x] Home
• [x] How it works
• [x] Why Domits
• [x] Jobs
• [x] About Domits
• [x] Update/What's new
• [x] Contact
• [x] Help/FAQ
• [x] Privacy policy, terms and conditions, disclaimer
• [x] Become a host
• [x] Category landing pages. 1 Holiday Homes. 2 Campers. 3 Boats. Later: Camping. Tiny homes. Farms. Luxe. WOW.
• [x] Travel innovation lab with 9 dots. Growth | People | Cloud ICT | AI Data.
• [ ] Sitemap
• [ ] Partners
• [ ] Compare features competitors
• [ ] Climate change and protect nature

Website booking process travellers

• [x] Booking process travellers

Website traveller dashboard

• [x] Dashboard
• [ ] Bookings
• [ ] Messages
• [ ] Payments
• [ ] Reviews
• [ ] Settings

Website host onboarding

• [x] Website host onboarding process

Website host dashboard

• [x] Dashboard
• [ ] Calendar
• [ ] Reservations
• [ ] Messages
• [ ] Revenues
• [ ] Reporting (Payments)
• [ ] Occupancy/ADR
• [ ] Reviews
• [ ] -
• [ ] Property care
• [ ] IoT Hub
• [ ] Pricing
• [ ] Distribution
• [ ] Monitoring
• [ ] Screening
• [ ] Properties
• [ ] Settings
• [ ] Promo codes

Website Booking & availability management

• [ ] Booking calendar for travellers
• [x] Availability management calendar for hosts
• [ ] Support for different time zones
• [ ] Handle Daylight Savings changes etc.
• [ ] Stock management
• [ ] Seats
• [ ] Ability to filter search by availability

Website Reviews

• [ ] Reviews

Website Help

• [x] Help for travellers
• [x] Help for hosts

Website Account & user profile management

• [x] Sign-up form
• [x] Login form
• [x] #220
• [x] Verify email
• [x] Forgot password
• [x] Change email
• [ ] Ban account
• [x] Delete account
• [x] #221
• [x] Social-logins: meta, google, apple id, X, mail and passkey

Website Site search & discoverability

• [ ] Map
• [ ] Location search
• [ ] Location auto-complete
• [ ] Listing categories
• [x] Filtered search
• [x] Keyword search
• [ ] Availability search

Website API's

• [ ] Marketplace for integrations
• [ ] Open API

Website admin panel tabs

• [x] Intuitive Menu & layout
• [x] Dashboard
• [x] Manage admin
• [x] Manage travellers
• [x] Manage hosts
• [x] Manage company
• [x] Manage documents
• [x] Manage services
• [x] Manage help
• [x] Manage locations
• [x] Manage map
• [x] Manage fare
• [x] Manage requests
• [x] Manage bookings
• [x] Manage ratings
• [x] Manage messages
• [x] Manage referrals
• [x] Manage payouts
• [x] Manage wallet & promos
• [x] Manage app version
• [x] Manage settings
• [x] Manage web language
• [x] Manage app language

Changelog & UX/UI Design Wiki Github

• [ ] Web
• [ ] Web onboarding traveller + dashboard
• [ ] Web onboarding host + dashboard
• [ ] Web search
• [ ] Web booking & availability
• [ ] Web chat
• [ ] Web payments
• [ ] Web reviews
• [ ] Web help
• [ ] Web admin panel
• [ ] App onboarding traveller + dashboard
• [ ] App onboarding host + dashboard
• [ ] App search
• [ ] App booking & availability
• [ ] App chat
• [ ] App payments
• [ ] App reviews
• [ ] App help

Admin panel https://makent.trioangle.com/admin Username : admin Password : trioangle

Host/Traveller dashboard https://makent.trioangle.com/login Email : trioanglemakent@gmail.com Password : trioangle

Iconpack website for amenities -> https://www.flaticon.com/authors/those_icons/lineal?author_id=216&type=standard Iconpack voor UI UX -> Figma Untitled Icons Free edition

[stefanhopman1]

First comment

[HisjaamB]

Voor de website zijn de V0.0 schermen af o.b.v. geen tot weinig onderzoek. Deze schermen zijn: Home, Assortiment, Mijn Domits, Over ons, Contact, Careers, Domits Extra's

[HisjaamB]

Popup layout en plaatsing zijn aangepasy

[HisjaamB]

Voor de app zijn de Landing, Accommodations en Acc" Zoom gemaakt.

Ook is er een start gemaakt met de My Domits.

[HisjaamB]

Admin panel dashboard = finished

[Timmhart]

Voor booking process research heb ik in de Figma onder het tabje onboarding designer de flow toegevoegd. Voor nu van 2 websites, maar ik probeer er nog meer bij te voegen.

De flow is beschreven door middel van screenshots met passende titels/beschrijving van de pagina's.

[HisjaamB]

Vandaag zijn is er aan het volgende gewerkt:

• Homescherm voldoet nu aan de wens van Stefan. Lijkend op de AliPay app:

• Messaging schermen zijn afgemaakt.

• Personal details form is aangepast waarbij er nu is gekozen voor booking overview met personal details ipv price details. Hiermee is de feedback en wens toegepast om de form zo kort mogelijk te maken. Aangezien men al is ingelogd is opnieuw gegevens invoeren overbodig geworden. De knop is gewijzigd in -> Cost overview.

• Final booking overview heeft de wijziging in de knop -> Proceed to pay. Daarnaast is er een disclaimer toegevoegd onderaan de knop om men aan verwachtingsmanagement te voldoen over de Stripe betaling.

Voor web zijn er nieuwe pogingen gedaan voor het start scherm. Hier wordt nog op doorgewerkt om ervoor te zorgen dat er binnen het team een aantal feedbackrondes worden gepland.

[HisjaamB]

Nu nieuw erbij... als directe 2e iteratie/meegenomen feedback:

Zoals te zien heb ik geprobeerd om hier op een herkenbare en simpele manier een soort filter of selectie in te bouwen i.p.v. losse schermen etc. Hierdoor is het makkelijk om binnen de zogenoemde "dashboard" omgeving te kunnen selecteren op vorige boekingen, actieve boekingen en zelfs het maken van een nieuwe boeking als CTA

[HisjaamB]

Nieuwe iteratie na ontdekking -> host informatie ontbreekt. Toegevoegd -> zien wie de host is en een contact knop.

[HisjaamB]

Met dezelfde styling heb ik geprobeerd om de volgende versie van de host dashboard te maken, hierin zijn nog niet de juiste tabs toegevoegd maar zijn alvast als placeholder neergezet. Het design is consistent met die van de traveller

[HisjaamB]

Voor de website is de volgende pop up of modal inlog en signup pagina helemaal goed. De knop kan worden gewijzigd naar de huisstijl kleur die we nu hebben namelijk: HEX #0D9813

[HisjaamB]

De nieuwe traveller Dashboard schermen zijn af. Ik zal de kleine designkeuzes niet allemaal noteren want dat is een lange waslijst. De belangrijke punten zijn:

• Styling aangehouden van de nieuw ontworpen message centre (die toon ik later)
• Iconenset is gerecycled uit eerdere schermen en aangevuld
• Kleurenset is hetzelfde gebleven hoewel er nu felrood is toegevoegd voor een paar functies

Note: het kan zijn dat er her en der ene placeholder is gebruikt. Niet op letten. (voorbeeld bij Settings scherm - "verified traveller")

@roberthopman

[roberthopman]

Kan geen opmerkingen op design verzinnen. Misschien breadcrumbs erin. Misschien adres beginnen met straat en dan postcode en plaats.

[HisjaamB]

Kan geen opmerkingen op design verzinnen. Misschien breadcrumbs erin. Misschien adres beginnen met straat en dan postcode en plaats.

Top. Dat zie ik als design complimenten. Er is altijd wat te verbeteren. Breadcrumbs ga ik meenemen in versie 2.

[stefanhopman1]

Designs: 7,9

Graag de juiste user persona namen gebruiken in designs. Ik waardeer en vind de humor grappig in demo's, maar in definitieve designs niet functioneel en zorgt mogelijk voor verwarring.

User personas in Figma zetten bij onboarding UX/UI designer net als bij Mostpros. Lotte Zomer → Lotte Summer Huub Huisman → Huub Homer https://docs.google.com/document/d/1z-FjKp5rp08Mw5GkuHPlNsu-AXQyR0TUicEXKbUDpaI/edit#heading=h.3ybxfjmbiixa

Als Tim dadelijk de juiste visuals per type accommodatie heeft lijkt het mij ook handig om die te gebruiken voor de juiste branding look/feel.

• Holiday home
• Holiday villa
• Apartment
• Tiny house
• Glamping
• Camper
• Boat

[HisjaamB]

Thanks. Ik zal de user persona's gebruiken voor de designs.

Designs: 7,9

Graag de juiste user persona namen gebruiken in designs. Ik waardeer en vind de humor grappig in demo's, maar in definitieve designs niet functioneel en zorgt mogelijk voor verwarring.

User personas in Figma zetten bij onboarding UX/UI designer net als bij Mostpros. Lotte Zomer → Lotte Summer Huub Huisman → Huub Homer https://docs.google.com/document/d/1z-FjKp5rp08Mw5GkuHPlNsu-AXQyR0TUicEXKbUDpaI/edit#heading=h.3ybxfjmbiixa

Als Tim dadelijk de juiste visuals per type accommodatie heeft lijkt het mij ook handig om die te gebruiken voor de juiste branding look/feel.

• Holiday home
• Holiday villa
• Apartment
• Tiny house
• Glamping
• Camper
• Boat

[HisjaamB]

Custom 404 error page als 1e versie. Hier zou in dezelfde stijl als de statische pagina's een illustratie bij komen. De essentie blijft hetzelfde. CTA's toegevoegd voor User Experience optimalisatie en verlagen van mogelijk irritatie bij gebruikers van de website.

[HisjaamB]

Zoals te zien, de 1e versies van de Host dashboards. Widget layout ligt er al. Inhoudelijk widget invulling laat ik dit aan de devs over na wat brainstormen. Vervolgens de focus op een nieuw settings layout.

Consistentie met de traveller is behouden. Echter is corporate blauw de main colour op alle host pagina's/schermen die er ontworpen worden. Hieruit feedback van Tim en Gianni ter bevestiging dat de kleur mooi en clean oogt voor de zakelijke Domits functionaliteiten.

[roberthopman]

Misschien 2 punten om over na te denken:

• Bij de settings pagina zie ik 4 edit knoppen, wellicht eenvoudiger en handiger voor ontwikkeling ook om daar 1 algemene update knop van te maken.
• logo in de footer is misschien overkill

[HisjaamB]

@roberthopman Zie hier een nieuwe optie voor de settings pagina:

Over de footer: Volgende week komt er een minimalized Domits footer voor de pagina's waarbij dit overkill wordt. Ben het met je eens.

[HisjaamB]

Eerste versie van de Host step 1 na het invullen van de 3 stappen op become a host is af. De volgende layout van simpelheid wil ik aanhouden. Verdere uitleg en argumentatie volgt na het ontwikkelen van de opvolgende stappen.

[HisjaamB]

Een simpele in dezelfde stijl als de andere statische pagina's, help pagina. Content wordt nog aangevuld, voor nu is het een klik en expand idee.

[HisjaamB]

Release page is nu klaar voor dev. O.b.v. de standaard empty page template.

[HisjaamB]

Statische pagina's zijn afgemaakt als landing page voor de categories. Hierbij 3 pages en 2 varianten. Waarvan de 2e variant voor wat exclusiever aanbod gebruikt kan worden en variatie 1 als regulier.

[roberthopman]

Voor mij zelf ter referentie: https://www.figma.com/file/CTGbCIqZXdLBKgZCwo9XXE/Domits-Screens?type=design&node-id=1557-6277&mode=design&t=q536VCPOcmmoa0Ps-0

---

Hi @HisjaamB

Algemene observatie: bedenk even of deze font families die je gebruikt, de juiste zijn. Hoe heb je dit momenteel bedacht?

Verdere observaties:

404 pagina:

• mag iets van droge humor bevatten (vrij in te vullen)
• 500 pagina mag ook iets hebben en met een ander creatief idee (vrij in te vullen)

Settingspagina:

• probeer de 'attribute values' van de diverse onderdelen te tonen, in de normale 'value + action buttons', nu lijken de 'Change...' allemaal geen values te tonen (wat zijn settings) maar juist wel actionable en clickable.
• Ik zie paars. Is dat besloten als tweede kleur?

Index pagina:

• font size misschien iets groter hier en daar
• de button 'All accommodations' misschien minder opvallend.
• (c) 2023 is nu 2024.

Host step 1:

• go back and proceed buttons andere basis kleuren geven, de shade is wel goed bij back.

Heb jij zelf nog vragen?

[HisjaamB]

2 versies van de Travel Innovation Lab - static landing page - zijn af. Er kan een keus gemaakt worden uit deze variaties. Vanuit design gaat mijn voorkeur uit naar de verticale kolom variant waar dan tekst in komt. De blokken variant vind ik iets te kinderachtig ogen voor Domits.

[stefanhopman1]

Variant 1 is prima

[HisjaamB]

De nieuwe versies van de statische schermen (Why Domits en About Domits) zijn klaar.

Er is gebruik gemaakt van een tekst, kolom en icoon structuur voor het minimalisme. Eventuele zou hier ergens een leuk pictogram of afbeelding bij kunnen maar de 1e versie heeft aan deze schermen voldoende.

[HisjaamB]

Vanuit User Experience en verwachtingsmanagement voor de gebruiker heb ik de voglende designkeuze gemaakt:

In plaats van een ouderwets maar klassieke loading scherm na het selecteren van filters en het klikken op de zoek knop in de search bar op de home page (accommoverview) kies ik voor een skeleton loader (zie afbeelding).

De skeleton loader heeft als voordelen:

• Ze lijken sneller en gebruiksvriendelijker te zijn.
• Verbeterde waargenomen prestaties zorgen voor zowel een goede UX als helpen bij het verhogen van de conversieratio.
• Het probleem met spinners/laders is dat we geen idee hebben wat er wordt geladen of hoe lang het zal duren.
• Het gebruik van spinners/laders creëert een periode van onzekerheid voor de gebruiker, aangezien de laadtijd onbekend is.
• Vvestigen de aandacht van de gebruiker op de voortgang in plaats van op de wachttijd.
• Het creëert een illusie van snelheid en korte laadtijd.

Niet gebruiken als:

• De laadtijd langer dan 3 a 4 seconden is. Gebruikers zien dit als vastgelopen content.
• Vervanging voor header en/of footer. Alleen gebruiken voor content als accommodaties of dashboards.

Ik kon verder niet veel nadelen vinden.

[roberthopman]

Goed idee. Wellicht ook niet onverstandig om te beschrijven wat de nadelen van de skeleton loader zijn?