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.
- 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.
- 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.
This is the new story board:
I’ve also created an animatic that will be shown in class due to its file size, here are some screen grabs:
I animated a walk cycle in what I considered an efficient way, but I need to find out how to loop the keyframes. This required me to: labeling the layers per side of the body (workflow), adjusting anchor points to joints, animated 3d rotation movements, animated scaling. Here is a screen grab of the figure that I am using:
I’ve prepared my flowchart in mural.ly, which allowed for a post-it/flowchart hybrid workflow.
Click here for the flowchart.
Below is a quick view of the discovery stage:
List of processes to consider:
- to search for
- time periods
- to comment
- to share
- to look at:
- to compare buildings
- to compare styles
PRIMARY:no about page ; search?; buildings; architect; places
These are a few notes taken from my UX and Design Thinking classes and readings related to these topics.
I will tell the story of a woman who falls in love in her dreams and wakes up to a heartbreak.
She begins wandering into a dream, meets her lover, and a quick “stream of conscious” chain of events unfolds, tension arising when her lover disappears. She wakes up, heartbroken, but still in a dream-like scenario.
Storyboard & Moodboard screen shots:
I will try to implement this “live drawing” technique as a .mov.