Design Thinking Journal: Berlin P2PU Summer Office
- Getting the context
- This pad is focused on keeping record of the information necessary to propose UX/UI improvements to the P2PU's website.
- The main contribution from the design thinking methodology is qualified ideation thru deep research, free brainstorm and quick prototyping.
- There are three main steps to be taken: discover, connect and construct.
- Some of the tools: qualitative, desk research, dyachronous and synchronous analysis, user interview and observation, mindmaps, journey maps, expectation maps, personas
- -------------------------------------------------------
- Discover
- Roadmap
- [OK] - Theme: 'Peer to peer learning'
- [OK] - Main personas:
- A) Peer willing to browse courses/challenges/groups
- Profile: diverse
- Motivations: knowledge, curiosity, participation, acknowledgement
- Task: browse, identify, detail, choose, involve, participate, maintain, assess, continue
- Objective: get and give, give and get
- Needs: non-obstrusiveness, support, confidence, care
- Behavior: fast, attentive, active-inactive
- Scenario: social, connected, formal-informal
- B) Peer willing to create courses/challenges/groups
- Profile: willing
- Motivations: change, knowledge, participation, donation
- Task: identify, propose, detail, divulge, open, involve, admin, assess, continue
- Objective: give and get, get and give
- Needs: reciprocal, easiness, support, value
- Behavior: instructional, active, welcoming
- Scenario: social, connected, formal-informal
- C) Group of peers contributing with each other
- Profile: babel
- Motivations: engagement, discussion, hear-be heard, revolution
- Task: know, explore, introduce, present, discuss, converge-diverge, build, change
- Objective: all give, all get
- Needs: expression, incentive, motivation
- Behavior: active-inactive, complimentary, social
- Scenario: real-virtual, global, connected, informed
- [OK] - Extra personas: D) Volunteers (dev); E) Investors/foundations; F) Media; G) Other educational institutions; H) Government
- [P] - Journey maps:
- [P] - Big question:
- [P] - Concept/motivation:
- July 10th annotations:
- 'Digest' and 'Study' were today's verbs. I'm focused on digesting the new content from the dev list and making sure I get the general picture of what people are working on. I took note of some insights the community's been asking about UX/UI. I also reviewed Stian's user test on this link: http://reganmian.net/wiki/User%20Study%20P2pu. I'm studying about the phylosophy behind MOOCs as that's a new concept for me - there are a lot of intersections that might prove to be interesting. I'm exploring and planning some of the design thinking tools that might show good results on P2PU's interaction model. Some of my motivation to innovative comes from Stian's and José's emails about P2PU being a 'standard LMS' in its essence.
- Complimentary info:
- - Style guidelines (Smart x stuffy/Excited x salesy/Massive x mob/Quirky x offensive/Casual x sloppy/Participatory x perfect)
- - Personas analysis: want (from it) + need (to know/feel) + do (tools and why) + think (about it) + feel (experience) / differentiators
- - Personas scope: prolonged, multichannel, multiplatform
- - Nice ideas I highlighted from the community of P2PU: social friends finder / notification center / unified login / rethink the relevance of the home page / clearer where to go-what to do / interface resources and plugins (jquery, ajax, etc) / reordering tasks / storytelling / iteration / CSS framework and whitelabeling for schools / WYSIWYG Editor / responsiveness / less page reloads / localization / labs / better error messages
- - MOOC general 'guidelines': agregate (f.i. daily digest, pick one) / remix (keep track) / repurpose (own understanding) / feed forward (#hashtag) / course's got its own life, customizable content / "[change] how people live, how they communicate, and how they learn." / "network with nodes and connections as a central metaphor for learning"
- - Some interesting references, both for content and design: http://www.kickstarter.com/, http://en.wikipedia.org/wiki/Deschooling_Society, http://en.wikipedia.org/wiki/Connectivism, http://en.wikipedia.org/wiki/Massive_open_online_course, http://archive.p2pu.org/webcraft/node/5749/forums
- July 11th annotations:
- Gave the team some feedback on my work plan for the coming week, during the SCRUM standup meeting. We had an inspiration session with John (Vanessa's friend) about co-op companies (Greenhill, People Supermarket). Talked to Aleks to get a general view over the state of our branding. We're probably crossing our work later during the week. I'm today focused on drawing the personas and mindmaps. Vanessa will help us with content and context.
- Complimentary info:
- - Quotes from Leah's interview (Vanessa): complexity is not for the first course; dealing with the quirks of the CMS; personal motivation; breaking up each lesson; suprised by the number of people; verb 'post' as the main interaction metaphor; give up control (peers act as co-leaders); we need a smarter CMS/editor for adding tables, etc; branding for courses and schools; expansion to external links.
- - Quotes from Stian's test: Admin versus edit challenge; tabs might work better then 'depressed' buttons; creating a task is something essencial; how to add/remove badges?; coherent language for buttons and links; building a challenge should be easy; how to add participants?; how to express the relevance of each group of participants?; when do I get a badge?; do I get it by ending the course?; irrelavance of activity feed's content; how to see comments?; localization problems with filters; hard to find courses beginning and ending; course info below the fold; essencial info are start, status, type, prerequisites, expectations; front page shows no course; start your own.. what?; course search problematic filters; 'sandbox' mode for course organizers, keep it private and show it to the user; open or closed, but soon or late?; logged in problems; methodology?
- - My personal observations: 'browse groups and courses' leads to the same page as 'learn'... but are they synonymous? / schools homepages are only accessible by the footer part / inconsistence in the way courses are displayed in 'learn' and 'school homepage' / schools homepages don't follow template-whilelabel compatible layouts / inconsistent styles between courses and challenges / the URL doesn't change related to the type of the page / there's no info that the user has to login to assess a badge / how to post multimedia content? / courses in other languages are confused to appear on the homepage / there's no instructions step-by-step on how the participating or creating courses work / clicking on comments leads to a giant thread / how to capture people who are coming in the middle of a course / how to deal with responsive design?
- July 12th annotations:
- We had the usual SCRUM session where I presented myself as a 'doctor' metaphor, as in the last couple days I've been doing the whole diagnosis of the interactions among peers. I'm really into qualifying the ideation process so probably the 'discover' phase is taking longer than planned - which is also good, that means there are a lot of opportunities to be mapped. Talking to Alex we were introduced to the 'you're 7 years old' mental model. Now in the morning I'm finishing the global mind map of P2P learning and later on the afternoon I plan on working simpler ones for the main personas. Group validation is close by. I need some time to summarize all of my work so far - thinking of using Google Docs.
- Complimentary info:
- Got first blog post rolled out. My first deliverable was the general 'what's behind p2pu learning' mindmap, and I defined it as 'fuel for insights'. We had a great visit to the Museum so my work day was really short.
- July 13th annotations:
- Usual standup commenting about all of the mapping I've done. Got some more details from the blog on how badges work (special attention to this user's suggestions http://bit.ly/P4cLol). Had some extra talks with Aleks about some (lack of) design issues - special attention to the non-clear speech found in the badges page (inconsistent verbs like 'done' and 'check' on the checklist, should pay attention to that metaphor). Focusing now on finally describing the personas over the PMTONBAS model. Also taking some quick look at do's and don'ts of some social platforms (Google+ / Twitter / Pinterest / LinkedIn / Deviantart / Flickr / Soundcloud / Instagram / Foursquare). The personas published on this study (https://wiki.mozilla.org/images/b/b1/OpenBadges-Working-Paper_092011.pdf ) helped on getting the general picture of our potential users. Got my second blog post written and sent it to the list.
- Complimentary info:
- - Challenges best ways: avoid getting stuck, materials by stages and user-levels, clear goals and incentives
- - Skill badges: after completing a task, and getting evidence / Stealth badge: automatically on user activity / Community badges: traits
- - Important: when you click the logo after being logged in, you're redirected to the activity stream. There's no info on your current courses.
- - Some updates from John: we're unifying the courses and challenges structures, so statistics are basically going to be: estimated time of completion, availability of badges. Thinking of the (non)needness of having number of posts/recent activity.
- - End of the 'discover' part of the journey. Guess I'm on full throttle now. Will just have some complimentary readings by the end of this day.
- -------------------------------------------------------
- Connect
- July 17th annotations:
- More hands-on work these days. These are some of the details I've diagnosed in the website. I'm taking the mindmaps as a reference.
- Home - Badges - Challenge Creator Badge
- - Title plus breadcrumbs
- - Too blocky, no bezel needed
- - As for the 'browse' factor we should have more prominent titles for the proponent/organizer, progress and badge blocks
- - The badge drawing should go to the right side to keep coherence with the courses page
- - The 'progress' items show be more graphical somehow. Probably using color codes would help
- - Reviews metadata should follow our standard pattern
- - The scores are too narrow and too far, should be better to read - a 2 column layout would probably work fine
- Home - Submissions - Challenge Creator Badge
- - Make it clearer that that image is the badge you're getting
- - Check voice guidelines with Vanessa
- - Apply the new tabs layout to this page
- - Pay attention again to metadata
- - Why is there just 1 line of comment?
- - Put the read more link always below the text so the user doesn't need to me goofing around with the mouse
- Home - Learn - How do I make a P2PU Course? (not logged in)
- - Talk to Vanessa about that first sentence when you're not logged in
- - 'Awarded' what? There's no name for the badge
- - Do new button layout, use arrows all over the website
- - Task list should be more to-do kind of - take a look at todoist.com, they have normal text, no numbers and an styled checkbox. You can drag and drop the tasks and the comment icon shows whenever you hover your mouse
- - Put these complimentary texts all over the website as to guide newcomers (an important feature that's been mapped)
- - Maybe instead of having numbers we could have some sort of message about the recommended order for tasks (like, you're free or not..)
- - Task discussion, no message why I cant post
- - Add number of peers participating, so you get a clearer vision over popularity
- - Maybe add a random generator for profile pictures?
- Home - Learn - Remix the web …
- - Have complimentary text for titles, which have to be re-styled
- - Metadata
- - View full… - it can be a simple link
- - What school is this course in?
- - Deeply rethink the participate and follow buttons (do as the challenges page for instance)
- - Have a better, less space layout for tags
- - Statistics… how could they be improved?
- - Rebrand the tasks list both for courses and challenges
- - Filters have the same layout as tags, there should be some sort of differentiation
- Home
- - Smaller header
- - Rethink texts
- - There's the activity wall title missing as well as some sort of reference of were it comes from
- - Reorganize metadata
- - Deep thinking over what activities we must have
- - Try to have smaller post sizes
- - Is it necessary to show that something's been posted by p2pu?
- Home - Learn - Reimagining… - Task list - Reading comprehension
- - Tabs
- - Task discussion maybe collapsible?
- - Metadata problems again
- - What's the praise for a post, just answering?
- - Think of ways to make to better to read
- - What's the reward for getting to the end of a conversation?
- Home - Learn
- - Rethink icons
- - Schools branding for visual clarifying
- - Tags are cumbersome, think of their identity all over the website
- - Language filters must be redesigned
- - Title plus subtitle
- - What's the relevance of images and why aren't they on the correct size?
- - Think of filters
- Home - People - João Menezes
- - People page is nowhere
- - Try to make statistics look the same all over the website
- - Latest courses… taken or given?
- - Titles of the courses, maybe even the cards
- - Coherence with the reply paper airplane icon
- - Already logged in page
- Schools
- - General problems with standards
- - Titles and subtitles missing as well
- - Update courses cards
- - Maybe some sort of banner where schools could personalize
- - If a user is a school organizer, he/she should get some praise at his/her profile page
- - In general, what's the relevance of schools and how to show them to users?
- -------------------------------------------------------
- Construct
- July 18th annotations:
- - We had a quick show and tell about:
- - What is design thinking (platform to understand phenomena, things that are around us and get them connected. it also thinks of the future in relation to people)
- - How it's been applied to P2PU (as commented - discover, connect, construct)
- - DISCOVER: (doctor metaphor - i could just say you've got the flu by the way you look, but I'd better do so research and talk to some colleagues to give you a more precise diagnosis)
- - DISCOVER: mindmaps list the opportunities we have about the central theme, which is peer to peer education. There's also the idea of incubation, where ideas aren't ignored but incubated for future use.
- - DISCOVER: these 2 maps, which are from a platform point of view and a user point of view. They'll be documented just like the Voice guidelines Vanessa wrote - so it's an UX Guide to p2pu, that should be reviewed whenever we propose new or improved interations in the website (this way this work won't get lost)
- - CONNECT: the second part of the process is connecting ideas… and having those guidelines for UX behavior, we were able to look at every screen, take screeshots and do annotations on which improvements had to be done
- - CONSTRUCT: this phase is being parallel with Aleks as he's doing some sort of branding guidelines - we really needed it before starting doing the complimentary pages (again, the doctor metaphor). So for today and the coming days, we're all prepared and secure about doing the website redesign because we have strong foundations over content, branding and UX.
- - Some nice websites that have UX guidelines:
- - Some more examples:
- - Started summarizing some UX guidelines itens. Guess the 5W2H model might work with some remixing. Wonder if these are over a developer or peer perspective?
- Nokia's got a very interesting one, with complimentary downloads and options:
- Getting started: general context, docs updates, feedback, UI (concept, general elements), hardware, guide principles (conceptual), visual principles (what to do, what not to do - "reduce noise, personalization" etc), color (highlight, applying to button states, progress bars, positive and negative buttons, radio), icons (grid, when and how to use), logos (applying them etc), nonvisual feedback, tone and language (what do say, what not to say, what terms to use), use of text (localization considerations, reading direction)
- Core UI framework: overview, overall UI model (essence, home list search etc), moviments, home, complimentary info and tools, communication (tools specifics), productivity, media, service integration and sharing
- Pattern library: navigation structures (tab bar, drill down... typically used for character input, notes, usage, back and forward navigation), deleting (guide and options), empty states (user and system), error handling (inline message, info banner, dialogue and modals, voice and tone), scrolling, indexes, screen/images resolutions and sizes, multiple selection and checklists, responsive layouts, editing and confirming, search and filter, lists and tables
- Component library: app basic view, buttons, controls, dialogues, menus, group headers, dividers, tables and lables, list items, progress bars, slider and seek bars, spinner, system banner, text fields, toolbars
- July 19th annotations:
- Decomposing Bootstrap and design talks with Phillipp and Aleks
- Elements from Bootstrap: default, toolbar examples, buttons (action, action accent, danger, warning, sucess, info, inverso, button sizes), dropdown, dropup, tabs, tabbable, lists
- Elements from P2PU: breadcrumbs, task list, progress bar, points/evaluation scale, tags, filters