WHAT IS GOTA

by Dariusz Biskupski

SOAK IN THE EXPERIENCE

WHAT IS GOTAUX DESIGN STORY

ABOUT THE APP

Get off the app (GOTA) is the application for finding various activities in the near vicinity, at most convenient time and with the most relevant theme. The idea came from my own struggle in finding events I am interested in. Moreover, I happen to discover such inconvenience was experienced by many people. I have initiated user centred design process I am introducing here which has ended with creating user interfaces for very unique event application, so needed on the market nowadays.

Introduction | �2

ABOUT THE AUTHOR

In the effect of this intensive training I developed the following event application purely in UX process including user research, personas, journeys, wireframes, usability testing, UI design.

Along the way I acquired a tremendous amount of knowledge, mostly via cooperation with my mentor and multitude of people from different backgrounds whom I surveyed, interviewed and who tested my prototypes.

I hope you enjoy this reflection of my journey in the form of the following portfolio.

In the past 6 months I have participated in mentored online program lead by one of the recognisable UX/UI designers in Berlin’s startups scene - Wojciech Hupert. Till then my experience was focused around building back-end apps (Ruby, Node.js) & from-end (JavaScript, CSS, HTML) apps.

dariuszbiskupski

dariuszbiskupski.comwww

darekbiskupski

[email protected]

visiona

Introduction | �3

TABLE OF CONTENTS

�4

1. RESEARCH & DISCOVERY

2. CONCEPT DEVELOPMENT

3. PROTOTYPING

4. USABILITY TESTING

5. DESIGNING THE APP

WHY ANOTHER EVENT APP?

There are many events not published

Current event apps are focused on selling events rather than matching user preferences with adequate activities, in the effect we have many lobbed events repeating

The details about events do not reveal important information at first glance, ie. how far from my location is it, what type of music, price.

There is no application showing events by location on a map or in the range

OBSERVATIONSThe information about activities available in Dublin is scattered across a lot of different website

156,000,000 results for googling “events in dublin february 2019”

Research & Discovery | �5

COMPETITIVE ANALYSIS

STRENGTHS OPPORTUNITIES

WEAKNESSES THREATS

• A unique platform to find local events • Community aspect • Facebook & Meetup integration • Calendar, Place & interest locating

events algorithms

• Better marketing strategy • Let pubs, and all venues to publish

their events on the app • Include map showing events • Improve people/events matching • Improve UX/UI

• It’s only in India and some cities in USA

• Outdated UX/UI

• Some similar apps slowly start popping up

• Local websites holding listing events

STRENGTHS OPPORTUNITIES

WEAKNESSES THREATS

• Very popular • Big audience • WeWork investing in its expansion

• Improve UX/UI • Better integration with other online

services • Involve external institution to free

event creations

• Limited only to events created by users

• Fee for creating a group • No map localisation • Calendar & interests can get bit

messy to locate events

• Facebook plans about community creation and improving event experience

FINDING THE GAP IN THE MARKET

THE GOAL & MISSION OF MY APP➤ Meet new people ➤ Enhance personal development over personal comfort ➤ Don’t miss activities that you would love to attend ➤ Find events tailored to your personality quickly

“Get off the App” app - GOTA

(get off the screens, TV, couch, routine etc – get on to places, events, workshops, acquire skills & knowledge etc.).

POTENTIAL USER STORIESAs a user, I want to login to my account, so that I can see my saved preferences (ie. activities I like, one I signup for, see befriended users).

As a user, I want to choose what activities I am interested in so that I can see a list of relevant events going in town now.

As a user, I want to clearly see coming events as a grid so that I can quickly find what I need and save time.

NAME OF THE APP


USER RESEARCHSURVEY

Interviewee 1 - Project Manager

Interviewee 2 - Technology Support

Interviewee 3 - Recent Graduate

Interviewee 4 - Managing Director

"Couldn't find events on time and missed some of them.”

“Whenever I google for events, the results are spread across time and places. Some events are not updated, irrelevant or doesn’t say much.”

“It is difficult to find the type of activity I want. Reviews are missing. Tripadvisor would be good but it shows hotels, restaurants, sponsored content.”

“Due to lack of time I am not attending many events. Music scene is saturated, but a space is for learning activities which I am not aware of many.”


completed by 39 respondentsINTERVIEWS4 people from various social backgrounds

CONCLUSION

• No one offers all events in one place, so users have to look for events in different places (there is no skyscanner for events)

• Activities could serve to answer different emotional states, problems or goals while current event websites focus mainly on advertising about events

• No-one seems to offer features such as adding events to a calendar with search based on near location

• There are multiple websites and apps that users use to find information about events & activities

• Almost all (if not all) websites and apps have the only feature: search by subject, date or place.

• There is a group of people that just don’t go to events ie. lack of time, social anxiety, no friends are going there, not convinced they can meet like minded people

• People are very interested in finding things nearby

• Finding things by word of mouth is almost as frequent as google search

• It is easier to go out with friends than on your own

• Many people are just too busy to go out

AFFINITY MAPPING SOME INSIGHTS


USER PERSONASBased on the finding from affinity mapping, I have created three personas that are representing the most frequent occurrences and characteristics of the potential users. I will focus on Cynthia in this presentation.


USER JOURNEY


USER FLOWHere are the main tasks that Cynthia passed on her journey.

Concept Development | �11

SITEMAP

This is the information architecture I created to visualise the pages and navigation flow in my web application GOTA.

I created few sitemaps, this one is final iteration updated with OptimalSort card sort study that I launched on Sep 23 2018. I invited 5 people to group about 30 cards representing themes, categories ie. yoga, jazz, food festival, sober etc.

In order to simplify previous sitemaps and solve a dilemma of multitude and complexity of categories and subcategories, moods and see how people associate and match various subjects.


LOW-FIDELITY WIREFRAMES

Based on personas, user flow and sitemap, I have started making first sketches. Here is the result of this iteration.

The home screen contains searching options like location, date, time, distance from user location, time range the events are in. I have made bigger buttons for moods, categories & phrases and these are alternative ways of pre-search filtering.

Once the search is set, the results show a list of events. Third screen shows additional menu with a filter to adjust ie. distance, edit or add the phrase or turn on extra filters. Fourth & fifth screen display results as list or map. The last screen is showing the chosen event.

The desktop version is taking advantage on extra space available so the search results are accompanied by a map and filters, while grid display by extra info under the thumbnails . The last screen is a modal with event details.


HIGH-FIDELITY WIREFRAMES

After iterative redesigning, correcting according to usability heuristics and user journey, I created mid-fidelity wireframes using sketch & Balsamiq Mockups to finally come with the following high-fidelity wireframes via Sketch.

Searching for events.

Added screens including wheel of moods & square of categories. All uploaded as prototypes via

Prototyping | �14

USABILITY TEST PLAN

In the following iteration I tested the application with 6 users (desktop & mobile version). I have prepared the usability test plan along with the script. After sending official invitation and receiving signed consent forms, I have conducted 4 moderated in-person tests and 2 moderated remote tests.

● Check if people understand and know how to search and find desired events

● Check if they understand what announcing an event is for?

● Check if they understand how finding users can benefit them

● Observe how users navigate and behave, are they finding what they looked for, any pain points?

TEST OBJECTIVES

I have recorded all 6 sessions via Hi-Q mp3 recorder app on Android, and additionally captured in video 3 sessions with Quicktime Player.

PLAN HIGHLIGHTS

All sessions tested high-fidelity prototypes in

The goal of this testing is to assess the satisfaction, efficiency and learnability of this app. I would like to evaluate if users can quickly understand the app, how to complete basic tasks like searching for events, creating event and if satisfy their need to find events for themselves - how they would approach it and if any errors are faced during the app exploration.

GOAL

Usability Testing | �15

USABILITY TEST RESULTS

Participant 1Participant 2

Participant 3

Participant 4

Number of occurrences

I then created affinity map of all comments, sorting them and organising


USABILITY TEST - REPORTING FINDINGSRAINBOW SPREADSHEET EXCERPTFollowing Tomer Sharon technique of organising usability test observations and Jakob Nielsen’s technique of 4 step rating scale, I have created the recommendations & potential solutions. In this presentation I focus on errors.


TESTED

UPDA

TED

TESTED

UPDA

TED

Error rates as 4 according to Jakob Nielsen’s four-step rating scale. Four participants pointed this issue. It is crucial feature and causing lot of confusion. Moreover many other issues are affected by this like too many negative feelings exposed or how to search in future event with a current feeling.

Suggested Change: Replace actual feelings with suggested responses to various feeling. Consider using ie. drama instead of sad, relaxing instead of tired, curious into learning, jittery & depressed into personality development etc.

Evidence: All participants didn’t understand this functionality. At various points it also confused understanding of other users like problem of using feelings for future events, some participants were unclear as to how name some feelings.

Issue 4: “Moods were not clear, not sure what to choose and how this links with my search”

USABILITY TEST - RECOMMENDATIONS… first of the issues fixed and reported.


UI DESIGN - TYPOGRAPHY

Header 1Ubuntu, Bold, 52pt, #E7E6F7

Header 2Ubuntu, Bold, 33pt, #FBF5F3Context: Desktop Profile Menu

ParagraphAbel, Regular, 25pt, #E7E6F7 or #FBF5F3

ButtonsUbuntu, Bold, 25pt, #222A68

LabelsUbuntu, Bold, 27pt, #FBF5F3 & A1EDFDContext: Desktop Labels, Subheadings

Context: Body Text, Buttons of categories

Buttons

Abel, Regular, 18pt, #222A68

Context: Checkboxes & radio buttons

Paragraph


Paragraph

Ubuntu, Light, 6pt, #222A68Context: Event boxes on mobile

CaptionUbuntu, Light, 12pt, #222A68, opacity: 60%Context: Footnotes, paragraph in event boxes

Paragraph


LinksUbuntu, Medium, 13pt, #FF9F1C & #A1EDFD & #CFCFCF

Header 6Ubuntu, Light, 16pt, #222A68Context: Links

LinksUbuntu, Regular, 17pt, #222A68 & #FF9F1CContext: Wheel of moods, links on desktop

NavigationUbuntu, Bold, 22pt, #FF9F1C & #FBF5F3Context: Profile Menu on mobile & labels on main page

Header 6Ubuntu, Medium, 17pt, #222A68Context: Checkboxes & radio buttons on desktop

Text boxesUbuntu, Italic, 20pt, #9094B3, opacity 85%Context: Textboxes on desktop screens

Text boxesUbuntu, Italic, 18pt, #A0A3BD, opacity: 85% & #E7E6F7

Header 3Abel, Regular, 28pt, #222A68

Header 4Ubuntu, Bold, 20pt, #FBF5F3 & #222A68 or #FF9F1CContext: Labels on desktop, top headers on mobile, links on dsktop

LinksUbuntu, Bold, 15pt, #FF9F1C & #A1EDFD & #222A68Context: Desktop Navigation, Buttons, mobile labels, links

Context: Wheel of moods on mobile, paragraphs, linksUbuntu, Regular, 13pt, #FF9F1CLinks

Context: Web event box text

Heading 6Ubuntu, Light, 13pt, #222A68

Context: Titles in event boxes - mobile, footnotes

Caption

Ubuntu, Light, 8pt, #222A68

Header 3Context: Onboarding on Create Event PageUbuntu, Light, 24pt, #222A68 HEADER 5

Ubuntu, Light, 18pt, #E7E6F7

Ubuntu Abel REGULAR 20PTBOLD 20PTREGULAR 20PT MEDIUM 20PTLIGHT 20PT

TYPOGRAPHY EXAMPLES

Header 4Ubuntu, Bold, 20pt, #FBF5F3 & #222A68 or #FF9F1C

Text boxesUbuntu, Italic, 18pt, #A0A3BD, opacity: 85% & #E7E6F7

LinksUbuntu, Bold, 15pt, #FF9F1C & #A1EDFD & #222A68

LinksUbuntu, Medium, 13pt, #FF9F1C & #A1EDFD & #CFCFCF

Header 2Ubuntu, Bold, 33pt, #FBF5F3

Header 2Ubuntu, Bold, 33pt, #FBF5F3

Header 1Ubuntu, Bold, 52pt, #E7E6F7

LabelsUbuntu, Bold, 22pt, #FF9F1C & #FBF5F3

Text boxesUbuntu, Italic, 20pt, #9094B3, opacity 85%

Header 4Ubuntu, Bold, 20pt, #FBF5F3 & #222A68 or #FF9F1C

ButtonsUbuntu, Bold, 25pt, #222A68

LinksUbuntu, Bold, 15pt, #FF9F1C & #A1EDFD & #222A68

Designing the App | �19

TYPOGRAPHY EXAMPLES

#8FFCF9ELECTRIC BLUE Active links

#A1EDFD BackgroundWINTER WIZARD

Background#2364AALAPIS LAZULI

#A0A2BC Input textBLUE BELL

#222A68 BackgroundST. PATRICK’S BLUE

#E7E6F7LAVENDER MIST Text, Background

#AFB0B9SILVER CHALICE

#6F7075NICKEL

#FF9F1CLinks & ButtonsAll clickable elementsCRAYOLA

#FBF5F3 TextWHITE SMOKE

#FFD091 BackgroundPEACH ORANGE

COLOR PALETTE EXAMPLES

SEARCH RESULTS PROFILE

UI DESIGN - COLOR SCHEME


COLOR PALETTE EXAMPLES

BUTTONS

Category button

Button actions Button types

Focus

Button

Button

42p15pline height 20p

10p

Hover

Active

CATEGORIES

MAP

SEARCH

Career106p

MOOD THEMES

SIMILAR USERS

SIMILAR USERS CATEGORIES

MOOD THEMES

min 134p

max 340p

220p

150p


10p

64p

35p

25p

17.8p

line height 29p

line height 22p

16.5p

6.7p


10p


10p


10p

SAVE

SAVE & CONTINUE

SAVE

UI ELEMENTS


BUTTONSactions specs types

LOGO EVOLUTION

#222A68 BackgroundST. PATRICK’S BLUE

#FF9F1CLinks & ButtonsAll clickable elementsCRAYOLA

The visceral experience of the app I enhanced by vibrant colours, which distinguishes it from other similar apps. The main colours are orange (crayola) and dark blue (St Patrick blue).

Get off the app or Go to Action - 1st attempt. I tried to make letter “O” as the gate which crossing is like getting out of the comfort zone -try something new, new activities.

Action is symbolically contained in graphical picture of heart beat with arrow pointing in letter A outward as for action, direction, guidepost…

Another attempt, balanced, creative and playful but not visible and confusing in message

The final logo on white and blue background. Action in the app is in crayons and in the app every element in crayons “calls for action”.


Orange is the playful, encouraging & adventurous colour triggering exciting and vital feelings. It is used often in US basketball team logos, Amazon, Mozilla Firefox, Nickelodeon, Timberland and various products for creative arts for kids. It’s playful tone is soothed with dark blue that on its own brings serious, sombre & knowledgable connotations.

Outcomes - when logo is small, the orange line is barely visible. Too thick line also impacts balance of the logo

Outcomes - it felt a bit gloomy, misaligned

MOBILE DESIGN - FINAL MOCKUPSAfter numerous iterations based on rich amount of feedback

from the tests, I made numerous adjustments..All prototypes (36 screens) are ready to use on https://invis.io/C6QVCDLAR4Z


https://invis.io/C6QVCDLAR4Z

DESKTOP DESIGN - FINAL MOCKUPSAll prototypes (28 screens) are ready to use via https://invis.io/QYQVCI05KRJ


https://invis.io/QYQVCI05KRJ

DESKTOP DESIGN - FINAL MOCKUPSAfter numerous iterations based on rich amount of feedback from the

tests, I made numerous adjustments.

All prototypes (28 screens) are ready to use via https://invis.io/QYQVCI05KRJ


WHAT IS GOTA

Documents

Transcript of WHAT IS GOTA