Apartamenty Wesoła to inwestycja skierowana do osób wymagających, którzy poszukują nowoczesnych i zaskakujących rozwiązań architektonicznych w doskonałej lokalizacji

Chcieliśmy aby realizacja wyróżniała się odważnym i designerskim stylem. Niemniej ważne było zastosowanie funkcjonalnych narzędzi, które pozwoliłoby na ciekawe i sprawne  zapoznanie się z ofertą. Do zrealizowania otrzymaliśmy zatem  dwa zadania:

• Oryginalne zaprezentowanie inwestycji
• Stworzenie funkcjonalnego, przyjaznego użytkownikowi serwisu

Layout

Naszym celem był projekt idealnie skrojony pod inwestycję, nawiązujący stylistyką do zastosowanych rozwiązań architektonicznych. Chcieliśmy nie tylko uciec od stereotypu w postaci uśmiechniętej rodziny na tle mieszkania ale przede wszystkim stworzyć oryginalny i niepowtarzalny koncept.

Strona jest przejrzysta i zawiera tylko niezbędne informacje. Z poziomu strony głównej pokazaliśmy wizualizację i lokalizację inwestycji z mapą. Ważnym elementem są również aktualności, w których inwestor będzie na bieżąco informował o kolejnych etapach budowy. Głównie jednak nacisk położyliśmy na bardzo dobrą prezentację wizualizacji inwestycji, stąd klika widoków do wyboru.

Interaktywne wizualizacje

Zaproponowaliśmy ciekawy i wygodny sposób przeglądania wybranych mieszkań. Oglądając inwestycję możemy bezpośrednio z wizualizacji wybrać interesujące nas mieszkanie. Po kliknięciu w mieszkanie, przechodzimy do szczegółów opisu, takich jak metraż, podział na pomieszczenia, cena, itp. Mamy do dyspozycji również rzut mieszkania i podgląd lokalizacji mieszkania. Dodatkowo możemy również z tego miejsca przejść do obliczania raty kredytu lub bezpośrednio skontaktować się ze sprzedawcą.

Interaktywna tabela mieszkań

Kierując się jedną z naszych podstawowych zasad – użytecznością, wykonaliśmy interaktywną tabelę z listą mieszkań. Narzędzie to będzie wspomagać proces przeglądania i porównywania mieszkań. Tabela zawiera kluczowe informacje dotyczące poszczególnych mieszkań, w tym oznaczenie statusu mieszkania (sprzedane lub wolne). Wędrujący wraz z naszymi poszukiwaniami kursor uaktywnia podgląd mieszkania na wizualizacji inwestycji – pojawia się odpowiednia miniaturka. Natomiast po kliknięciu w wybrane mieszkanie przechodzimy do dedykowanej podstrony.

Interaktywne rzuty

Garaże i komórki to istotny element oferty, ale niestety zazwyczaj dość kiepsko zaprezentowany w serwisach deweloperskich. Postanowiliśmy wyjść na przeciw oczekiwaniom przyszłym klientom naszego inwestora i stworzyć narzędzie, które w prosty sposób prezentowałoby lokalizację i dostępność tej części oferty. Wykonana przez nas interaktywna prezentacja z rozmieszczeniem poszczególnych garażów i komórek zawiera oznaczone odpowiednimi kolorami statusy dostępności wraz ze skróconym opisem parametrów. W podobny sposób pokazane zostały również lokale użytkowe.

Pozostałe elementy

Nie mogło również zabraknąć takich kluczowych elementów jak formularze szybkiego kontaktu, mapki z lokalizacją inwestycji, czy galeria zdjęć. Strona została odpowiednio przygotowana pod wyszukiwarki i wyposażona w wygodny panel systemu zarządzania treścią.

Liczymy, że tak przygotowany serwis pomoże deweloperowi w skuteczny sposób pokazać wszystkie atuty inwestycji a jego klientom pozwoli szybko dotrzeć do poszukiwanych informacji na temat wymarzonego mieszkania.

Podstawowym założeniem jakim się kierowaliśmy było zbudowanie wizerunku firmy profesjonalnej, innowacyjnej i otwartej.
Budowę logo oparliśmy o nazwę firmy, która pochodzi od zangielszczonego nazwiska właścicielki (lark – skowronek). Postanowiliśmy nawiązać do stylistyki origami  by podkreślić cechy kompleksowości oferty i perfekcjonizmu w działaniu.

Strona internetowa w przejrzysty i wyczerpujący sposób prezentuje usługi firmy. Została oparta o CMS WordPress zmodyfikowany w taki sposób by wszystkie zaprojektowane przez nas elementy strony były łatwo edytowalne przez osoby zarządzające treścią.

Strona ma przede wszystkim charakter informacyjny. Na stronie głównej znajdują się aktualności dotyczące konferencji. Duże znaczenie mają logotypy sponsorów i partnerów, staraliśmy się jednak tak wkomponować je w stronę by nie wpływały negatywnie na jej układ i czytelność, co często spotykane w tego typu stronach.  

Konferencja to przede wszystkim uczestnicy dlatego dużą wagę przywiązaliśmy do rejestracji na stronie. Użytkownicy mają do dyspozycji formularz rejestracji online do którego prowadzi wyrazisty przycisk „Call to action”. 

Co zachęci odwiedzających do uczestnictwa w konferencji? Agenda i prelegenci. W związku  z tym zdecydowaliśmy się wyciągnąć te dwie pozycje poza standardowe menu wyznaczając im miejsce w kompozycji strony. Zdjęcia prelegentów wraz z krótkim opisem zmieniają się losowo zachęcając do kliknięcia i przejścia do pełnego opisu. 

Projekt graficzny nawiązuje do nowej identyfikacji. Interfejs w towarzystwie wykonanej przez nas ilustracji oddaje klimat kawiarni, w której spotykają się i pracują uczestnicy konferencji. Kawa w branży IT jednoznacznie kojarzy się z technologią JAVA, która jest główną tematyką imprezy. 

Pracując nad funkcjonalnością koncentrowaliśmy się na osiągnięciu prostej i czytelnej prezentacji oferty. Użytkownik odwiedzający stronę może wybrać mieszkanie przeglądając wizualizacje budynku (kierując się być może przede wszystkim położeniem mieszkania) lub porównać wszystkie mieszkania na liście. Z obu tych miejsc może przejść  do widoku mieszkania, gdzie znów będzie mógł zapoznać się z jego parametrami oraz rzutem. Jeśli zainteresuje go oferta może z łatwością przejśc do kalkulatora rat na stronie biura sprzedaży. Każde mieszkanie ma dwa stany: dostępny i sprzedany. 

Budynek wyposażony jest również w podziemny garaż (gdzie mieszczą się miejsca postojowe i komórki lokatorskie) oraz lokale usługowe na parterze. Użytkownik odwiedzający może zapoznać się z oboma poziomami i poznać powierzchnie oraz statusy poszczególnych obiektów. 

Na stronie znajdują się też informacje dotyczące inwestycji (w tym standard wykończenia, lokalizacja, galeria), aktualności i formularz kontaktowy. 

Projekt graficzny nawiązuje do nowoczesnej architektury budynku i odpowiada charakterystyce grupy docelowej (ludzie prowadzący nowoczesny, aktywny tryb życia, związani z tętniącym życiem miastem jakim jest Kraków).

Etapy tworzenia strony

Analiza

Zanim rzucimy się w wir pracy koncepcyjnej musimy poznać charakterystykę, otoczenie
i potrzeby naszego klienta (marki, której internetowy wizerunek opracujemy). Niezwykle ważne są dla nas informacje na temat specyfiki marki, jej cech charakterystycznych, misji, celów i grupy docelowej a także najważniejszej konkurencji.

Żeby zachować spójność prezentacji marki musimy poznać jej wizerunek, istniejącą identyfikację wizualną.  Aby stworzona przez nas strona internetowa była efektywna musimy znać jej odbiorców, wiedzieć jak korzystają z internetu i wczuć się w ich role.

Projekt architektury informacji

Strona internetowa to nic innego jak nośnik informacji, które muszą być zaprezentowane użytkownikowi w możliwie najlepiej przyswajalny sposób. 

Dobra strona internetowa to dobrze zaprojektowany budynek, którego rozkład pomieszczeń umożliwia odwiedzającemu sprawne dotarcie do poszukiwanych przez niego informacji. W takim budynku użytkownik nie błądzi, nie czuje się zagubiony. Dobrze rozplanowane wnętrza strony internetowej to efekt odpowiedzialnego podejścia do architektury informacji.

Projektując pod kątem architektury informacji definiujemy zawartość strony internetowej, łączymy jej części składowe w odpowiednie grupy tematyczne, tworzymy sieć połączeń między poszczególnymi podstronami
i opracowujemy najbardziej optymalną nawigację.

Projekt funkcjonalny

Ten etap możemy porównać do układania klocków. Projektując funkcjonalność strony opracowujemy jej makiety. Tym sposobem określamy jak będzie prezentowana zawartość, gdzie będą położone elementy składowe i jaka będzie ich funkcja.

Makiety to nie tylko idealny punkt wyjścia do pracy dla grafika ale także najlepszy sposób na zaprezentowanie klientowi przyszłego kształtu strony i rozwianie wszelkich wątpliwości co do jej funkcjonowania. Na tym etapie wprowadzanie zmian wiąże się z mniejszym nakładem pracy niż w przypadku projektu graficznego czy wdrożenia.

Projekt graficzny

Kiedy, wspólnie z klientem, ustalimy ostateczny kształt strony przechodzimy do „ubierania” go w szatę graficzną. Na tym etapie wykorzystujemy otrzymane wcześniej informacje na temat wizerunku marki i materiały otrzymane od klienta.

W pierwszej kolejności tworzymy projekt strony głównej, który pozwoli przedstawić klientowi ogólną stylistykę witryny, tzw. „look”. Po jego zaakceptowaniu przechodzimy do projektowania pozostałych podstron.

Realizacja

Po zakończeniu prac nad projektem graficznym przechodzimy do realizacji. Działanie zaczynamy od instalacji i konfiguracji systemu CMS, budujemy szkielet przyszłej strony internetowej urzeczywistniając jej funkcjonalność. Kolejny krok to cięcie i kodowanie projektu graficznego oraz wdrożenie go do istniejącego już silnika.

W wielu przypadkach na tym etapie uzupełniamy również stronę o treści „początkowe” przekazane przez klienta.

Testowanie

Podczas testowania sprawdzamy czy strona wyświetla się w różnych przeglądarkach poprawnie, oraz czy wszystkie elementy interaktywne działają jak należy, a także udoskonalamy to co mogłoby działać lepiej :)

Przekazanie strony klientowi

Skończona i przetestowana strona internetowa zostaje w całości przeniesiona na serwer docelowy.
Ostatni etap to przeszkolenie klienta w obsłudze systemu CMS aby bez problemu mógł zarządzać własną stroną internetową.

W przypadku bardziej rozbudowanych stron internetowych, do których zaliczają się sklepy, duże serwisy czy aplikacje internetowe etapów projektowania może być dużo więcej. Wtedy również testowanie odbywa się na innych zasadach ale o tym kiedy indziej!

Wizerunek marki stworzyliśmy praktycznie od zera. Punktem początkowym było opracowanie nazwy. W kolejnym etapie opracowaliśmy identyfikację wizualną marki na czele z logo. Stworzony przez nas znak bazuje na prostym symbolu koszyka sklepowego z wpisanym „S”.

Stworzyliśmy również prostą stronę internetową tzw. „one-page” składającej się wyłącznie ze strony głownej. Wszystko po to by użytkownik mógł szybko dotrzeć do najważniejszych treści.

By jeszcze szybciej przekazać użytkownikowi istotę Sugentum opracowaliśmy i wykonaliśmy animację promującą produkt.

Dotychczasowa strona internetowa powstała z pomocą kreatora jednego z dostawców hostingu. Jej oprawa graficzna pozostawiała wiele do życzenia. Architektura informacji była zagmatwana i nieczytelne dla odwiedzających.

Stworzyliśmy projekt atrakcyjny wizualnie i dzięki swojej funkcjonalności wychodzący naprzeciw użytkownikom. W czytelny sposób oddzieliliśmy promocje sezonowe od pakietów stałych oferowanych klientom. W związku z bogatą ofertą podzieliliśmy prezentowaną ofertę i cennik na kategorie, co pozwala na szybsze dotarcie do pożądanych informacji. Strona została wzbogacona o aktualności i czytelną prezentację lokalizacji Studia a także zintegrowana z platformą Facebook.   Silnik strony to CMS WordPress zmodyfikowany w taki sposób by wszystkie zaprojektowane przez nas elementy strony były łatwo edytowalne przez osoby zarządzające treścią.

Mimo ograniczających założeń projektu udało nam się zaangażować w udział ponad 340 osób. Rozwiązując biznesowe zadania i odpowiadając na pytania wspólnie zarobili przez ten czas 561 200 wirtualnych złotych!

Strona oparta jest o CMS WordPress zmodyfikowany przez nas tak, by wszystkie jej elementy mogły być łatwo uzupełniane przez osoby zarządzające zawartością. Strona funkcjonuje w dwóch wersjach językowych (polskiej i angielskiej), które w łatwy sposób edytowane są z poziomu jednego CMS.

Studencki Festiwal Piosenki to najstarsza impreza kulturalna środowiska akademickiego i zarazem najstarszy – bo powołany w roku 1962 – festiwal piosenki w Polsce.