UX Design - LinkedIn Project Management iPad App


Published on

Clickable Prototype: http://share.axure.com/Y1NU2P

LinkedInPM is a light-weight Project Management native iPad application, for professionals e.g. project managers, clients, vendors, consultants etc., who need to collaborate with teams on projects.

This tool uses simple visualization tools such as a calendar and progress gauge to allow all users to use this app with great ease. It allows users to initiate tasks, structure and assign tasks, define task dependencies and criticality, share files, have discussions, and collaborate in an efficient and quick manner.

Note: This project is part of the coursework for User Experience Design Immersive program (Fall 2013) at General Assembly, San Francisco

(Group project by Shivangi Jain Mehra and Kara Bressie)

Published in: Design, Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

UX Design - LinkedIn Project Management iPad App

  1. 1. in PM Project Management with LinkedIn
  2. 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. 3. in PM CHALLENGES Our challenge was to create a lightweight native iPad application that will allow LinkedIn users to collaborate on projects quickly and effectively. Competing products include: • Asana • Basecamp • Do • MS Project • Chatter • Google docs • Yammer • Blimp... and others
  4. 4. 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 and calendars • address potential problems early on by a more involved approach • manage task dependencies and highlight the most urgent tasks
  5. 5. in PM BUSINESS 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. 7. 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)
  8. 8. in PM PLANNING
  9. 9. 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.
  10. 10. in PM PERSONAS
  11. 11. in PM PERSONAS
  12. 12. in PM SCENARIO
  13. 13. 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. 15. 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
  16. 16. 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
  17. 17. 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 screens to combine buttons with the same function. • Functionalities could be combined on dashboard for task details and progress gauge.
  19. 19. 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
  20. 20. 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 SCREEN FOR ADMIN Enter and edit project name and description and add tasks for that project.
  21. 21. 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.
  22. 22. in PM FLOW 3: ADD TEAM MEMBER TEAM SCREEN - ADMIN ADD A TEAM MEMBER: ADD A TEAM MEMBER: 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. 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. 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 To add a team member, tap 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. SEARCH FOR A SKILL
  23. 23. 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 screen, 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.
  24. 24. 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.
  25. 25. in PM FUTURE?
  27. 27. in PM THANK YOU! Kara Bressie Shivangi Jain Mehra