Step by Step
UI / UX Roadmap
Kullanıcı deneyimi yaklaşımı dijital ürününüzü yaratmanıza yardımcı olur.
Keşfet
Proje kapsamını doğru tanımlamak için “Hangi noktadayız, ne yapmak istiyoruz, neden yapmak istiyoruz, ne yapmalıyız ve nasıl yapacağız?” sorularını süreç boyunca yanıtlamayı, projenin başarılı olması yolunda en önemli aşama olarak görürüz.
1. Workshops
İş hedefleri, kısıtlamaları ve potansiyelleri hakkında bilgi toplama, kullanıcılar, kaynaklar, pazar, proje tanıtımı.
TOOLS: Lean Canvas, Business Model Canvas, İlk İzlenim Çalıştayı, Sezgisel Analiz, Empati Haritası
Amacımız ve hedeflerimiz neler? Kısıtlarımız neler? Hangi kaynakları kullanılabiliriz? Ürün oluştururken akılda tutulması gerekenler nelerdir? Ürünün eşsiz değer önerisi nedir? Hali hazırda saptanmış bilgiler neler? Hangi platformlar için tasarım yapılacak? Hedef kitle kim? Hedef kitle nasıl segmente edilmiş? Proje rolleri nedir?
- Ürünün tutarlı vizyonu
- Proje gereksinimleri.
- Ürün ve özelliklerine bütünsel bakış (Sezgisel analiz raporu).
- Ürünün şeklini belirleyen faktörlerin belirlenmesi.
- Kapsamlı proje planı
2. Araştırma ve Rakip Analizi
Rakip analizi, dijital kanalların kalitatif ve kantitatif analizi,
Rakipler kimler? Neyi daha iyi yapıyorlar? Neyi onlardan daha iyi yapabiliriz? Onların hatalarından neler öğrenilebilir? Avantajları neler? Onlara kıyasla avantajlarımız neler? Onlardan farklılaşmayı nasıl planlıyoruz?
- Pazarda rekabet etme stratejisi
- İyi ve kötü modeller - kıyaslamalar
- Rakip analizi raporu
3. Kullanıcı Araştırmaları & İçgörü Toplama
Kullanıcılar hakkında bilgi toplama, hedeflerini, davranışlarını, motivasyonlarını, karar verme süreçlerini, bilgilerini ve problemlerini öğrenme.
TOOLS: Birebir görüşmeler, kullanıcı ile bir gün, anketler, bağlamsal görüşme, gözlemler.
Potansiyel kullanıcılarınız kimler? Neye ihtiyaçları var? Ürünü nasıl kullanacaklar? Beklentileri neler? Çözüme ihtiyaçları olan problemleri neler? Rekabetçi çözümleri kullanıyorlar mı? Onları nasıl ve neden kullanıyorlar?
- Personalar
- Kullanıcı hikayeleri
- Araştırma sonuç raporu
- Kullanıcı yolculuğu haritası
Düşün
Keşif aşamasında elde ettiğimiz bulguları derinlemesine analiz edip yapılandırarak, bizi gitmek istediğimiz noktaya götürecek en etkin yolu tanımlamak, tasarım sürecinin doğru temellere oturması için vazgeçilmezdir.
1. Problemi Tanımlama
Toplanan tüm bilgilerin analizi, hipotez backlog, strateji geliştirme, marka kişiliği, kullanıcı tipleri ve yetkileri.
TOOLS: Marka kişliği çalıştayı, Brainstorming, Ideations prompts, What if … prompts.
Potansiyel kullanıcılarınız yaşadığı problemler neler? Biz bu problemelere nasıl çözümler üretebiliriz? Markanızın dili ne olmalı? Hipotezlerimiz neler? Yol haritamızı yeniden güncellemeli miyiz?
- Hipotez backlog
- Marka kişiliği haritası
- Kullanıcı tipleri ve yetkileri matrisi
2. Kullanıcı Senaryoları, Akışlar
Ürünü kullanırken olası kullanıcı yollarını tanımlama. Temel ekranların ilk taslaklarını oluşturma.
TOOLS: User flows, Story boards, Lo-Wi Wireframe, Overflow.io
Kullanıcılar ürünü kullanırken nasıl davranacak? Kaç tane kullanıcı yolu tanımlayabiliriz? Kullanıcılar ana görevleri gerçekleştirmek için adım adım ne yapacak? Olası kullanıcı senaryoları nelerdir? Ürünü kullanmanın olası yolları nelerdir? Ürünü kullanma bağlamı nedir?
- User flows - Kullanıcıların ürünü kullanırkenki yolların tanımı.
- Lo-Wi Wireframe - Ekranların en temel tasarım kalıpları.
- Kullanıcı hikayeleri
- Müşteri yolculuğu haritası
3. Bilgi Mimarisi
Kapsamın şimdiye kadar toplanan bilgiler temelinde ayarlanması.
TOOLS: Card Sorting, Tree Test, Flows, Site map, mind mapping
Hangi özellikler gereklidir? MVP (Minimum Viable Product) nedir? Hangi özellikler erken müşteri memnuniyeti ve geri bildirim sağlamak ve gelecekte ürünü geliştirmek için çok önemlidir? Bir sonraki aşamada ne yapılabilir?
- Site Haritası
- Kategori Ağacı
- İçerik Mimarisi
- Sistem Mimarisi
Tasarla
Keşif aşamasında elde ettiğimiz bulguları derinlemesine analiz edip yapılandırarak, bizi gitmek istediğimiz noktaya götürecek en etkin yolu tanımlamak, tasarım sürecinin doğru temellere oturması için vazgeçilmezdir.
1. Prototip ve Etkileşimler
Ürünün belirli kısımlarının görsel sunumu.
TOOLS: Hi-Fi Mockups, Adobe XD
Hangi ekranlara ihtiyacımız var? Ekrana belirli elemanlar nasıl yerleştirilir? Hangi bilgiler vurgulanmalı? Çözüm olası tüm kullanıcı senaryolarını kapsıyor mu?
- Hi-Fi Mockups
- Style guide şablonu
- Etkileşim Haritası
2. Kullanıcı Testleri & Ürün Geliştirme
Fikrin sezgisel ve izleyici için çekici olup olmadığını kontrol etmek. Hataların belirlenmesi, prototipi uygulamadan önce optimize etmek.
TOOLS: Kullanılabilirlik testleri, A/B Testleri,
Bu çözüm optimal mi? kullanıcılar ürününüze nasıl tepki veriyor? Kullanıcıların belirli görevleri tamamlamaları ne kadar kolay? Yazılım aşamasından önce neleri geliştirebiliriz?
- Arayüz yerleşimindeki hatalar
3. Arayüz Tasarımı
Ürünün son görünümünü yaratmak.
TOOLS: Adobe XD, Photoshop, Illustrator
Son görünüm ve kullanım, kullanıcılara uygun mu? Bu aşamada kullanılabilirlik ile ilgili bir problem var mı? Nihai tasarım ürünün vizyonuyla uyumlu mu? Etkileşimli öğeler benzer mi görünüyor? Harekete geçirme çağrısı (CTA - Call to Action) doğru şekilde mi vurgulanıyor? Öğelerin hiyerarşisi doğru mu?
- Ürün sayfalarının görsel tasarımları
- Style Guide
- Makro ve mikro etkileşimler
- Branding
Uygulama
Uygulamanızı canlıya alırken, modern arayüz frameworklerini kullanır, SEO uyumlu ve Erişebilir olması için çalışırız.
1. Yazılım Geliştirme
Ürününüzün yazılım geliştirme süreci
FRAMEWORKS & LANGUAGE: HTML5, CSS3, Javascript, Jquery, Angular, Lottie, Fullpage.js, anime.js
- Design System
- Front-End Development