Assignment/brief:  To create an interactive experience that communicates to an end user what it is like to live on a dollar a day.This assignment is inspired by the work of the humanitarian organization Trickle Up. Trickle Up empowers people living on less than $1.25 a day to take the first steps out of poverty, providing them with resources to build sustainable livelihoods for a better quality of life. The President of Trickle Up and their Communications Director will join us on April 3rd to review your concepts.

I’m working with Jonas Pedersen on this project.

Challenges:

- The story has been told many many times before, we feel the Trickle Up story needs to be told in a radical new format to make it even more compelling and engaging.

- We’ve already been exposed to their reality in numerous ways and forms. People of the western world are fully aware of the situation.

- There is a lot of fact to the story.

- The story has to be told in a way that is relatable to a wide range of people.

Solutions:

- To tell the story using a combination of Parallax scroll and ProgressiveImageSequence.The user will find a text, something like “This is Mgala’s true story…” Then, the user would scroll down in order to see the story unfold through the use of Parallax scroll and ProgressiveImageSequence (as mentioned).

- We are using this approach because we believe it is the most appropriate way to re-tell the story. The scroll engages the users to actively participate and it keeps them entertained and prolongs their attention span. It is low cost way of getting them involved, it’s step one.

- The user would get the feeling of being in control. They don’t control the story but they control the speed and the level of detail they want to delve into at different points. The feeling of control suggests to the user that she has the power to influence their lives in a positive way, as the narrative conveys. 

-Style: We would like to use cut-out and collage like visuals (as shown below), and imitate a form of stop-motion like animation for the characters.

This our concept sketch:

Lately I’ve been reading quite a bit about website and app design. A content-focused approach to designing a website is now fully advocated by many of the readings, i.e., an approach that aims to avoid the awkward situation where a site/app’s design gets in the way of the content/functionality, making the user experience clumsy.

While helping a friend with a mock-up for her own project, she showed me the vevo website (VEVO.com). I really appreciated how “straight-to-content” it is. The presence of the design is very minimal, and it manages to not only focus solely on content, but also to enhance it and make it sexy (for example, one lands on the main page and finds a huge “billboard” of the video premieres — a search field is the second thing I saw). 

I just tried out the demo version of Context, I have to say it seems pretty amazing, you’re up and running after installation with a very small learning curve, and has an almost seamless integration with Illustrator.

It’s a great tool for quick visualization of “implemented concepts” and iterating through mock ups in a realistic, well, context.

This is quick lo-res mockup to the Home page and Content page of Great Buildings.com

I propose a layout that seeks to broaden the access to the amazing content greatbuildings.com has. The challenge lies in that with copious amounts of content, one has several ways to categorize it, and also different channels to access the content. My idea is to synthesize categories and channels (search, browse), and to make the experience a visual one (relying on content).

The homepage would not require scrolling down, would have easy to access functionalities (search browse), and have an invitation for the user to join the community. I also imagine that the experience would incorporate a user’s architectural blog to the navigation, as is show in the second shot (content page), where the user’s blog is in sight and open to accept drag and drop pictures and even content.

The main nav bar will have a sub-nav to provide breadcrumb navigation functionality, I feel that’s always useful when there’s a lot of content. The Louvre’s website inspired this functionality.

This post shows my analysis and flowchart for this website.