Pavel Geystrin Portfolio March 2017

HI!

I’m Pasha. I am a designer.

But first i am a person.

I live on a planet with other persons.

And sometimes things get complicated.

I believe that designing user experience is a lot like visiting a new place;

some aspects of the journey are familiar, yet some parts are new.

Travelers encounter challenges on a road less traveled, and so is a designer starting a new

project. The key as I see it, is to understand and learn from everything previously done, yet

remember to not be tied down by it.

Whenever I start a any new project, I immerse myself in the details, the people, the systems

at play. With that, comes deep understanding, insights, and areas of opportunity begin to be

revealed. And by identifying them, we can start applying what was learned to uncover

creative solutions.

Foreign lands are best experienced by talking to their residents; the real gems lay with them.

RuvnaMuji Spotify

Case studies presented in this document:

Business + Brief Summery

Muji is a global retail company, distinguished by its design

minimalism, emphasis on recycling, avoidance of waste in

production and packaging, and no-logo or "no-brand" policy. Muji

succeeded in part by incorporating the aesthetic consequences of

cost-cutting into its design philosophy. Muji is banking on “the

idea that simplicity is not merely modest or frugal, but could

possibly be more appealing than luxury”.

Opportunity

Create an experience that will help people organize their work

and living space, using the ancient discipline of Feng Shui, thus

making users aware of how their surroundings affect their

mental well being.

Challenges

• Discover how people understand space,

and how space affects people’s well being • Apply ancient eastern philosophies to a

digital world; keeping the essence of the

practice while making it accessible to users • Using augmented reality and dealing with

technological needs and constrains • Creating a new, non e-commerce product

while keeping with the brands philosophy

My Role + Responsibilities

Research the marketplace, conduct user interviews and

technological studies, as well as design development and

prototyping

Brand expansion proposal for a low-key life style retailer

Pasha Geystrin work samples 4

We tackled the problem of users not knowing how large objects would

look and fit within an intended space, and selected Muji due to their

“non-brand” brand and their minimalistic and neutral aesthetics.

Muji is about blending in and taking it easy. No brands, no logos, no frills.

Throughout the process however, our assumptions weren't

validated. We envisioned the product with an e-commerce

feature; part of the user’s search for the right piece of furniture.

Research showed that users prefer feeling, touching and lifting

pieces they are interested in before committing to buy.

With existing companion “lifestyle” apps, Muji created an eco system that aims to help users live according to its philosophy.

How does it feel?

What is the actual color?

How will it it fit in my space?

How much does it weigh?

What is the total price?

Considering large and expensive purchases, users prefer to shop in personMuji visual board and user interview

Business and contextual studies brought insight regarding the overall aesthetics and experience we want to aim towards. User interviews revealed valuable learnings and validated certain assumptionsDiscover


Dropping e-commerce elements opened the product to all users and spaces,

broadening brand awareness and keeping the Muji aesthetics and

philosophy and bringing the in-store experience to user’s personal space.

Conducting a few more rounds of interviews with our new hypothesis, we

created personas and story boards to further flesh out our user’s journey

through the app.

We then turned our findings actionable by developing specific tasks and

brainstorming features.

With a validated idea, we proceeded to identify users, created archetypes and developed a visual language. Further research conducted into image recognition API’s and Feng-shuiDiscover

Key Challenges

Prompting proper

angles for picture taking

Translating Feng-shui

concepts

Designing for

augmented reality

Discover Having a validated idea, we proceeded to identify users, created archetypes and started developing a visual system. Further research conducted into image recognition API’s and understanding and applying Feng-Shui


During design studio, we defined the operations our users will perform, created a visual style and tested various interactions, while testing and iterating on various elements and creating wireframes of increasing fidelity

• Special attention was give to the on-boarding process, since

users were asked to perform new and unfamiliar tasks.

• Landscape and portrait orientations were tested for the ideal

holding position.

• Various visual styles were applied to feng-shui; user testing

then performed and results analyzed and applied.

Various iterations of the appEarly version of element identification screen

Design


The importance of extensive user

testing was clear during this project,

especially since we were exposing

users to new technology (augmented

reality) and new concepts (feng-shui)

Designing a new product for an existing brand, required adherence to an established visual language, while still being open to innovation and creativity; we kept the Muji aesthetics and beliefs in mind when developing our ideasDeliver

Throughout the latter stages of design, we tested our

product and iterated based upon what we learned.

Some of the insights and subsequent changes were:

• Early versions lacked clear on-boarding • Screen lacked direction • Global navigational • Microcopy and iconography • Feng-shui elements explanation


On-boarding sequence

Exposing users to a new technology requires thought out on-boarding sequence. Many iteration were created and user testing proved essential. Screens, shapes and gestures were tested; Illustrations were created in line Muji’s spiritDeliver


Bellow is a flow progression through the experience of the app. Users take a photo of their space, and the app analyzes and suggest small changes based on Feng-Shui philosophy. Saving an image and sharing is also possible. Deliver

Select the desired space and point your camera

The app will let you know if

the framed image is within

the confines of the software

Once a photo is taken, the software will analyze the

objects based on Feng-Shui

Recommendations for optimal arrangement will be

given. You can save your

photos and analysis

Glossary of Feng-Shui elements and their

explanation is available


Click on the image to view and interact with the Muji for Life prototype Deliver

https://marvelapp.com/197hcfd/screen/12075114


































































































































































11


As a school safety company, Ruvna aims to locate students during

emergencies, providing real time information. It allows school staff to

quickly and seamlessly count and identify missing students, shortens

response times and centralizes all critical information.

Opportunity

Design role specific screens and flows to better

assist the staff with performing their duties and

give each the most needed and up-to date

information.

Challenges

• Difficult user base to gain access for interviewing and research • Compliance with legislative and various other governmental

mandates • Determine which information at which times needed by which role • Support seamless communication between users of different roles


As part of a three person UX team, I defined the research scope, conducted

personal interviews, perform heuristic and legislative analysis,

incorporating the findings into proposed designs, and test the product in

“realistic” environments.

Research & design development for a school emergency response start-up


Being a product that caters to educational institutions, it was

important to research the entire system and its organization.

Our aim was to understand the following:

• How school staff thinks and acts during emergencies? • What are the responsibilities and duties of the various staff? • How government agencies fit into the picture? • What are the current practices and response protocols? • Does technology play a role, and could it help improving

current practices?

A big part of the discovery process, were the personal

interviews with teachers, security officers and other

school staff, who were happy to help and provide

information and share their experiences.

Marketplace analysis was conducted, auditing 5 other

companies working within a related space, noting what

worked, what didnt and how others attempt to solve

similar problems.

Business, marketplace and legislative analysis, competitive audits, contextual studies and personal interviews helped us focus our discovery and concentrate on areas of opportunities for present and futureDiscover


Roles selected as PERSONAS for user case studies

Emergency response protocols are issued by the federal government to the states, who then allow district and cities to modify them depending on the size of the school system.

Creating this eco-system map helped us study the organization and structure of such network, break it down and identify the users, their problems and needs, as well is opportunities of business expansion.

School incident commander (Principle / VP / Other Admin)

District incident commander (Superintendent / Sec. Director)

City incident commander (Police / Fire / EMS)

Operations Section

Search & Rescue

First Aid

Facilities & Security

Student Management

Evacuation & Shelter

Search & Rescue

Obtain up-to date headcount

Search facilities

Report back findings

Student Management

Maintain headcount

Stay with charges

Enact appropriate response

Logistics

Transportation

Food & Water

Shelter

Restrooms

Finances

Billing Incident costs Timekeeping

Planning

Documentation Big picture analysis

Strategy

As an education platform compliant with existing rules, It was important to research the entire structure and understand how cities and schools work with different government entities during emergenciesDiscover


Guiding Design Principals

• Create a bird-eye panel to allow administrator a full view of the

emergency.

• Design a system that will funnel information to appropriate

personnel, depending on their emergency response role.

• Provide an information gathering and dispensing tool which can

be used during emergencies to better direct and inform staff.

• Enable administrators to use the system during drills, to collect

date and find weak links in the chain of command.

• Outdated practices • Slow response times

• Lack of training • Old or no technology

Example scenario for a missing student being identified and search for by staff

The issues we found varied depending on school level, size, location, as well

as other factors. Still, we were able to distill our findings into meta-issues:

• No streamlined

communication

District and school size, educational level and the different municipal and federal mandates are all factors that must be considered; the final product must cater to a variety of conditions and be very customizableDiscover


“I need to know what’s happening and I need see all relevant information at a glance”

• Have a bird’s-eye view of situation • Be up-to-date with real-time information • Know school is taken care of while off-site • Quick and efficient system and interactions

“Our main objective is to keep students safe and wait for further instructions”

• Notify superiors of any status updates regarding her class • Account for all her students • Be up-to date on the details of the incident • Understand school’s emergency protocols

“There are a million positions in a school, so that everyone could concentrate on their job”

• Lines of communication with his superiors • Status of the efforts of the entire emergency response

team • Live updates on the incident and the decisions being taken

Feature accessibility is dependent on the user’s role within the incident management system. This includes specific tasks and the

usage extent of each feature.

Feature access is controlled by the head of the response team;

Integration with district level personnel is available when needed.

Feature prioritization for administrator level user

With the discovery process well underway, and with deeper insights into the needs of both company and users, we proceeded with creating personas and defining features based on roles and needs distilled from our takeawaysDesign


Having users with various needs

at different times, tasks and

screens were developed, tested

and iterated using our prioritized

features, concentrating on

simplicity and efficiency.

Journeys, task diagrams and app

maps were created, further

distilling the most important

aspects of the service

Throughout design studio, research was turned into a visual language via journeys and flow diagrams, which helped flesh out paths users would take during various emergency situations, and the operational tasks most neededDesign


• Users were tested in both neutral and high stress environments,

simulating the heightened state of stress emergencies could

incur

• Product was tested on various user groups; chiefly those without

previous school or emergency work experience, and those with

prior experience as either school staff or as part of an emergency

response team

1

21

23

1

2

• Each screen was annotated and each task was called out,

describing its utility

• Task operation was outlined, showcasing preceding and

following tasks and how they work together.

• Video prototype was created of two users simultaneously

using the product, with two screens side by side.

Low and medium fidelity wireframes were developed throughout the delivery process, testing and iterating as we design. With testing, problems were addressed and iterated upon, and specifications were developedDeliver


The priority is to launch the proper emergency response; that is the first things the admin will see.

Selecting the right protocol can be done with a tap.

The dashboard gives a bird's eye view of as the emergency is handled.

The number of unchecked students will decrease as the staff conducts counts

The class view screen consists of the name of the student, and their status.

It is a disappearing list; as a student is checked his name will turn green, and 1 second after move to the “checked-in tab.

Under the messages screen, users are able to send canned info based on their role.

Admin roles will have the ability to send text messages, contact authorities and address entire groups of staff.

Two sets of wireframes were created, showcasing administrator and teacher screens and flow, with all applicable tasks and operations. Bellow are selected screens from the admin view, with info captions, and a video prototype.Deliver


Click on the logo to view a video of the prototype with two users; admin and teacher, interacting simultaneously Deliver

https://vimeo.com/210486228






































































































































































































































































































































































































































































































































































Opportunity

Create a feature that allows users to collaborate,

DJing their select tracks with other users in real

time.

Challenges

• Working with complicated DJ interfaces • Defining “who/what is a DJ” • Brining together three different “use cases” in one application • Simplifying the UI while the necessary tasks fully fleshed out


My three person UX team was tasked with creating a feature that

will allow users to collaborate further. Part of my role was to conduct

user and marketplace research, analyze current collaborative

platforms and create personas, user journeys, flows and wireframes.


Spotify is a world leader in music streaming and sharing; it provides a

platform for users to discover music, create radio stations and browse

through collections of artists, friends and celebrities.

Hypothetical feature addition for a worldwide music streaming service


Who is a DeeJay?

What is Collaboration?

“…can pick and piece together music”

“…links song or rhythms that tell a story”

“…he would need to know and remember music well”

“…a live dj should feel the crowd”

“…provides an element of surprise”

“…make song suggestions & requests”

“…i could learn new skills & techniques”

“…if done well, it breeds inspiration”

Music Streaming Services (Apple, Rhapsody, Soundcloud, etc)

Professional DJ Software (CrossDJ, Djay 2, Traktor, etc)

Playlist Creation & Sharing Apps (Pyro, 8tracks, You.DJ, etc)

Breaking down the Marketplace

• Large music database • Licensed music • High discoverability potential

• Limited collaboration options • Recording not possible due to intellectual property laws

• Full DJ tools • Play, mix and record

• Steep learning curve • Requires prior knowledge of deejaying

• Simple to use • Highly accessible • Automated fading

• Requires integration with music streaming service • No actual deejaying done

Learn DJ techniques

Control music at a gathering

Allow others to contribute

Exercise individuality

Being the “go-to” person

Create and share on the go

What they say they want

Alternate DJs during parties

Feedback

Influence track selection

Join ongoing “sets”

Discover new music

We begun by defining the meaning of Deejaying and collaboration, and what would Deejaying look like in a collaborative space. The team sought to understand

who is a DJ, their methods, tools, needs and pain points, and how could those be translated into a virtual environment while still keeping their essence intact

Business & marketplace analysis, competitive audits & contextual studies helped us understand the space within which we are designing. Users gave us human insights. Discover


The AUX Cable Hog (Bryn)

“When it comes to music, I’m like a fat man who can’t cook. But if you

can give me the proverbial blue apron of djing, I’ll totally do it!!”

• Social Link • Recommendations • Share option • Never-ending

playlist • Genre tags • Feedback • EZ DJ tools • Start & end session

The Deep Space

Explorer (Eric)

“I want an endless stream of new music that I know I will like”

• Social Link • Recommendations • Genre tags • Feedback • Genre based rooms

The Professional DJ

“I’d rather you ask me what I’m playing than take your request.”

• Social Link • RPM meter • Share option • Feedback • Full DJ functionality • Record option • Start & end session • Genre based rooms

The AUX cable hog was chosen as the

main persona, due to most of users not being professional DJs.

Users want features that are accessible,

intuitive and quick enough to use

during dinners, parties and intimate

get-togethers.

Discovery & Learning Journey of the explorer

Participation & Collaboration Journey of the party hog & co.

Using journey maps and flow diagrams, we visually laid out the experience the users

will go through.

This helped us fine tune the individual

screens and eliminate superfluous tasks

With a deeper understanding of the concepts of deejaying and collaboration within the streaming industry, we delved further into our users and distilled their needs and habits Discover

Personas and their Needs User Journeys


MAIN

RADIO

ACTIVITY

BROWSE

OVERVIEW

CHARTS

GENRES & MOODS

NEW RELEASES

DISCOVER

CONCERTS

CREATE NEW

PLAYLIST

YOUR MUSIC

SONGS

ARTISTS

STATIONS

ALBUMS

LOCAL FILES

CREATENEW

STATION

MESSEGES

PROFIE

NOTIFICATIONS

RECENTLY PLAYED ARTISTS

PUBLIC PLAYLISTS

FOLLOWING

FOLLOWERS

OVERVIEW

DJ

DJFY

PARTIFY

CREATE NEW

ROOM

SETS CREATENEWSET

JOIN EXISTING

ROOM

RECORD

BROADCAST

SHARE

START SET

SPOTTILY MAP WITH INTEGRATED DJ FEATUREWorking with an established visual

language, we delved into design studio,

working out the flows and paths users

will take through our feature.

All throughout, we user tested various

UI options, incorporating feedback and

iterating as we design.

Spotify’s feature app, with our proposed features in green

Once we understood the space within which we are designing, and the user base we are designing for, it was time to translate our findings into Spotify’s language and existing operational ecosystemDesign


At the tail end of design studio, we

transferred our ideas and sketches into

user flows and diagrams, eventually

using high fidelity wireframes to user

test.

We iterated on CTAs and microcopy. We

found that certain button placement

needed to be adjusted for maximum

discoverability.

Out numerous tests proved invaluable,

as we were able to polish the experience

the users gh through. User flow for starting a party, sending invitations and setting rules

Examples of screen iterated upon after user testingUser testing

With the tasks and app flows taking shape we created user flow diagrams and high fidelity wireframes, user testing through the process, incorporating our findings and testing againDesign


Deliver Specify. Launch. Iterate

“Start a party, choose the music and enlist your friends to help. Once the party goes live, everyone invited can influence the playlist; suggest tracks and up and down vote those already on the list. Party on!”

“Start a party, choose the music and enlist your friends to help. Once the party goes live, everyone invited can influence the playlist; suggest tracks and up and down vote those already on the list. Party on!”Deliver


“Create a new set and let listeners join in live, suggesting tracks and commenting. Or join a live room where DJs experiment with their music. Seeking new beat or an artist looking feedback? Join in!”Deliver


Click on the images to view and interact with the desktop and mobile prototypes, respectively Deliver

https://projects.invisionapp.com/share/9D70L7SR6#/screens/152032723






















































































































https://marvelapp.com/1a8ih53/screen/22807270














































Thank you!

Pasha Geystrin

[email protected]

mailto:[email protected]

Pavel Geystrin Portfolio March 2017

Design

Transcript of Pavel Geystrin Portfolio March 2017