IxDA Chicago Mobile Site - Designing for Users...but Who Are They?

1IxDA November 2012

IxDA Chicago Mobile Site

Designing for Users…but Who Are They?

Svetlin DenkovDPU Alumnus IxDA Local Leader

2IxDA November 2012

AGENDA

• The Background

• The Research

• The Redesign

• The Next Level

• The Surprise

• The Lessons Learned

3IxDA November 2012

The BACKROUND

Where did it all begin?

4IxDA November 2012

The BACKGROUND

Context

The Organization

• Global network dedicated to Interaction Design• Hosting monthly events as discussion forums• Chicago is 3rd largest chapter in the world• Active online community at ixdachicago.org

Core Issues

• Mobile site came as freebie in 2007 site transition• At the time, Ning (company behind the CMS), had no mobile specific roadmap• Platform was significantly outdated• Missing key required functionality

5IxDA November 2012

The BACKGROUND

Motivation

The Personal View

• Student seeking an interesting problem• Vested interest as a Local Leader• Dissatisfaction with the existing solution

The Bigger Picture

• In 02/2012, smartphones surpassed the 50% mark • The chapter members are multitaskers on the go• Members want to attend events, but they fill quickly• No mobile update coming from Ning

Image Source: http://bit.ly/UUdOID

Image Source: http://bit.ly/HjaVbb

http://bit.ly/UUdOID

http://bit.ly/HjaVbb

6IxDA November 2012

The BACKGROUND

Process

Goals

• Increase site engagement by improving satisfaction• Provide a platform-agnostic, extensible solution• Validate that the redesign meets user needs

UCD Approach

• 2-phase project over 8 weeks for creating a solution• In the 1st phase, I conducted user research• In the 2nd phase, the research findings informed a system redesign which was then tested Image Source: http://bit.ly/cDUOmm

http://bit.ly/cDUOmm

7IxDA November 2012

The RESEARCH

What did I uncover?

8IxDA November 2012

The RESEARCH

Activities

AnalyticsLooked at 1 and 6-month statistics to learn about the site’s audience

SurveysPinged expert and novice users to establish usage metrics including tasks and frequency

InterviewsHeld discussion with existing users to answerquestions about preference, impressions, etc.

Heuristic ReviewAnalyzed key areas of the existing experience to discover critical usability issues

Overview

I wanted to identify who the existing and prospective users are and how they interact with the website. This would help me determine pain points and create a list of needs.

9IxDA November 2012

The RESEARCH

Analytics

What I did

• Tracked mobile devices only• Focused on 11/2011 – 04/2012 period• Analyzed 8 data dimensions

What I found

• On average 90 visits/month• 40 visits had proper redirect• Not all are unique visits• Equivalent to 3% of membership• Small percentage visited Home

10IxDA November 2012

The RESEARCH

Surveys

What I did

• 1 with experts (usage >= 6 months) and 1 with novices (usage < 1 month)• Recruitment was done via social media, email, and in person solicitation• Both surveys ran for 2 consecutive weeks• Participation overall was low with only 8 respondents. Suggests lack of familiarity.

What I found

• Site used infrequently with limited task completion• Used for event lookup and adding members• Navigation, visual design and layout rated low• Purpose and messaging are somewhat unclear• Member search and event registration requested


The RESEARCH

Interviews

What I did

• 4 1-on-1 semi-structured interviews• 2 conducted in person, 2 via Skype• Interviewees were existing mobile users • Recruited at IxDA events from eligible participants• UX professionals with at least 2 years experience

What I found

• Participants used the site for over 6 months • Tasks related to current events were discussed• Resorted to “hacks” for event viewing• Networking first, communication second• Site was seen as “half-baked”, but can be fixed

Image Source: http://bit.ly/YngUt4

http://bit.ly/YngUt4


The RESEARCH

Heuristic Review

What I did

• Followed Nielsen usability guidelines• Analyzed main areas of experience• Evaluated via a 3-level grading system• Logged critical issues and good observations• Recommended fixes to the problems

What I found

• No uniform style guide/poor visual presentation• Non-existing copy standards (iPhone references)• Inconsistent brand communication• Unintuitive IA and limited IxD model• Lack of information hierarchy of UX components

1

2

3


The RESEARCH

Heuristic Review - Example

1 2

3

4

1

2

3

4


The REDESIGN

How did I solve the problem?


The REDESIGN

Activities

PersonasCaptured the audience segmentations via 3 personas which listed their tasks, frustrations, and expectations

Research and IdeationConducted 2 individual and 1 joint brainstorm sessions for surfacing concepts

DesignsCreated a sitemap and process flows for the most important tasks users asked in the Research phase

Prototype and TestingUsing a paper prototype I tested the usability of the design with 4 in-class novice users

Overview

During the Design and Test phase, I wanted to restructure the underlying IA, introduce missing functionality prioritized based on needs, and test the end product with users.


The REDESIGN

Personas

What I did • Identified usage patterns in surveys and interviews• The research identified user characteristics• 3 groups: Recruiters, Students, Professionals• Professors may be the 4th segmentation• Each persona has a detailed description

What I found

• Students want to network and learn about events• Professionals hold discussions and browse jobs• Recruiters post job openings for candidates


The REDESIGN

Personas - Examples

Include Background Data:

• Name and Role• Demographic Information• Quote and Story

Include Contextual Data:

• Mobile Use• Frustrations and Motivations• Attempted Tasks


The REDESIGN

Research and Ideation

What I did • Investigated various mobile examples• Conducted 3 iterations of brainstorming• Sketched concepts and flows in different fidelities

What I found

• Common patterns for social experiences exist• Initial scope was too optimistic and was readjusted• Task importance drove feature prioritization• There are never bad ideas


The REDESIGN

Research and Ideation – Example

Designs

Flows

Tasks


The REDESIGN

Designs

What I did

• Blended site map and process flows • Created designs for the following: - Registration and Sign In - Home and Global Navigation - Event Registration/Info - Members Search/Browse

What I found

• Your audience dictates the fidelity• Every wireframing tool has limitations• Careful planning eliminates rework• Iterating over designs will happen


The REDESIGN

Designs – Original Experience

Sign In Screen Sign Up Screen Home Screen


The REDESIGN

Designs – Redesign Examples


The REDESIGN

Designs – Original Experience (cont.)

Own Member Profile Members Screen Events Screen

?


The REDESIGN

Designs – Redesign Examples (cont.)


The REDESIGN

Prototype and Testing

What I did

• Used a detailed paper prototype• Tested with 4 in-class novice participants• Each asked to complete 3 tasks in 30 min: - Log in to view own profile - Register for the April event - Add Micki Katz as a friend• Captured observations via audio and notes• Created list of design recommendations

What I found

• The tangibility did not impact performance• Time to completion was identical across users• Registration feedback was missed due to fidelity• Member searching/filtering needed clarification• The menu icon was mostly unfamiliar


The REDESIGN

Prototype and Testing - Examples


The NEXT LEVEL

Where is this project going?


The NEXT LEVEL

Plan for Post Capstone Work

Short Term Goals

• Incorporate feedback into 2nd round of design• Build Axure prototype of solution• Present project work to Chapter leadership • Reach consensus on next steps

Long Term Goals

• Engage IxDA Chicago’s membership for: - Commentary on proposed redesign - Surface additional requirements and ideas • Agree on UX strategy and finalize the design• Analyze tools/platforms for site deployment• Create roadmap for site management

Image Source: http://bit.ly/115LeaE

Image Source: http://bit.ly/Sr8Baw

http://bit.ly/115LeaE

http://bit.ly/Sr8Baw


The SURPRISE

How did Ning beat me to the punch?


The SURPRISE

Ning’s Big Reveal on July 16th

What was changed?

• Website developed in HTML5• Updated look and feel and interaction model• Consistent and flexible design• Options such as My Page, Events, Discussions, etc.• Works on multiple mobile platforms

Tour of the Mobile Interface: http://bit.ly/Tny4E3Administrative Customization: http://bit.ly/Tny9YB

What were the similarities?

• Simplified Sign In and Registration• Persistent global navigation menu• Dedicated Events and Event Info pages• Contextual searching/filtering of Events and Members

http://bit.ly/Tny4E3

http://bit.ly/Tny9YB


The SURPRISE

Ning’s Big Reveal on July 16th – Examples 1

Sign In Screen Sign Up Screen Home Screen


The SURPRISE

Ning’s Big Reveal on July 16th – Examples 2

Own Member Profile Members Screen Events Screen


The LESSONS LEARNED

What wisdom was revealed to me?


The LESSONS LEARNED

• Have no preconceptions going into a project.

• Plan and plan again. Did I forget to mention, PLAN?

• Optimism is good, but realism is much better.

• Be ready to adapt on the fly. Problems will arise!

• 2 heads ALWAYS think better than 1, right?

• Toolkit mastery ≠ predictability. Learning never stops.


Thank You for Listening!

@svetlindenkov

http://linkd.in/JbZDre

http://bit.ly/Jo93RJ

http://linkd.in/JbZDre

http://bit.ly/Jo93RJ

Technology

IxDA Chicago Mobile Site - Designing for Users...but Who Are They?