Ambience

Cele i założenia realizacji

‍

W projekcie Ambience nasza analiza skupiła się na osobach i firmach poszukujących różnorodnych projektów aranżacji przestrzeni, od luksusowych wnętrz po nowoczesne rozwiązania komercyjne. Klienci Ambience to osoby ceniące sobie indywidualne podejście, szeroki wachlarz usług oraz jakość projektów, które idealnie odpowiadają na potrzeby rynku lifestyle.

‍

Persona 1: Klient indywidualny

• Profil: Osoby prywatne, poszukujące unikalnych projektów wnętrz, które odzwierciedlają ich osobisty styl i oczekiwania estetyczne.
• Motywacje: Szukanie kreatywnych, personalizowanych rozwiązań, współpraca z zaufaną marką, która rozumie ich potrzeby.
• Problemy: Trudności z szybkim odnalezieniem przykładów zróżnicowanych projektów, które mogłyby ich zainspirować.
• Oczekiwania: Przejrzysta prezentacja różnorodnych projektów, łatwy dostęp do informacji o usługach oraz szybka komunikacja z zespołem projektowym.

Persona 2: Inwestor komercyjny

• Profil: Firmy i deweloperzy poszukujący zaufanego partnera, który dostarczy wysokiej jakości, nowoczesne rozwiązania aranżacyjne dla biur, hoteli, restauracji lub innych przestrzeni komercyjnych.
• Motywacje: Kompleksowe projekty dostosowane do specyfiki komercyjnej, które zwiększą atrakcyjność i funkcjonalność przestrzeni.
• Problemy: Trudności w przeglądaniu różnych typów projektów, brak intuicyjnej prezentacji przykładów i referencji.
• Oczekiwania: Wyraźnie zaprezentowana różnorodność realizacji oraz szybka możliwość nawiązania kontaktu w celu omówienia szczegółów współpracy.

‍

Etap 1: Warsztaty UX i analiza grupy docelowej

Rozpoczęliśmy projekt od warsztatów UX, które pozwoliły nam zrozumieć potrzeby klientów Ambience. Wspólnie z zespołem klienta zdefiniowaliśmy kluczowe grupy odbiorców, opracowaliśmy persony oraz zidentyfikowaliśmy obszary, w których prezentacja oferty i projektów wymagała optymalizacji. Kluczowym wnioskiem było to, że strona musi w sposób przejrzysty i atrakcyjny przedstawiać szeroką gamę realizacji, co stanowi unikalną wartość marki.

‍

Etap 2: Opracowanie struktury i makiet

Na podstawie wyników warsztatów zaprojektowaliśmy nową strukturę strony, która wyeksponowała różnorodność projektów oraz uprościła ścieżki użytkowników. Stworzyliśmy makiety, które zaprezentowały nowy sposób organizacji treści, pozwalając użytkownikom szybko znaleźć interesujące ich projekty – od luksusowych aranżacji wnętrz po nowoczesne rozwiązania dla przestrzeni komercyjnych.

‍

Etap 3: Projektowanie UI

W fazie projektowania interfejsu skupiliśmy się na wizualnej spójności i klarowności przekazu. Każdy element strony został zaprojektowany tak, aby podkreślać jakość i różnorodność realizacji Ambience. Duże, wysokiej jakości zdjęcia projektów, przejrzysta typografia oraz intuicyjna nawigacja wspólnie tworzą wrażenie elegancji i profesjonalizmu, które odpowiadają na potrzeby wymagających klientów.

‍

Etap 4: Optymalizacja ścieżek użytkowników

Na podstawie analizy zachowań użytkowników zoptymalizowaliśmy kluczowe ścieżki, prowadzące do najważniejszych sekcji strony, takich jak portfolio, case studies oraz formularze kontaktowe. Uproszczona struktura pozwoliła na szybszy dostęp do projektów i usług, co z kolei zwiększyło liczbę zapytań i poprawiło zaangażowanie potencjalnych klientów.

‍

Efekt

Dzięki wprowadzeniu nowych rozwiązań, strona Ambience lepiej prezentuje różnorodność realizowanych projektów, co przyczyniło się do

‍

Development

Końcowym etapem było wykonanie kodowania html, css, js czyli budowa szablonu html, którego czas wykonania będzie szybki oraz semantycznie poprawnego.

‍

Wdrożenie strony warstwa backend to zaimplementowanie platformy WordPress.

Realizując główny cel kosmicznego wczytywania zagłębilismy się w jej maksymalne przyspieszenie, gdyż to szybkość wczytywania strony wpływa na jej użyteczność i chęć podróży w głąb oferty.

‍

Aby stronadziałała naprawdę szybko, wykonaliśmy cały pakiet optymalizacji technicznej, analizę programami : gtmetrix, Lighthouse. Zostało wykonane m.in :

• dostosowanie zdjęć do wielkości ekranu pod względem rozmiaru dla bazowych wielkości responsywnych, tak by nie ładować za dużych zdjęć do strony,
• skompresowanie zdjęć bezstratnie programami typu iocompressor,
• zastosowanie funkcji lazy loading polegającej na doczytywaniu zdjęć wraz z przewijaniem strony, a nie na start wszystkich co zdecydowanie spowalnia proces wczytania strony,
• ustawienie wczytywania strony na fontach systemowych, w dalszej kolejności doczytywanie fontów docelowych,
• optymalizacja i zmniejszenie ilości zapytań do bazy danych Wordpress,
• minifikacja kodu css i js, czyli realizacja procesu mającego na celu zmniejszenie kodu źródłowego ( usunięcie niepotrzebnych linii kodu ),
• włączenie cache’owanie strony, które polega na ustawieniu wersji statycznej strony,

‍