Information Architecture and happy path

[rocioleon]

What

In order to build the DU-campaign site we need to organise the CONTENT and NAVIGATION and describe the USER'S GOALS, TASKS vs. FEATURES

How

IA: Sitemap
OOUX: Object mapping
Happy path

Considerations

• Cover pain points and highlighted feedback from colleagues and creative brief (see file attached for more details _v2 OOUX and v1_reviewed )

Summary:

• Eye-catching and appealing opening message and visual on the landing page.
• Show the DU Campaign 9 Principles and 10 Demands .
• Reduce steps for user to get to the drawings and share them.
• Filter drawings.
• Attribute the source of the drawings to the developed API part of the DML project (EH.org).
• Mention other partnerships and data visualisation, such as HDX and Childhub for communications and awareness.
• DU branded.

To Do

Describe up to 3 goals to be accomplished by user(s).

User 1: Peter John, active member of the DU Campaign.

Goal: share drawings.
"I do advocacy through the Destination Unknown Campaign supported by Tdh. In order to do it more efficiently and raise awareness about the challenges these children are facing due to migration on the move and the refugee crisis, I want to public drawings made by children based on the South and Eastern of Europe."

Goal 2: Showcase the fieldworkers amazing job they are doing by collecting the data (in Serbia) to provide the source of information.

"In order to showcase the origin source of these drawings, I would like to read more about what / who (org. and other partnerships) are behind this process of collecting the data and managing the content for us."

User 2: Sarah Louis, journalist

Goal: Understand what the DU Campaign does, why and how.

" I am a journalist reporting about the refugee crisis in Europe. Recently, I saw tweets from DU Campaign sharing a bunch of drawings made by children who are facing these challenges in areas around the South and Eastern of Europe. I want to know more about their campaign."

• data requirements from @krissy please advice: what drawing can I use for this.

[rocioleon]

Hi
@marizoldi @EChesters @krissy @CathMollie @tanyapowell

Based on feedback and notes (see attached v2_OOUX) I've worked on the organisation of the content and set up a base on navigation (nest objects). The Object Mapping method I've followed is new to me but I followed the interesting article that @EChesters suggested me.
v2_OOUX.zip

I think, we are pretty much covering all or most of the pain points so far. From my point of view, I would not add any more until we get to present this prototype to the stakeholder, in this case Camille and DU Campaign responsible. But amend what is not correct on this _v2.
Send your feedback and ready to prototype!

[rocioleon]

The following files were reviewed so there is not need to see them again but to keep all work done together under the same ticket.
v1_Reviewed.zip

[tanyapowell]

Thanks @rocioleon these are great 😃! Just a few comments/questions

a) Will we be displaying all images being stored in our DBs or only images being uploaded by DU field workers?

b) If we are making this on behalf of DU, do we want a separate specifically About DML page? Or do we want an About our Partners page with copy about all the partners (including DML)?

Also, do we only want it to be about the service or everything we are doing?

c) DU wouldn't be a partner for their own campaign, perhaps we (DML) could be? Might be something to discuss with @CathMollie and @krissy

d) What are the maximum images per page? Or maybe we want infinite scrolling? We had a similar discussion regarding the admin tool (see here) that could be useful for this

[rocioleon]

@tanyapowell thank you for your comments.
rg: a)
answer: We will show ONLY the DRAWING uploaded by the fieldworkers WITH CONSENT.

rg: b)
answer: First of all, the two sketches you are focusing on are v_1 which means that after the feedback from team (on slack channel) I came up with amends v_2. Therefore, DU is the stakeholder for us. Initially we are designing this solution for them with Camille (Tdh) as stakeholder as well. The 'About...' (perhaps we need to find something more descriptive) is the space where we talk (briefly) and add CTA-web-link about DML-Service as the 'engine' that provide these drawings, we also need to mention our Data Visualisation through HDX as this is also one of the uniques of DML project and Childhub as another via of communication and raise awareness as Camille mentioned on the creative brief.

rg: c)
answer: v_2

rg: d)
answer: we need to think about. I don't know how many drawing we have but I would suggest to follow what we decide for the API as well.

Of course, I might be wrong about something, let's see the team's view

[tanyapowell]

@rocioleon you're right! Did not spot v2

I can see confusion with the terminology we are all using (spotted this a while ago in slack and forgot to say) and think we should be careful with the terms/concepts we use. From what I've seen API is being thrown around to mean the upload/admin tool and also mean the actual API. When I hear API I think of the backend returning some data to the client (frontend) in a format similar to this:

{
  id: 1,
  name: 'Tanya',
  age: 21
}

For this CTA do you mean the admin/upload tool or what I have put above? If it is to the admin/upload tool, do we need to change the homepage on that to have some info about it, because it's currently just a signup page? Personally, I'd just have one CTA here taking a visitor to the DML website where they can find all the info regarding DML

[rocioleon]

@tanyapowell I think you are right with it. It would be clear to guide them to the DML website and then, from there, they can find more information.

Also, about the confusion regarding terminology, sorry about that.
HOW CAN CREATE A LIST WITH BEST PRACTICES TO NAME EACH OF THE SOLUTION WE ARE TALKING ABOUT?

[tanyapowell]

@rocioleon don't apologise I'm as much to blame cos I throw around terms assuming people know what I'm talking about without explaining myself.

Maybe we should create a wiki/glossary in the DML-Website explaining all the terms being used because I get very confused lol

[CathMollie]

@rocioleon You've done a brilliant job on this. So much work and great quality.

To be honest, not much more to add because agree we should get this prototype in front on DU/Tdh and go from there.

Agree with @tanyapowell about link to DML Website not Admin Portal as DML site is the hub for 'all things DML'. Plus you'd need to be registered with an org to use the Portal currently (no self-register option yet) so this CTA/journey may lead to a dead end.

Query - Data viz is surfacing same stuff as on DML website? Cool if so and if doable.

Query - slight question about HDX being presented as a DU partner (as I'm not sure they are yet) but this is clearly a partnership we want to encourage if a lot of our data is going to be on HDX which DU campaigners can then consume, so yeah - leave it in.

That's it from me, and great job!

[rocioleon]

@CathMollie thank you for your feedback. As you said, I think we can go from here and let them to interact with it and think about it. I will amend the wireframe and start prototyping ( and test, and amend...)

[krissy]

@rocioleon Really awesome and detailed work! Well done!

Re @tanyapowell's comment on API CTA, I agree the upcoming DML website should most likely be the one CTA to DML. The API itself will have a documentation page of its own for developers; it's tentative whether this will live on the same website as the Admin / API or whether this will live on a section of the DML website. (A separate chat the team can have)

Wireframes look great and well thought out. My main feedback is on the landing page and if we've decided on the image interaction element of it; the UI will have a big impact on how powerful this will be.

In my mind, I've pictured this almost as a single page interactive image gallery rather than an informative website, the drawings take the main stage, with some type of modern UI goodness that makes it an exploratory experience.

So I'm wondering if the landing page should actually be the drawings page in that respect, auto-scrolling e.g Pinterest. Some of the very profound image descriptions could be highlighted in blockquotes every now and then to give immediate context to the drawings, and a link to the About page and DU logo would be present to click somewhere always. The aim would be to make this landing page so visually intriguing and emotive that people will want to click on the About section to then find out more about the DU campaign and its demands, rather than keep this information on the landing page.

Some examples on a quick search to help visualise (my visualisation!):

http://thehungryworkshop.com.au/
http://panorama.wfp.org/
Or other examples of interactive art galleries online.

In terms of what data to showcase, I'd say the most interesting and emotive. E.g. the drawing, the child's age, the story of the drawing, organisation and country collected to highlight this is a collaborative and global effort across agencies (and inviting new partnerships). Can the metadata show up on hover instead to keep it image-rich?

Only opinions and maybe these questions apply to the mockup phase but just wanted to throw them in here in case this school of thought might impact the wireframes at all. Let me know if that doesn't make sense or if this just doesn't fit the use case. Please feel free to just get this moving otherwise!

[CathMollie]

@krissy In order to preserve the work that @rocioleon has done already, could this be an alternative treatment? Because we don't know exactly what DU want it would be great to go to them with a couple of sketch prototypes.

@rocioleon Let me know what you think as more work for you. The sites @krissy has sent are totally beautiful and inspiring - just conscious that we've given you a lot of detailed and sometimes conflicting feedback. We need to think about how to do this better in future I think - i.e. have a cool-off period where all the key people have a chance to look and comment so we can then resolve any conflicts. I'll put on the post on the channel about it to see what others feels.

[krissy]

Copying this over to here so this thread gets some love too!

Yep definitely @CathMollie! Especially as we communicate remotely it's a challenge to both share ideas and input whilst keeping momentum and not have "too many chefs" slow down the process, especially when loads of great work is being done. As I said in my comment @rocioleon please feel free to just carry on and put your foot down on things, there's also flexibility to make note of any suggestions and apply whatever suits later in the process. Design input will always be very subjective and it's up to the design lead to make the ultimate decisions at the end based on what's best for the client. You're doing a fantastic job so last we want to do is undo that great work!

[marizoldi]

@rocioleon very nice work! My piece of feedback:
I agree with @krissy that the drawings page can move to the landing page for a more contained view of all information. There should also be a clear explanation of how the DU-Demands and DU-Principles will work as filters for the first time visitor (to ask Camille). So the whole landing page structure could be 1) top text about the cause, 2) link to CTA as you have it and 3) the drawings with the filters and right below explanatory text about DU-Demands/Principles. For viewing the drawings the free wall could work here but I wonder if we could make it contained too, such as show 4 images with possiblity to click for next 4? or flip if on mobile? I am a bit suspicious of infinite scrolling of images :) It has worked only on Pinterest for me where you often want to just wander around with no particular filters except your search terms, and even there the images can be contained in Boards, and also suggested images is a very important part of the way the site works because as a visitor you want serendipity (This does not apply in our case in principal, however, suggested Drawings could also be a nice function for many of our personas). I liked @rocioleon 's first hackathon wireframe with the carousel (though carousels have UX Issues - 81% of visitors don't go further than first bullet) but I would take from it this sense of 'containment'.

In terms of presenting the drawings I would suggest to make use of swipe which can work on both mobile and desktop. This effect is nice (works with finger sliding on mac, could be adjusted to one finger flip on mobile?):
http://tympanus.net/Development/GridNavigationEffects/example10.html#
or something similar ..

Let me know what you all think and I hope I am not confusing things more!

[rocioleon]

@marizoldi thank you for you feedback! Yes, I was making some amend on the IA and wireframe already to make:
-Landing page 100% agreed = Pitch + CTA + Drawings more visible (with filters) + Principles and Demands (explanatory text provided by Camille as she suggested)

-Rg carrousel, free wall or flip I will play around to find out what work best for us.

-Rg suggested Drawings I think it would be very useful to cover our personas and engage with them and somehow guide them more about the 'journey' of these kids experiences.

Pd: Maybe I will be able to recycle some of the previous work from the hackhaton so all cool!

[rocioleon]

Updated sitemap however we might need to amend some little things after call with Camile and Vincent but I think we did a very good job in here 98% correct