Wednesday, September 21, 2016

Design of a outsource development company website from SE Asia (Thailand): personas, usecases, implementation

Today we are going to make an analysis of an IT development company website from SE Asia: .

Lets start from usesecases. Thai IT development company website must acquire customers in country and overseas. We are going to check this UX with four personas:
1) a Product manager from a foreign IT company who is looking for outsource agency in Asia (India, China, Thailand).
2) a Businessman from Thailand who needs development service.
3) a Startup member from USA who is looking for cheap development of their idea.
4) an Employee who is looking for new job in IT company


UC. 1 Users want to leave an order
UC. 1.1 Long partnership with a foreign IT company (outsource)
UC. 1.2  Develop a web-site (Web Design and Development)
UC. 1.3 Develop a mobile application
UC. 1.4 Develop a desktop custom software
UC. 1.5 Develop an embedded system (IoT)
UC. 1.6 Provide IT support of existed project

UC. 2 Users want to be sure that the company is reliable
UC. 1.1 Have a look at the staff
UC. 1.2 Watch video with a CTO / CEO / owner
UC. 1.3 Check a portfolio
UC. 1.4 Check prices / costs
UC. 1.5 See the company history
UC. 1.6 See development methodologies
UC. 1.7 See an easy step-by-step explanation of a whole process
UC. 1.8 Check official documents of legal organization
UC. 1.9 Check partners

UC.3 Users want to communicate with the company
UC.3.1 Contact with the company
UC.3.2 Calculate price of a project online
UC.3.4 Leave an order online
UC.3.3 An instant chat with a manager

UC.4 Users want to work in the company
UC. 4.1 Find a job application
UC. 4.2 Watch about an employees' life inside the company
UC. 4.3 Apply CV


All services are represented on two sliders on the beginning of the landing page. There are Web-site, Software and Apps sections.  Every section has an illustration, a short description, a bulleted list of services and a link to the online cost calculator.

User can check prices and costs of the project on a separate page with all features. There is an approximate price for average website that is quite cool and show customers the level of this company. So, they could understand it is suitable to their budget or not. 

Users could find a step-by-step instruction of development process after the "Our Services" part. It stars with an order and finishes with a delivery. It is a right place for this instruction because it shows in an easy way how the company works. Users might be ready to leave the order but they need to check the reliability of the company.

A portfolio comes after "How it works" part. The design is a bit outstanding. While the website is light - the portfolio is dark blue.

Every project could be opened on a pop-up window with detailed information. It is quite hard to make good design for a portfolio part because all projects are different (from software installation to web-design). This website just cut images to the proper size. Some websites looks weird on a wide monitor because there is only top of the website visible. If users want to see whole image - they should click on the enlarge button in the right top corner.

Some technical information is on the "Development methodology" part. It is divided in sections: Design, Technology, Workflow. Logos show to experienced customers technologies that the company use in its work. This part is quite important for persona #1 "project manager" because an outsource agency's technologies must match to the same in their local company.

"Company overview" section proves reliability of this enterprise. Potential customers could find official document there. The link is not visible. This usecase (UC. 1.8 Check official document of legal organization) is very important for all personas and need more attention.
But video with a senior developer is very adorable. It is in English with subtitles. The video improves reliability of the company because now it is not only a page in internet but a real man in Asia who offers users to contact him.

"Our team" part is big and it is developed very good. They made photo of each employee and this makes the company's website more human friendly.

There is "Partners" section after "Our team". Users could check some famous logos like Microsoft and Dr.Web but there is no information how they really cooperate with this company. Anyway this part looks ok and add some positive impression.

The website has several ways for communication with customers.
1) a Phone number is in right top position. It is fixed along with a navigation bar to browser windows and users could see it all the time.
2) Instant messengers with a manager via Line (that is popular in Asia) and Skype.
3) a Contact form for a quick request in the bottom of the page.

Also user could send his project cost calculations to the company via the online calculator. It is good trick to get users into interaction with the website.

The calculator works very interesting. It use certain price for every usecase to calculate a total cost of a future software project. In this way customers could leave a very detailed order to the company. It also covers UC. 1.4 Develop a desktop custom software and UC. 1.5 Develop an embedded system (IoT).

What about local customers? If users come to the website from Thailand - they would be redirected to a thai version. But all foreigners could come  to English version. It is possible also to change language with switcher on the navigation bar.

Ok. The main page and price / cost page almost cover all usecases of the first persona (a project manager), the second (a businessman from Thailand) and the third (a startup team member). The company looks reliable, with big team of designers, marketers and developers. Lets check how responsive is the design.
The layout changes to mobile and tablet. Even the difficult "Portfolio" part is transformed.

Every IT company need employees. IT professionals are rare free nowadays and companies tried very hard to make the work attractive. This company created special page for potential employees. There is information about opened vacancies and information about requirements.

There are video, photos and personal impressions about working in the company. It gives future employees better understanding where they are going to.

Every position has its URL so HR could post the link to certain application.

Potential employees could apply their CV to the company via interactive form.


After our research we formed 4 personas: a product manager, a local businessman, a startup member, an employee and 4 groups of usecases: users want to leave an order, to be sure that the company is reliable, to communicate with the company, to work in the company. This website cover all usecases for all personas.
The UI is quite modern and consist of many unique illustrations. That makes customers to believe that the company take care about its prestige and appearance.
We recommend UX and UI designers to follow this sample while they are going to create a website for an IT company.

See also

Monday, August 29, 2016

Google Calendar vs. Outlook Calendar: usecases and solutions of scheduling service

Online calendars and schedules are quite popular services in business. There are 2 big players between this type of  software: Google Calendar and Outlook Calendar. Lets test its features and figure out which one is better. As usual these web-services have more than 90% of users need. We will test only main usecases that are familiar for everyone and only in desktop version.

Usecases of an online calendar:

1) User can create, edit and delete task.
Both services have similar process of creating new task - users just select on timetable the time and type a name. The timetable is divided into parts of half an hour.

Google Calendar

Outlook Calendar

If user want to delete of edit a task he would click on it and choose right options.

Google Calendar

Outlook Calendar

Users could also use right click of the mouse to manage tasks in Outlook Calendar. There are several useless features like icon and color customization. Also user can send the task to someone using Forward button. We can use this

2) User must be able to share the task with the group of user.
Both services provide the same complicated solution of this usecase. Users must create the task and than edit the task where they could add participants. It is a long way especially if users share their tasks often.

Google Calendar

Outlook Calendar

3) User must be able to set up notification for a task.
Both services have this feature but they work different. Google Calendar shows a pop-up with reminder but Outlook Calendar make a sound.

Google Calendar

Outlook Calendar

4) User must be able to repeat a task.
It seems like Google calendar has more easy system. Users can do the same actions in Outlook but it is divided into 3 steps.

Google Calendar

Outlook Calendar

5) Users need to duplicate tasks
Our field discovery shows that users want to be able to duplicate a task. If some event (lunch or the end of working day for example) interrupt the tasks - it would be easy to duplicate one task and set up when users want to continue. Non of calendars provide this feature.

6) Connect with powerful alarm clock
Other survey shows that users that usually forget about important meetings want to setup powerful alarm notification.

There is no big difference between Google and Outlook desktop calendar features.

A very impressive difference is the price of  Outlook Calendar that comes with Office Pack costs from 60-120 USD per year. While Google Docs and Calendar are free with almost similar features

Outlook Calendar has more modern UI while Google Calendar use old one. There are several design solution that make Outlook little bit more user-friendly. The calendar manage working time and free time by highlighting them with different color. And also we can show only working days in the window. It could be convenient for people who use calendar only for their job.

Monday, August 1, 2016

Принципи матеріального дизайну і чим він загрожує дизайнерам

Для багатьох користувачів смартфонів поява матеріального дизайну відбувался непомітно. Просто деякі додатки стали виглядіти інакше, трішки краще і веселіше. Користувачі зазвичай приписують ці якості додатку, а не технології, на якій додаток побудований. Проте різниця полягає саме у програмному каркасі для Android - Material design. Сподіваюся ця стаття допоможе вам розібратися, що ж відбулося у 2014 році в лабораторії Google.

Група дизайнерів Android взялася за задачу - розробити новий інтерфейс, який би був максимально реалістичний - тобто наслідував закони реальної фізики, при цьому залишаючися 2д. Група обрала папір у якості джерела натхнення та наслідування. У своїй лабораторії за допомогою освітлювальних приборів спочатку вони визначили найреалістичніші тіні.

Завдяки цим "косим" тіням ми можемо легко упізнати іконки додатків зроблених на матеріальному дизайні.

Тіні роблять ілюзію, що між поверхнею програми і склом екрану смартфону є простір, у якому ми відкриваємо чи перетягуємо елементи додатку. Проте тінь - лише незначний результат дослідження.

Найбільшим досягненням дослідників матеріального дизайну можна вважати нові технології анімації. Матеріальний дизайн виглядає немовірно живим порівняно зі своїми попередниками.

Перш за все, вони вводять в рух пришвидшення, пригальмовування та стрибання. Елементи не можуть рухатися з однаковою швидкістю у реальному світі - їм потрібен час для того, щоб розігнатися, те саме стосується і зупинки.

У цьому прикладі видно як форма з'являється знікуди і повільно зупиняється на екрані. Складається враження, що форма просто влітає на екран. Причому верхні поля влітають першими, таким чином увага користувача йде від верхніх елементів до кнопки APPLY. Так дизайнер може робити міні екскурсію у свій інтерфейс.

Матеріальний дизайн дуже чутливий. Усі елементи відгукуються як тільки користувач до них торкається. Розробники досягли зменшення відгуку нового вікна до 1/3 секунди. І навіть ці долі секунди приховуються анімацією.


Як і у реальному світі в матеріальному дизайні елементи "знають" про існування один одного. Якщо ви соваєте один елемент - інші теж починають рухатися.

Дуже важливим нововведенням стали зв'язки між попереднім та наступним вікном. Коли система переходить на інше вікно - користувач розуміє що відбувається на екрані.

Дизайнери концентрують увагу користувача на одному елементі при зміні вікон. Зазвичай це якась іконка чи фотографія. Якщо між вікнами немає спільних елементів - можна використати колір, як у цьому прикладі рожева кнопка стає частиною наступного вікна.

Одними з найпомітніших елементів матеріального дизайну є покращені анімовані іконки. Вони оживають від дотиків, роблячи досвід користувача дуже емоційним.

Також матеріальний дизайн легко впізнати по універсальній кнопці, яка знаходиться у правому нижньому кутку. Кажуть, що навколо неї точилося багато дискусій. Розробники не вірили, що користувачі зрозуміють її функціональність.

Чим поява матеріального дизайну загрожує дизайнерам і сфері мобільних додатків загалом? Хоча усі зміни стосуються UI, зміни набагато глибші. Як влучно висловився Oleksandr Slobodskyi: дизайн інтерфейсу  впливає на досвід взаємодії (UX).

  1. Потреба створення такого складного інтерфейсу показує, що ринок додатків починає перенасичуватися. Тут як і з іграми - зі збільшенням їхньої кількості - покращувалися інтерфейси, оскільки дизайн, а не функціональність стає визначним елементом вибору між однаковими продуктами.
  2. Кількість роботи над таким інтерфейсом зростає у десятки разів. Замість того, щоб склепати дизайн за тиждень і віддати програмістам - тепер доведеться тижнями промальовувати відео анімованих елементів однієї сторінки.
  3. На підході цілий клас нових програм, які об'єднають графіку і програмування. Перші невдалі спроби уже робить Adobe з продуктом Edge Animate. Але інтерфейс ще занадто складний і робота дуже нестабільна. Проте потрібно бути готовим, що скоро доведеться вчити нові програми.
  4. Кількість роботи для дизайнерів зростатиме, тому скоро потрібно очікувати збільшення попиту на тих, хто встиг освоїтися у новому динамічному матеріальному світі інтерфейсів.
  5. Матеріальний дизайн - це не просто фішка Android. Дослідження, зроблене дизайнерами Google змінює підхід до інтерфейсу і робить його реальнішим. Це великий крок до покращення наших стосунків з машинами, перетворення інтерфейсів на живу приємну людині взаємодію. 

Промоційне відео матеріального дизайну

Інтерв'ю з розробниками. На 45 секунді і далі показують реальні експеременти зі світлом.

Детальний опис з дуже детальними прикладами як можна робитим і як не можна робити:

Перекладено з статті "How to use material design in UIs of softwares, websites and applications"