General Assembly UXDi course, Fall 2013 by Kara Bressie and Shivangi Jain Mehra

1. in
PM
Project Management with LinkedIn

2. in
PM
PRODUCT DESCRIPTION
PM
LinkedIn
is a
Project Management tool
for
office professionals –
project leads, team members,
clients and vendors,
who need to
collaborate remotely and online
with teams on various projects.

3. in
PM
CHALLENGES
Our challenge was to create a lightweight native iPad application
that will integrate with a web-based
version, that will allow the users to
collaborate on projects quickly
and effectively.
Competing products include:
• Asana
• Basecamp
• Do
• MS Project
• Chatter
• Google docs
• Yammer
• Blimp... and others

4. in
PM
COMPETITOR ANALYSIS - SAMPLE
?
Where should I go
Where do I find the
discussion about that
particular task?

5. in
PM
...MET WITH SOLUTIONS
The LinkedInPM application will allow
users to collaborate with a team to:
• initiate projects and add team members
• structure tasks clearly and enable
managers to locate the right talent for each
task
• allow project leads to toggle quickly
between macro and micro views of each
project using simple graphic visualization
tools such as the progress “gauge page”
and calendars
• address potential problems early on by a
more involved approach
• manage task dependencies and highlight
the most urgent tasks

6. in
PM
STRATEGY
LinkedInPM leverages the fact that a
great majority of working professionals
already have LinkedIn Profiles and
aims to meet them where they already
are, online, on social media sites.
LinkedIn can develop and deploy its
project management tool via a mobile
app for the iPad. With what is learned
from users of the mobile app, LinkedIn
PM can be improved and refined and
eventually incorporated into the full
website, increasing daily logins
and overal page views in support
of business goals.

7. in
PM
CORE SCREENS
HOME SCREEN
DASHBOARD
CALENDAR
TEAM
SINGLE TASK
ADD TEAM MEMBER

8. in
PM
LOOK AT IT!
v2.0 http://share.axure.com/Y1NU2P (Clickable: Built in Axure)
v1.0 http://youtu.be/einY0HScQwo (Video walkthrough: Built in Keynote)

9. in
PM
PLANNING

10. in
PM
DESIGN RESEARCH
Method
We spoke to 15 people, and conducted an online survey
with 60 participants asking about how they manage
their personal or professional projects and which, if any
tools, they use. We also asked about their time spent on
LinkedIn.
Findings
We found 97% of the people we spoke with have a LinkedIn
account, but few are daily users. Most people we talked
to use it to stay connected, search for jobs, and recruit
job candidates. Many people simply use free services to
collaborate, or prefer to do it in person/phone/e-mail, as
they find it simpler than signing up for a new profile and
trying to learn new collaborative tools.
Opportunities Identified
Provide a simple collaboration tool available to all
those with LinkedIn accounts – one with a low learning
curve, building on existing profiles and networks, thus
encouraging people to use LinkedIn more often, furthering
the business goals.

11. in
PM
PERSONAS

12. in
PM
PERSONAS

13. in
PM
SCENARIO

14. in
PM
DESIGN ITERATION | DESIGN HYPOTHESIS
Method
• We worked on various user flow iterations individually,
researched competitors, and brainstormed as a group.
Findings
• There is a need for both macro and micro views of projects
within the same application.
• We identified elements in competing tools like Basecamp,
Asana, Blimp etc., to figure what works and what doesn’t.
In Blimp, we found a tool that was actually a pleasure to
use for certain tasks. What if managing a project with a
tablet app could actually be enjoyable?
Opportunities Identified
• Simpler, more visual representations would be helpful in
adding value and delight to a mundane process.

15. in
PM
DESIGN ITERATION | RAPID PROTOTYPE

16. in
PM
DESIGN ITERATION | DIGITAL PROTOTYPE
Iterations and Prototypes
We began by building out wireframes in Axure and
OmniGraffle. We tested user “micro-flows” to make
quick and dirty decisions on UI elements, terminology and
transitions. Before completing a single full prototype, we
developed a habit of frequent “micro-testing” with anyone
nearby, iterating on small nuggets of functionality, which
made it
• easier to depart with novel ideas that didn’t actually work
• less likely that we would get hung up on details, losing
sight of the big picture

17. in
PM
USER TESTING
First iteration
After assembling a flow of screens, but before our prototype
incorporated a full set of clickable, functional links, we took the
opportunity to let some people view our screens, think out loud,
and peck and swipe at the monitor with the end of a pencil as
though they were using our app on an iPad. This immediately
revealed some usability issues.
Findings
• nomenclature (words, and what we think they mean and do)
• visual hierarchy, color and weight
• location and layout

18. in
PM
USER TESTING
Changes to be made in the next interation
• Need to re-look at affordances of certain elements
• Visual cues to be adjusted/merged on selected pages to combine
buttons with the same function.
• Functionalities could be combined on dashboard for task details
and progress gauge.

19. in
PM
DESIGN SPECIFICATIONS

20. in
PM
Admin, Team and Client
Admin, Team
USER ROLES – SITEMAP
Team Members
work on the assigned task,
update manager on progress
Admin ONLY
Project Manager/Admin
initiates the project,
adds team members,
assigns tasks,
adds client,
manages strategy and
supervises work progress
Client
sees project progress and
provides timely feedback

21. in
PM
FLOW 1: LOG IN & ADD A NEW PROJECT
LOGIN SCREEN
ALL PROJECTS
User name and password text
fields drop down from behind
“Sign In” only after tapping on
the button.
Swipe through existing projects
in cover flow view or scroll
through projects in the list at the
bottom of the screen. Tap the ‘+’
button in the upper right corner
to go to the project creation
screen.
PROJECT CREATION
PAGE FOR ADMIN
Enter and edit project name and
description and add tasks for that
project.

22. in FLOW 2: VIEW CALENDAR & SINGLE TASK
PM
CALENDAR (ALL)
FILTERED CALENDAR (ME)
DAILY VIEW SCREEN
The current day is highlighted in blue.
Information shown here can be filtered
to show events for all team members
or just the logged in user.
Information shown here is for the logged in
user only.
After tapping on a specific day on the
calendar, this slide-in view shows all
tasks for the logged in user for that
selected day.

23. in
PM
FLOW 3: ADD TEAM MEMBER
TEAM SCREEN - ADMIN
Swipe through all current project team
members in cover flow view. The
Admin/project creator has the ability
to add new team members. To add
a new team member, tap on the ‘+’
button in the upper right corner.
ADD A TEAM MEMBER:
ADD A TEAM MEMBER:
An overview of the Admin’s connections
slides in from the right over the Team
screen. Filter results by “in my connections,”
“in my company” or “all of LinkedIn” and
scroll through the results. To add a team
member, click the ‘+’ next to their name, and
that person’s profile animates in an arc as
it is “deposited” into the Team tab in the top
navigation bar. The team member will then
be visible in the Team cover flow view.
Enter a specific skill in the text field
and select the desired filter (e.g. “in
my company”). Returned results
show profiles, listing relevant skills for
each person along with the number of
endorsements for those skills in blue,
pulled from their individual LinkedIn
profiles.
When entering a more
general term such as “animation,”
results will show various skills
related to animation such as various
animation software programs.
SEARCH FOR A PERSON
SEARCH FOR A SKILL

24. PROJECT DASHBOARD &
UNIVERSAL NAVIGATION
in
PM
1
1
5
8
2
3
4
6
7
9
Home button - Takes you to the
project folder view page, where you can browse
through projects by swiping in cover view or
scrolling through the project list.
2
3
4
Tab bar at the top of the screen - The three main
sections of the app are Dashboard (main project
overview screen), Calendar, and Team.
5
6
7
8
Project title and description - The option to edit this
information is only available to the admin or project
manager.
9
Relevant news - Tap to expand and reveal current
articles that are relevant to the project.
Search text field - Search for projects, people,
tasks and files across the entire app.
Communications nav buttons - Tap on
Notifications, Chat or Mail to expand these views,
which slide in from the right, in a preview mode.
Tap on an individual mail message in preview
mode to expand to full view across the screen,
which slides in from the right.
Tasks for today - Shows task next due at the top of
the hopper.
Project team - Tap to expand and view all team
members on that projects.
Task progress snapshot - Tap to expand and
reveal an overview of individual tasks by title, an
estimated progress pie chart, and team members
assigned to that task. Within the snapshot
accordian pane, tap on ‘view’ to see all details of
the task in full screen mode.

25. in
PM
CALENDAR
1
2
3
1
2
3
Calendar tab - Tapping here reveals the “zoomed
out view” project calendar overview where all task
timelines can be viewed.
Filter calendar view by “Me” or “All.”
Tap on a day to “zoom in” to a full detailed view
of tasks for that day. This expanded view slides
in from the right over the top of the calendar, and
slides out when you swipe it back to the right.

26. in
PM
FUTURE?

27. in
PM
VERSION 2.1
Need help?
GUEST SIGN-INS
HELP A TEAM MEMBER FOR A TASK

28. in
PM
THANK YOU!
Kara Bressie
Shivangi Jain Mehra