The making of Carrion

Page 1

DIM3 - A3 - MOBILE APPLICATION SEM 3/ 2013 TEAM LIVE MOBILE APPLICATION

Designed by Live: s3360598 - Nguyen Mai Anh

Nguyen Mai Anh s3357968Tran Quoc Hy Tran Quoc Hy Bui Xuan Quyen s3375672Bui Xuan Quyen Le Thi Nguyet Minh s3372661- Le Thi Nguyet Minh with the help of Web Developer : Pham Ngoc Thach

PROCESS DOCUMENT The Making of CARRION A CHALLENGING - BACKBREAKING - REWARDING EXPERIENCES



INTRODUCING LIVE We spark lives with creativity. We turn dreams into reality. ourselves and to our clients that: Every creation is the finest creation.

Sine founded in 2011, as a team and individuals, Live has won more than 50 HDs*

ON DECEMBER 2013, WE DECIDED TO MAKE AN IPHONE APPLICATION, THIS DOCUMENT TOLD OUR JOURNEY FROM THE BEGINNING.


THE JOURNEY Timeline & Work Allocation Searching for ideas Brainstorming Presenting & choosing ideas The idea What is it? What does it do? The Concept Researching & Analysing the possibilities Market research Competitors Getting the feels Style exploration Inspirations MOODBOARD Pitching the Idea Organizing the apps Sitemap Flowchart Features Identity evolution Name Logo evolution Color - Font - Style

CHOSEN IDENTITy ICONS MOCKuPS Wireframes Mockups evolution PROTOTyPE PROMOTION PLANS WEBSITES Wireframes Mockups Codings - problem POSTER Wireframes Mockups VIDEOS Promotion video Storyboard Shooting Post-production Demonstration & Feature Video Storyboard Editing FIXING & FINALIZING


TIMELINE & WORK ALLOCATIONS

DIM3 -­‐ COSC2285 -­‐ G1 -­‐ ASS1 -­‐ Web Interface Design Team Live : s3360598 -­‐ Nguyen Mai Anh s3372661 -­‐ Le Thi Nguyet Minh s3372672 -­‐ Bui Xuan Quyen s3357968 -­‐ Tran Quoc Hy WORK PLAN -­‐ WORK ALLOCATION PIC

Having working with each others before, we know the strengh and weakness of each member in Live in order to give us the most suitable jobs in suitable timeline. However, during the working process, we switched jobs and in somecase, did other member’s works since they were busy doing something else. It is clear that we didn’t understand clearly how massive and time-comsuming the project can be, also, we didn’t expect that personal life of each members also had a great impact in slowing down our process. As a result, we ended up with stress, fights and overdued works. (When writing this Process doc, we didn’t really know if we could make it before the deadline -tomorrow - Sat ). On the brightside, we were being very patient and tolerant to each others, we also tried our best to finish the works in the best quality possible.

ALL

Minh

WORK APP -­‐Ideation, Sitemap, Flow Chart, Wireframe Sketches Icons, Web-­‐Wireframes, Poster Sketches Styles, Colors, Typography, Moodboard Brainstorms

DESCRIPTION

WORK

All need to seriously think and understand these items

21-­‐Dec

Sketch down as much as possible

24-­‐Dec

Be an excellent members

Respect, Responsible, Patient, Hard-­‐working

App's Features

Write down all possbile features the App can have

App's Wireframes & Design

Make the digital wireframe for user testing and design the interaface

Poster -­‐ Design

Design the Poster for the App Design the Logo for the App

App's Logo

MA

Finding colors combiantion and fonts combination to best suit the app. Be involved and contribute ideas in all of the meetings

FINAL

30-­‐Dec 1/10/14

16-­‐Dec

19-­‐Dec

21, 26-­‐ 29/12 1/1 24/12 30/12 23-­‐24, 30/12

23/12 26/12 26/12 2/1 26-­‐Dec

Make Plan

Make timeline, works allocation and keep track of works. Make sure 16-­‐Dec that the works meet the deadlines

Write and Finalize Content for all materials

Content for Poster, Website, Demo Video and Process Book

19-­‐Dec

24-­‐Dec

App's Wireframes & Design

Help Minh design the App's mock-­‐ups

21, 26-­‐ 29/12 1/1

2, 3/1

Process Flow

Make the process flow for the app

Promo Video

Make storyboard & Edit the Promo Video Collect all materials, write and design the process book

Process Book

9-­‐Jan

21-­‐Dec 24/12 3/1

24-­‐Dec

7-­‐Jan

9-­‐Jan

5-­‐Jan


TIMELINE

This is the ideal timeline we set up for our team. For week 10 and 11, we kept up with the schedule. Then deadlines and exams flooded in and we couldn’t manage to follow the plan anymore. Sine then, we fell in stress and depression while trying so hard to get all works done.


SEARCHING FOR IDEAS - BRAINSTORMING We started with many ideas in mind: Choosing hairstyle App, Fashion Styling App, Cooking What - Left - In- The- Refrigerator Apps, DIy Tutorials Apps, Supermarket- quick- checkout App and even more. However, none of the ideas were interesting enough to convince all the members of Live. METHOD 1: List out everything we have in mind by mindmaps


SEARCHING FOR IDEAS - PRESENTING IDEAS METHOD 2: Working individualy, write details for our own ideas and present them to each others, try to persuade each others.


SEARCHING FOR IDEAS - CHOOSING IDEAS METHOD 3: VOTING and asking opinion from an outsider. We finally narrowed down all the possible ideas to 2 : 1/ Supermarket-fast-check-out Application 2/ Exquitsite Corspe Application Since it’s hard to decide between the members, we asked opinion from an outsider and the result is : Exquitsite Corspe Application.


THE IDEA - WHAT IS IT?

WHAT DOES IT DO?

platform This is a social network application for iPhone – a flat form for creating collaborative art works across the globe. This is where the user continues a work made by another user and vice versa - has their works continued by others .

This application is built based on the Exquisite Corpse concept, in which, a drawing is made by different contributors, the later one carries on the previous one’s work by continuing drawing where it is left off, without knowing the content of the previous part.

Our application allows users to express themselves through art, whether by drawings, making sounds or writings. With their art works, the user can stand out as a unique individual while also connects with other users to together create a public artwork. The whole idea of this application is the continuing of making art works from people to people. It likes a game and also an art project that welcomes everyone. This iPhone Application is the place for all kind of arts - all kind of artists that mix and match with each others. Their creations, as a result, will be mix-cultural - the creation that reflects different aspects of life under the percpetions of different people. In this way, the Application can create something both very surreal yet also very real. It is surreal because the contributors have different style and references, but it is real because it is a demonstration of our society - a mixture of unique individuals.


THE IDEA - WHAT DOES IT DO ? The App allows user to experience the same routine online. The 1st user who creates a new work will decide how many pieces this work has. The number of pieces equals the number of contributors, and one user can only contribute once in a same work. The result of the work will be showed when it is completed. All pieces will be uploaded in Carrion so every user can choose to continue the work they like. What the user sees in these pieces are the last parts of them – where they have to start the next piece from. Carrion not only offers making drawings but also sounds and writings in the same process. More importantly, the app allows many users to work on the same piece. As a result, from the 1st piece, many works will be produced.


THE IDEA - CONCEPT 1. ART OF THE PEOPLE: The result of Carrion is the making of public art – a public legacy that reflects the world we live in. These artworks are the mixture of individuals, cultures and perceptions. Each user is a contributor in the presentation of their world - our world. 2. EXPRESSING yOuRSELF: Carrion offers a flat form for user to express themselves through art and creativity. In other network such as Behance, DeviantArt, the user expresses themselves through their art subjectively. In Carrion, they not only do that subjectively but also passively when acknowledging and adapting to the existence of the previous creation and the limitation of each piece. This is both a challenge and an enjoyable experience; under the constraint, the users might express themselves even more. 3. CONNECTING: Connecting people through art is one of the best ways to build relationship, since art, in most cases, doesn’t lie about its creator. In many social networks, people connect by words, images/ videos/ music. In Carrion, people connect by actually making one artwork together and by sharing same experiences; it is more personal and more real. Moreover, Carrion is the place to find inspiration from other artwork, to find collaborators for real projects or to have your works carried on by others.

SLOGAN: Creating. Connecting. Collaborating. The slogan captures the 3 main benefits of Carrion Creating: Expressing yourself Connecting: Finding inspirations. Sharing the fun. Collaborating: Making art works together. Continuing other’s works


RESEARCHES & ANALYSIS - MARKET RESEARCH


While doing the market research we were also making a small survey with the students in Design Program in RMIT Vietnam. We asked them to play the Exquisite Corspe game without explaining much, in which, they had to continue drawing from the marks left in the paper. When they reached the edge of their part (in the paper) they had to leave some marks so other can continue from there. The result came out as we expected, the students really enjoyed drawing from the existed marks - with them it was like a challenge to see whether they can draw something nice from those marks or not. The students were also very eager to see the whole drawing, they wanted to see the previous part and the next part of their drawing, to see how other people had drawn and how each parts of the drawing were continued in unexpected ways. They were willing to make more drawings like that and even invited their friends to join the game. On the right are all the drawings made from our survey. After the survey, we are confident that Carrion, by providing the same experience in the survey but in larger scale, can attrach many users of our age :15 - 24 years old (generation X and Y). Especially, those who are artistic. The design students in the survey are, apparently, suitable portraits of Carrion’s target customer.


RESEARCHES & ANALYSIS - COMPETITORS

Exquisite Forest By Chris Milk and Aaron Koblin is a collaborative art project where short animation continues each other to creates different narratives like branches of trees. The project has many beautiful and interseting narrtives made by many contributors.

Bodies and Beats The app turns user into a digital mash up artist. Create their own video collages set to beats, and then change the elements with a touch of your finger to discover something new. They build a body! Pick from a video catalog of body segments – from the surreal to the hilarious – all accompanied by unique beats and sound effects from musicians like Mux Mool, Mogi Grumbles, Sun Hammer, and Beautiful Bells. Mix and remix the elements to create something crazy, something funny and something weird. users can also control the video speed, with half-time and double-time controls. Or randomize the video clips to discover new combinations. Evaluation: It’s cool since it integrates many platform together image, video and sound. That makes the app so appealing.

Art Swipe The app allows users to make collages in similar fashion from images that are in the public domain from LACMA’s collection, images from the “In Wonderland” exhibition, as well as photographs from their camera and camera roll. The result is a collective collage, an image made up of parts connected by chance. Evaluation: It’s great idea when the app provide users with a library of images from exhibition along with their own images so users have more choice for choosing materials. However, lacking sharing feature is limit the number user involve make the app less interactive.


COMPETITORS COMPARISON Exquisite Forest (Art Project)


GETTING THE FEEL - STYLE EXPLORATIONS Looking for iPhone app interfaces, getting tips for dos and don’ts when designing for small screen interface. Looking for the usual style interface for most iPhone Application.


GETTING THE FEEL - STYLE EXPLORATIONS


GETTING THE FEEL - INSPRIATIONAL MOODBOARDS


PITCHING THE IDEA

We pitched the idea to our lecturer and classmates. Their interest in this idea really encouraged us to continue making this iPhone Application. Thanks to the pitch we also started to have a few good ideas for the name of this application.


ORGANIZING THE APPLICATION - SITEMAP


ORGANIZING THE APPLICATION - SITEMAP


SITEMAP - FLOWCHART - CARD SORTING


SITEMAP - FLOWCHART - DECIDE THE FLOW


SITEMAP - FLOWCHART - EVOLUTION Sitemap

Sitemap Showcase

Make

Profile

Showcase Portfolio

Continue

New

HOME

Home Journal

Draw

My Favorite

Drawings

New

Sounds

Unfinished

Writings

Draw

Categories

Sound

Notification

Write

My Favorite

Make

Complete

Draft

Sound

Search

This is the skeleton flow for the new app, more details are expanded further in the next pages.

Profile

Continue

Completed Unfinished Draft

Make on iPhone

Make on iPhone

Upload

Homepage Main Navigation 2nd Level 3rd Level

Edit

Edit Name & number of pieces

Notification

Choose from Categories

Write Upload from iPhone

Create

Search Journal

Download Upload from iPhone

Portfolio

Share

Save

Print

Save

4’th Level 4th Level

Share

Print

Download

5th Level 6th Level Main Flow Flow for “Continue” option


SITEMAP - FLOWCHART - FINALIZED

HOME

SHORT FLOWCHART Showcase

HOME Sign in Sign out Random showcase

Instruction Showcase Search User’s Space Make

Favourite Drawings Sounds Writings Profile Notification Portfolio

New Continue Draw Sound Write

Random showcase

Limited showcase

Drawings Sounds

Sign out Account Setting

New Name, Category & number of pieces

Completed

Setting

Make on iPhone

Draw

Paint: Color, Opacity, Texture Brush: Type, Size, Color

1

Undo, Redo, Clear, Erase, Crop, Filter, Rotate, Color: Brightness, Saturate, Contrast

Completed Go to

1

Go to

2

Unfinished Save

Draft

From Gallery Time limit

Upload item

Sound

Take photo/ Record

FULL FLOWCHART

Trim

2

Editing Tools

Make on iPhone Effects: Fade in, Fade out, Speed, Pitch, Normalize

Instruments: Drum, Guitar, Trumpet,Violin, Beatbox, Piano

Invite friend Print

Save

Share - Invite friends Print - Download Post on social networks

2

Write Save

Account Setting

Categories

Record

Fom Gallery

Edit Info

Portfolio

Write

Make on iPhone

2

Sign out

Notification

Sound

Convert to vector

Draw

Draft

Upload item

Upload item

User’s Space Profile

From Gallery

1

Categories

Unfinished

Search

Continue

Take photo

Writings

Edit Info

Sign up

Instruction

Make

Favourite

Categories

Sign in

Make on iPhone

Draft

Poem

Words limit

Copy, Cut, Paste, Color, Bold, Italic, Spell & Grammar check

Sub page

2nd Level

Main Flow Flow for “Continue” option

3rd Level

Download

Story

Main page

Post

Share

on App

Soundcloud

Twitter

Facebook

4th Level Buttons with specific functions

Info provided/ required in specific pages

All in a same box can be seen in one page


ORGANIZING THE APP - FEATURES Inviting friends : The app allows user to invite their friends to carry on their works by sending emails to these friends (they have to has this app in order to carry on so this is a good feature to get more users for the app) Notification: The user will be notified if there are any interactions with their works by other users. Ex: Like, Comment, Add to favorite, Work is carried on or has been completed. Portfolio: Portfolio is where the user can keep and view all of their works – whether completed, unfinished or draft. They can also edit all of those, even after uploading to Carrion, only the last part of their piece is unchangeable. Search: The user can always search for a work or an author by using this tool Editing tools: For Drawings; Sounds and Writings, Carrion offers standard editing tools for the user to refine their work.

Post on social networks: Carrion allows user to post their works on other social networks. If the work is unfinished then the work posted (of course) only shows the last part of it with invitation to continue it. Print & Download: user can print and download their works to their iPhone and other related devices Taking photo and Recording: user can also uploading/ recording/ taking photo of their works to Carrion if they don’t want to make them by Carrion’s editing tools Categories: user can choose art works by the category they like and avoid the type that they don’t like both for continuing a work and viewing completed works. Voting system: user can vote for the completed works that they like. A vote for a work is a vote for each author of the work. Author/ work with high vote will be displayed in the front page of the Showcase page. Those who have high vote consequently can have many contributors for their next works. This feature works as an encouragement for the user to do their best in making the art works. In the future, there can be prizes/awards to give more motivation.


IDENTITY - THE NAME

As can be seen, the app’s name is made up from the words “Carry on”, which is the main core of this application: CARRION is based on the idea of continuing other’s works and creating collaborative art - where the work is carried on and on by different contributors until it is completed. Therefore, the name effectively represents the app. By making the name sound like a human name, we give the app an identity that can be easily related to by the user. We introduced Carrion as a person, a friend and by making friend with this person; users can express themselves in an interesting way and reach out to more friends around the world. The human name also makes the app more memorable.


IDENTITY - THE LOGO - SKETCHES


IDENTITY - THE LOGO - MOODBOARDS


IDENTITY - THE LOGO - DIGITAL SKETCHES


IDENTITY - THE LOGO - DIGITAL SKETCHES


IDENTITY - THE LOGO - DIGITAL SKETCHES

u


IDENTITY - THE LOGO - FOUND IT! Deciding the logo must be the hardest part in the whole process for our team ( except being chased by the deadline). It cost us a lot of time to sketch and find ideas for the logo that best suit Carrion. No matter how many sketches we produced we seemed to not all satisfy with it so we kept changing the logo. This lead to the postpone of other works in the process. At first, we focused on the idea of surrealism, we wanted to make something look weird. Therefore, we kept drawing all the weird creatures we could think of. However, the more we drew the more complicated the logo got so we got stuck in there. In the end, there were 3 ideas proposed: using the image of water-drops, using the spiral or using a special creatures to represent the app. After consultation with our lecturer, the spiral was the best choice according to him. However, our team wasn’t satisfy with that, therefore, we gave it one last chance to make a new logo. This time, we got what we think is best suitable for Carrion.

The inspiration for this LOGO is the inkdrops spreading out in a sheet of paper . It represents the continuty of the art. Inkdrop is the representer for the writer, the painter - the artist in general . The image of it spreading out is just like a metaphor for these people reaching each other - through their own art. And once an inkdrop meets another one on its way, together they can go much further on that sheet of paper. In Carrion, we promote the similar idea of people meeting each other through art and carry on each other’s work to create something ...special. The eye in the middle of the logo is for seeing, it is not the visual sight, but it is the perception, the understanding of different people, different culture that meet each other through art. If playing with words we can see the logo has an Eye and also a C : “Eye C” == “ I see” == “I understand”.


IDENTITY - COLOR EXPLORATION THE COLOR EXPLORATIONS


IDENTITY - COLOR THE IDENTITY - THE EXPLORATION COLOR EXPLORATIONS


IDENTITY - CHOSEN COLORSCHEME THE IDENTITY - THE COLOR - FOUND IT!

#67267C

#8731A0

#CB3887

We chose Violet as our main theme color, since according to our research, violet is the color least used by iPhone Application. As a result, tby using this color, our app will have great chance to stand out in the user’s iPhone screen. On the other hand, this particular violet color looks dynamic and refreshing which is suitable with the mood that we want to generate in this App - new, modern and dynamic.

#EBEBEB


IDENTITY - FONT EXPLORATION THE IDENTITY - THE FONT EXPLORATIONS



IDENTITY - CHOSEN FONTS THE IDENTITY - THE FONT - FOUND IT! Jura

ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

Abadi MT

ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

Hattori Hanzo Zag ABCDEFGHI JKLMNOPQ RSTUVWXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

ABCDEFGHIJK

Kelson

Pontus

ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

LMNOPQRST UVWXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

Aller

Devanagari Sangam ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

District Pro Lane ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

Sinhala Sangam

Minimal

Khmer

Dejavu

ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

ABCDEFGHIJKL MNOPQRSTUV WXY Z abcdefghijk lmnopqrstuv wxyz 1234567890

Satellite

ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

Bariol

ABCDEFGHIJKL ABCDEFGHIJKL MNOPQRSTUV MNOPQRSTUV WXYZ WXYZ abcdefghijk abcdefghijk lmnopqrstuv lmnopqrstuv wxyz wxyz 1234567890 1234567890

ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

ABCDEFGHIJKL MNOPQRSTUV WXYZ abcdefghijk lmnopqrstuv wxyz 1234567890

Levenim MT abcdefgh ijklmnopq rstuvwxyz 1234567890

The font for the app’s design should be san serif and simple enough to be readable in small screen. For other bigger space products, there can be another font added, which should be different, well-designed and stand out. We chose Bariol because it has thick enough strokes and appropriate kerning to be readable in iPhone Screen without taking too much space. The subtle curves in the strokes generate a friendly, easy-going and relaxing atmosphere. This font is suitable for Carrion because this is an art-based social network which requires friendly and freely atmosphere where people can make friends and expressing themselves. We chose Levenim MT for the name “Carrion” to go with the LOGO. Levenim MT is also a sans serif but it doesn’t have curve ends like Bariol so they can work well together - not too different or too alike. Levenim MT is more straight and stable, which generates a trustworthy feeling. Furthermore, the arc of the letters in Levenim font is similar to the arc of the C in the logo. Therefore, they work as a harmony visually.


IDENTITY - THE STYLE At first, we wanted to make the iPhone interface look colorful and chaotic with many interesting graphics, since the result of our application will be similar images like that - very surreal and strange. Part of which was the reason why we made the previous logo of Carrion very complicated and attractive. However, after the meeting with our lecturer we had to think again about the interface’s design. In Carrion, we want to promote the idea of collaborative art & people express themselves through art, therefore, the focus should be laid on the user’s works, not our interface design. Therefore, we went looking for a simple, clean and clear interface to make the artworks stand out.

Like

this

!!!

We ended up with this pattern.


CHOSEN IDENTITY

#67267C

#8731A0

#CB3887

#EBEBEB

Carrion

Creating. Connecting. Collaborating


ICONS - SKETCHES


ICONS - SKETCHES - MOODBOARDS


ICONS - SKETCHES - FINALIZE


ICONS - SKETCHES - FINALIZE

Team

Public Art Collaborating

Home

Drawings

Showcase

Draw

Make

Profile

Sounds

Sound

Portfolio

Writtings

Write

Notification

Drum

Guitar

Cello

User’s Space

Download

Completed

Add New

Continue

Upload

Search

Express your self Creating

Share

Unfinshed

Draft

Rotate

Pause

Resize

Saturation

Play

Trumpet

Organ

See evolution Undo

Add to My favourite

Favourite/ Like

Print

Cut

Italic

Connecting

Opacity

Crop

Color

Bold

Redo

Gallery

Clear all

Take a photo

Filter

Eraser

Fade in

Spell Check

Fade out

Comment

Record

Brightness

Pitch

Concept

Exit

Invite friends

Contrast

Speed


MOCKUPS - WIREFRAMES - SKETCHES MOCKUPS - WIREFRAMES - SKETCHES


MOCKUPS - WIREFRAMES - PHASE 1 Sign up

<

logo

logo

logo

Drawing logo

Slogan Slogan Slogan

logo

x

Name bla bla

Slogan Slogan Slogan

<

Drawing

<

Slogan Slogan Slogan Slogan Slogan Slogan

logo

Slogan Slogan Slogan Slogan Slogan Slogan

>

>

swipe >

swipe

>

swipe >

>

Email

Email

>

>

Password

Sign up

Log in / Sign up Log in

Sign up

fdah dhfa jd faj jdfa d fdj dfa ljdk a dfasdj f fdah dhfa jd faj jdfa d fdj dfa ljdk a dfasdj f fdah dhfa jd faj jdfa d fdj dfa ljdk a dfasdj f fdah dhfa jd faj jdfa d fdj dfa ljdk a dfasdj f

Email Password

Sign in

Bla bla bla Bla bla bla

Sign up

Doesn’t have an account? Sign up

Home

123 Like

Bla bla bla Bla bla bla

Log in

123 Like

Birthday

Gender

Log in

Sound

x

Name bla bla bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla

Animals

Like

+

Bla bla bla Bla bla bla

Leave a comment

A 1

3

A

C 4

5

1

3

+

A

C 4

5

1

3

+

Things

Well Done!!

B 2

Like

Leave a comment

Well Done!!

B 2

Like

A

C 4

5

1

B 2

>

123 Likes

Bla bla bla Bla bla bla

Leave a comment

Well Done!!

B 2

Bla bla bla Bla bla bla

Like

Leave a comment

Well Done!!

123 Likes

Human

Approximate actual size

Approximate actual size

Bla bla bla Bla bla bla

123

>

1:00

+ _ 123 Likes

Drawing

x

0:00

3

C 4

5

: Showcase : Make : Profile : Portfolio : Favourite

A B C

: Draw : Sound : Write

Showcase/Drawing/Sound/Write iPhone 5

Sign up

Log in

1

B 2

3

>

Sign up

Human

>

Things

>

Random

>

XXX

>

Animal

Human

Human

Things

Things

A

4

5

1

B 2

3

A

C 4

5

1

B

Random

Random

XXX

XXX

2

3

4

5

1

1 2 3 4 5

: Showcase : Make : Profile : Portfolio : Favourite

A B C

: Draw : Sound : Write

x

>

> bla bla bla

From library

A

C

Drawing

bla bla bla

> C

Drawing S&Sh

Animal

>

Random A

Animal

Drawing

B 2

3

C 4

5

Showcase/Categoties + specific iPhone 5

>

+ bla bla bla

A 1

B 2

3

6

C 4

Drawing 1 2 3 4 5

Male/Female/Other

iPhone 5

Categories

Name bla bla

Gender

iPhone 5

Approximate actual size

x

Name bla bla

dd/mm/yyyy

>

x

Name bla bla

Birthday

Log in / Sign up

iPhone 5

Write

Log in

Male

Sign up

Home

Drawing

Confirm password

Sign up

Click this

Drawing

Password

Slogan

Remember me

dd/mm/yyyy

Sign up

Sign up

Home

Slogan Slogan

Confirm password Approximate actual size

Approximate actual size

Approximate actual size

Log in/

Slogan

Password

Password

Slogan

Email

Email

Slogan Slogan

Remember me

Confirm password

Log in

Name

Slogan Slogan

Email

Password

Password

logo

logo

Name

Email

Slogan Slogan Slogan

logo

logo

Name Slogan Slogan Slogan Slogan Slogan Slogan

<

logo

x

Name bla bla

<

1 2 3 4 5

: Showcase : Make : Profile : Portfolio : Favourite

A B C

: Draw : Sound : Write

5

1

7 2

8

9 3

10 4

11 5

12

13

14

15

16

17

18

1

2

3

4

5

Make new > upload

Choose the paint (6)> color (14)

6 7 8 9 10 11 12 13

14 15 16 17 18

: Paint : Brush : Undo : Redo : Clear : Erase : Edit : Convert to Vector

1

2

3

4

5

Continue

: Color : Opacity :Texture :Undo : Redo

Make/Drawing

iPhone 5


MOCKUPS - WIREFRAMES - PHASE 2 <

logo

Drawing logo

x

Name MONSTER

Slogan Slogan Slogan

x

Name MONSTER

Write

Sound

Sound

Drawing

x

Name THE BEAT

x

Name THE BEAT

<

Sound

x

Name BETRAYAL

x

Name THE BETRAYAL

Email swipe >

0:00

1:00

Art Work’sname Author name Author name Date

>

Sign in

Author Name Author Name

Sign up

Doesn’t have an account? Sign up

123

Author Name Author Name

123

123 123 123

123 123 123

Author Name Author Name

123

Author Name Author Name

123

Author Name Author Name

123

Author Name Author Name

123

Showcase/Sound/Write

<

Drawing

Animal

>

Human

>

Things

>

Random

>

XXX

>

<

Drawing

Approximate actual size

1

B 2

A

C 3

1

B 2

S1 1 2 3

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

x

Name MONSTER

<

Drawing Name MONSTER

x

<

Drawing

x

Name MONSTER

<

Drawing

F 2

Author Name

Address Author Job Phone no

Gender Birthday

G

D

3

1

E

x

Name MONSTER

1

B

Bla bla bla Bla bla bla

+

Author Name Author Name

1

B 2

C 3

123

1:00

Like

2

Click on the comment button

S3

Showcase/Drawing/Sound/Write iPhone 5

123

Go to profile

1

1 2 3

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

Art Work’sname Author name Author name Date

Art Work’sname Author name Author name Date

Art Work’sname Author name Author name Date

3

1

2

Click on the branch button

3

1

B 2

C 3

x

123

+

A

C

Same as S1,S2,S3,S4,S5

1

2

3

Search name of author

3

<

1

B

+

I

Author Name

See Name friend list Author

Email

Email

Log out

H

2

Same as S1,S2,S3,S4,S5

3

H

Address

Author Job

Author Job

Author Website

Author Website

Phone no

Phone no

Gender

Gender

Birthday

Birthday

D

C

Profile

I

Address

Author Name

2

3

Profile

bla bla bla bla bla bla bla bla bla bla bla bla

Author Name

1

Click on the user name

S4

bla bla bla bla bla bla bla bla bla bla bla bla

Author Name

B

2

<

Name BETRAYAL

Author Name

A

1

Search name of artwork

+ _

Office: dfa HMC Email: nghe@rmit.edu.vn

Love it <3

3

Write

x

Phone: 12345567709

A

Click on the picture

Art Work’sname Author name Author name Date

G

2

<

Name THE BEAT

x

Name MONSTER

123 123 123

S2

Author name Go to profile

iPhone 5

Name JACK

Good Job, I like it 123

I Art Work’sname Author name Author name Date

Profile

Sound

Address: TPHMC

A 3

: Draw : Sound : Write :Profile :Completed :Unfinished :Draft : Edit (appear when hover) : Account setting

0:00

C

2

A B C D E F G H I

Leave a comment

Art Work’sname Author name Author name Date

A

: Showcase : Make : Portfolio

<

F

Press H (Edit inf )

1 2 3

Drawing

Well Done!!

C 3

<

Drawing

Art Work’sname Author name Author name Date

Art Work’sname Author name Author name Date

A

iPhone 5

Approximate actual size

<

Search

I

Press E, F or G

iPhone 5

Showcase

E

1

Sign up

Home

<

D

Approximate actual size

Home

123 123 123

Art Work’sname Author name Author name Date

Approximate actual size

Password

Approximate actual size

Approximate actual size

Email

Profile

Author Website

Confirm password Term of use faj jdfa d Term of use Term of Term of use Term of use Term of use Term Term of use Term of use Term of use Term Term of use Term of use Term of use Term

<

Profile

Email

bla bla bla bla bla bla bla bla bla bla bla bla

+ _

Password

<

Profile

Art Work’sname Author name Author name Date

Name bla bla bla bla bla bla bla bla bla bla bla bla

<

Completed

1

E

F 2

G

D

3

1

E

Profile

F 2

G 3

press

S5

Showcase/Drawing/Sound/Write iPhone 5

1 2 3

: Showcase : Make : Portfolio

A B C D E F G H I

: Draw : Sound : Write :Profile :Completed :Unfinished :Draft : Edit (appear when hover) : Account setting

Showcase/Drawing/Sound/Write iPhone 5


MOCKUPS - WIREFRAMES - PHASE 2 (cont) <

logo

Drawing logo

logo

x

Name MONSTER Kid

Slogan Slogan Slogan

Sound

Drawing

logo

Slogan Slogan Slogan

<

x

Name MONSTER

Slogan Slogan Slogan

Writing

Sound

logo Name THE BEAT Chick

<

x

Slogan Slogan Slogan

logo Name THE BEAT

x

Slogan Slogan Slogan

swipe >

0:00

+ _

x

Slogan Slogan Slogan

>

Password

Password

Author NameSign - dd/mm/yy in

1. Author Name - dd/mm/yy Sign in 2. Author Name - dd/mm/yy

Sign up

Doesn’t have an account? Sign up

There are 45 versions unfinished.

Doesn’t have an account? Sign up

Doesn’t have an account? Sign up

Home

Sign up

Limited Showcase

Email

123

Email

Email

Password

Password

There are 45 versions unfinished.

Password

Author Name Sign - dd/mm/yy in

1. Author Name - dd/mm/yy Sign in 2. Author Name dd/mm/yy Doesn’t have an account? Sign up

Email

123

There are 45 versions unfinished. Password

Author Name - dd/mm/yy Sign in

1. Author Name - dd/mm/yy Sign in 2. Author Name dd/mm/yy Doesn’t have an account? Sign up

Doesn’t have an account? Sign up

Doesn’t have an account? Sign up

<

Limited Showcase

<

Write

Save

<

Write

Save

Story: Words limit - 100 words

Poem: Words limit - 70 words

1

r

s

u

t

2

3

o 1

1st page of Write

p

q

r 2

s

u

t 3

Story

o 1

p

q

r

s

2

Poem

u

t 3

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

o: p: w: r: s: t: u:

Copy Paste Eraser Bold Italic Underline Eraser

<

Draw

Save

Random

>

Weird things

>

C A

1

2

1 2 3

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

B

1

3

A

C

2

3

B

1

a

C

2

3

c

b 1

e

d

<

Draw

3

Draw

Make

a: Brush b: Paint c: Eraser d: Filter e: Rotate f: Crop g: Color

iPhone 5

<

Draw

<

Draw

Draw

Save

Save

g

f

2

Choose a work to continue in specific Category

Continue - Choose a Category

<

Draw

Save

o 1

p

q

r

s

2

Size:

Draw

Save

Color:

Upload from library

u

t

Name:

Name:

Keep changes

How many pieces:

How many pieces:

Cancel changes

Category:

3

a

c

b

2

1

Press Save

d

e

f

g

3

Make - Write iPhone 5

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

b 1

c

d 2

e

f

g

3

After taking picture/ choosing image from library

Press

1 2 3

a

Cancel

a: Brush b: Paint c: Eraser d: Filter e: Rotate f: Crop g: Color

a

b 1

c

d

e

2

Draw on iPhone

f 3

g o

p

q

r

s

u

t

Press a/b/c..../g o --> u are effect options in a/b/c..../g

Make - Draw iPhone 5

OK

p

Print

f

Draft

Download

t

Print

f

Share

Draft

t

Cancel a

o

Category:

Download Share

Convert to vector /

<double tab and drag to choose words/ paragraphs>

1 2 3

<

Draw

Save

Approximate actual size

Approximate actual size

q

<

Bacon ipsum dolor sit amet short loin fatback tail andouille tongue meatloaf kevin, pork belly Name: drumstick leberkas. Cow meatloaf many pieces: chuckHow prosciutto beef ribs rump. ShankCategory: tenderloin corned beef shortDownload ribs spare ribs shoulder. Print Draft Pastrami jerky bresaola short ribs f t w Share tail capicola biltong meatball shankle.

Poem

p

Nature

> >

Story: Words limit - 100 words

Story

o

Human

Save

iPhone 5

Write

Save

B

1st page of Make Show some recent works to continue instantly

iPhone 5

Write

A

Press

Press

Press

Home <

>

Draw

Chose a type of work:

Approximate actual size

123

Email

Approximate actual size

Email

Approximate actual size

Approximate actual size

Sign in

Animal

<

Random

CONTINUE

Term of use Term of use Term of use Term Term of use Term of use Term of use Term Term of use Term of use Term of use Term Term of use Term of use Term of use Term

Password

<

Continue

NEW

Confirm password Email

<

Make

Bacon ipsum dolor sit amet beef ribs turkey short loin, pork loin boudin leberkas pig. Short ribs corned beef short loin chuck. Capicola doner tongue chicken corned beef biltong pork belly pork chop sausage prosciutto jerky sirloin pastrami

1:00

Password

<

logo Name BETRAYAL

<

x

Slogan Slogan Slogan

Name Email

Writing

logo Name BETRAYAL Pig

q

r

s

t

u

Press “o” <for example , o is a type of brush>

1 2 3

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

a: Brush b: Paint c: Eraser d: Filter e: Rotate f: Crop g: Color

b 1

c

d 2

Press “Save”

e

f 3

g

a

b 1

c

d

e

2

g

f 3

Typing

o

p

q

r

s

u

t

Go to other page without choosing X / V

Make- Draw(cont) iPhone 5


MOCKUPS - WIREFRAMES WIREFRAME --PHASE PHASE33 <

Draw

<

Sound

Save

Save

<

Sound

Save

<

Sound

Save

0s

0s

Print

f

Share

Draft

t

0s

0s

OK

e

d 2

1

f

g

3

a

b

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

<

Draw a: Brush b: Paint c: Eraser d: Filter e: Rotate f: Crop g: Color

3

Approximate actual size

E

1

F 2

Press E, F or G

1 2 3

: Showcase : Make : Portfolio

A B C D E F G H I

: Draw : Sound : Write :Profile :Completed :Unfinished :Draft : Edit (appear when hover) : Account setting

G 3

b

c

e

d 2

1

f

g

3

a

b

c 2

1

Make Sound on iPhone <Play and stop by tapping the staff>

e

d

g

f 3

a

c

b

1

d

e

f

2

Press a <choosing instrument>

<

A B C

: Draw : Sound : Write

a

c

b

Record d

1

e

f

2

g

3

After recording/ uploading <swipe left & right to hear different part of the sound in 8s, Tap in the wave to stop playing> a: Instruments b: Fade in - Fade out c: Pitch d: Normalize e: Random Sound f: Speed g: Eraser

a

b

c

d

e

2

1

f

g

3

a

b

c

d

e

2

1

Edit sound <add effect to sound where the pointer is at - double tab and drag to select a part >

g

f 3

<

<

Showcase

<

Drawing

Author name dd/mm/yy ........

WOLF Author name dd/mm/yy ........

Animal

>

Human Nature

> >

Name Author name dd/mm/yy ........

Name Author name dd/mm/yy ........

TEEN Wolf Author name dd/mm/yy ........

Random

>

Weird things

>

Name Author name dd/mm/yy ........

WOLF Fly Author name dd/mm/yy ........

123

F 2

Press the image

G 3

D 1

E

F 2

G 3

Search name of artwork

<

Drawing

1

E

F 2

G 3

1

B 2

A

C 3

1st page of Showcase

Result Page

Portfolio (cont) + Search iPhone 5

1 2 3

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

1

B 2

Categories

F 2

1 2 3

: Showcase : Make : Portfolio

A B C D E F G H I

: Draw : Sound : Write :Profile :Completed :Unfinished :Draft : Edit (appear when hover) : Account setting

< x

Name MONSTER Kid

D

G

E

1

3

F 2

Contacts: Facebook: Website: abcdef.com Phone: 1234567890 Gender: Male Birthday: dd/mm/yy More info. More info. More info. D

3

Private

Author Name Email: abcdef@gmail.com

G

E

1

F

Profile

Author Name Email:Show in Carrion Sign out abcdef@gmail.com Contacts: H Facebook/ Twitter: abcdef Website: abcdef.com Phone: 1234567890 Gender: Male Birthday: dd/mm/yy More info. More info. More info.

G

2

D

3

E

1

F

G

2

H

Press

H I

Public

Press

3

I

Portfolio iPhone 5

<

Drawing

x

Name MONSTER Kid

x

Drawing

<

x

This Name is weird!MONSTER Kid

x

Drawing

<

Drawing

x

Name MONSTER Kid

x

Name MONSTER

Author Name Contact: Facebook Twitter Website

Name I think so too! Name

Email: abcd@gmail.com More info. More info. More info. More info. More info. More info.

123

+

1. Author Name - dd/mm/yy 2. Author Name - dd/mm/yy A

1

Drawing

123

D

E

1st page of Portfolio Showing all the latest works by users

iPhone 5

Wolf

D

Press Save

Make-Sound (cont)

Search Wolf Name Author name dd/mm/yy ........

Name + Author name 1. Author Name - dd/mm/yy dd/mm/yy 2. Author Name - dd/mm/yy ........ E

<

Completed

x

Name MONSTER Kid Name

1

: Showcase : Make : Portfolio

Upload

Contacts: H Facebook: abcdef Website: abcdef.com Phone: 1234567890 Gender: Male Birthday: dd/mm/yy More info. More info. More info.

t

iPhone 5

Completed

D

1 2 3

g

3

Press

Make - Draw(cont) & Sound

a: Instruments b: Fade in - Fade out c: Pitch d: Normalize e: Random Sound f: Speed g: Eraser

Name Author name dd/mm/yy ........

D

a

Ok

Sound

Name Author name dd/mm/yy ........

Name Author name dd/mm/yy ........

g

f

Go to other page without saving

<

Completed

e

d 2

1

Press Save in Continue option 1 2 3

c

Cancel

Profile

I

Author Name Email: abcdef@gmail.com

Draft

f

Share

- +

Approximate actual size

Approximate actual size

t

Approximate actual size

f

Download

Upload from Phone

Draft

<

Profile

I

Name: Category:

Don’t save

c

8s

How many pieces:

Print

<

Profile

- +

0s

How many pieces:

Share

b

- +

0s

<

Portfolio

Save

Name:

Download

<

Sound

Save

Take 8 seconds

0s

Category:

a

<

Sound

Save

Save

Do you want to save? Download

<

Sound

Approximate actual size

<

Draw

Approximate actual size

<

A

C 3

1

B 2

A

C 3

Showcase in Category

1

B 2

C 3

1. Author Name - dd/mm/yy 2. Author Name - dd/mm/yy A 1

A work

2

A Work in full-screen view

Showcase iPhone 5

1 2 3

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

3

B

1

2

Press

123

+

+

See Portfolio

There are 45 versions unfinished.

1. Author Name - dd/mm/yy 2. Author Name - dd/mm/yy C

A 3

1

B

Author Name - dd/mm/yy A

C

2

3

B

1

Press Author Name

2

C 3

Press

Showcase- Pressing buttons iPhone 5


MOCKUPS - WIREFRAMES PHASE44 WIREFRAME --PHASE


MOCKUPS PHASE44(Cont) (cont) MOCKUPS -- WIREFRAMES WIREFRAME --PHASE Sound

Writing

Sound

<

x

Slogan Slogan Slogan

0:00

logo Name THE BEAT

x

Slogan Slogan Slogan

Writing

logo Name BETRAYAL Pig

<

x

Slogan Slogan Slogan

<

logo

logo Name BETRAYAL

x

+ _

Drawing logo

logo

x

Name MONSTER Kid

Slogan Slogan Slogan

Slogan Slogan Slogan

Slogan Slogan Slogan

<

x

Name MONSTER

Slogan Slogan Slogan

Name

Bacon ipsum dolor sit amet beef ribs turkey short loin, pork loin boudin leberkas pig. Short ribs corned beef short loin chuck. Capicola doner tongue chicken corned beef biltong pork belly pork chop sausage prosciutto jerky sirloin pastrami

1:00

Drawing logo

Email swipe > >

logo Name THE BEAT Chick

Password

Email

123

Email

Email

Password

Password

There are 45 versions unfinished.

Password

Author Name Sign - dd/mm/yy in

1. Author Name - dd/mm/yy Sign in 2. Author Name dd/mm/yy Doesn’t have an account? Sign up

Email

123

There are 45 versions unfinished. Password

Author Name - dd/mm/yy Sign in

1. Author Name - dd/mm/yy Sign in 2. Author Name dd/mm/yy Doesn’t have an account? Sign up

Doesn’t have an account? Sign up

Approximate actual size

Approximate actual size

Confirm password

Doesn’t have an account? Sign up

Password

Sign in

Email

123

Email

There are 45 versions unfinished. Password

Password

Author NameSign - dd/mm/yy in

1. Author Name - dd/mm/yy Sign in 2. Author Name - dd/mm/yy

Sign up

Doesn’t have an account? Sign up

Doesn’t have an account? Sign up

Doesn’t have an account? Sign up

Home

Press

Press

Term of use Term of use Term of use Term Term of use Term of use Term of use Term Term of use Term of use Term of use Term Term of use Term of use Term of use Term

Email

Sign up

Limited Showcase

Limited Showcase

Press

Home iPhone 5

Name Author name dd/mm/yy ........

Approximate actual size

D

E

1

F 2

Press E, F or G

1 2 3

: Showcase : Make : Portfolio

A B C D E F G H I

: Draw : Sound : Write :Profile :Completed :Unfinished :Draft : Edit (appear when hover) : Account setting

G 3

1

<

Author name dd/mm/yy ........

WOLF Author name dd/mm/yy ........

Name Author name dd/mm/yy ........

Name Author name dd/mm/yy ........

TEEN Wolf Author name dd/mm/yy ........

Name Author name dd/mm/yy ........

WOLF Fly Author name dd/mm/yy ........

123

E

Wolf

Search Wolf Name Author name dd/mm/yy ........

Name + Author name 1. Author Name - dd/mm/yy dd/mm/yy 2. Author Name - dd/mm/yy ........ D

<

Completed

x

Name MONSTER Kid Name

Name Author name dd/mm/yy ........

Name Author name dd/mm/yy ........

<

Completed

F 2

Press the image

G 3

D 1

E

F 2

G 3

Search name of artwork

D 1

E

F 2

<

Showcase

<

Drawing

Animal

>

Human Nature

> >

Random

>

Weird things

>

<

Drawing

<

Drawing

x

Name MONSTER Kid

3

1

B 2

A

C 3

1st page of Showcase

Result Page

Portfolio (cont) + Search iPhone 5

1 2 3

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

1

B 2

Categories

<

x

This Name is weird!MONSTER Kid

x

Drawing

<

Drawing

x

Name MONSTER Kid

x

Name MONSTER

Author Name Contact: Facebook Twitter Website

I think so too! Name

Email: abcd@gmail.com More info. More info. More info. More info. More info. More info.

123

+

1. Author Name - dd/mm/yy 2. Author Name - dd/mm/yy A

x

x

Drawing

Name

123

G

<

Drawing Name MONSTER Kid

Approximate actual size

<

Completed

Approximate actual size

<

iPhone 5

A

C 3

1

B 2

A

C 3

Showcase in Category

1

B 2

C 3

1. Author Name - dd/mm/yy 2. Author Name - dd/mm/yy A 1

A work

2

A Work in full-screen view

Showcase iPhone 5

1 2 3

: Showcase : Make : Portfolio

A B C

: Draw : Sound : Write

3

B

1

2

Press

123

+

+

See Portfolio

There are 45 versions unfinished.

1. Author Name - dd/mm/yy 2. Author Name - dd/mm/yy C

A 3

1

B

Author Name - dd/mm/yy A

C

2

3

B

1

Press Author Name

2

C 3

Press

Showcase- Pressing buttons iPhone 5


g in

MOCKUPS - PHASE 1 Draw

Name save

Name save

save

Make

Make

Name save

Animal

Carrion

Draw

Name

Email

How many pieces

Nature

435 192

Random

Sound

789

Weird things

Categories

401

CONTINUE

Upload from librar y

Confirm password

300

Human

NEW

Name

Password

Draw

Write

Email

By signing up, you agree to our Carrion Terms and that you have read our Privacy Policy, including our Cookie Use. You may receive SMS Notifications from Carrion and can opt - out at any time

Password

Log in

Sign up

Doesn’t have an account? Sign up

ccount? Sign up

Name

Name save

Name save

Make

Name save

Sound

Random

Name save

Name save

save

save

Draw Name

Size

I am a prisoner Bryan056 +

Monster

Anglexx + Koker +

How many pieces

Sound

Categories

Color Write

Super Natural

Fakewing + Mamy + Joella +

This is it !!! JillSans +

con 2 nut nomalisation zoi random sound ko thay co icon

choose brush

choose color Name

Name

Name

save

save

save

+ -

8s

0s

+ Drag the sound wave to right or left Upload from librar y

save

+ -

Time limitation: 8s

0s

Name

to choose your 8s. Tap at the wave to play/ stop the sound.

0s

Invite friend(s) Email(s)


MOCKUPS - PHASE 2


MOCKUPS - PHASE 2 (Cont)


MOCKUPS - PHASE 3 (FINAL)


MOCKUPS - PHASE 3 (FINAL)


MOCKUPS - PHASE 3 (FINAL)


FLOWCHART DEMONSTRATION


PROTOTYPE - USER TESTING

1ST uSER TESTING WITH WIREFRAMES

GETTING FEEDBACKS

We had 2 user testing sessions with different user. The 1st time, we used our initial wireframe with intrstuctions provided for the buttons in our application. After this prototyping, we got many useful feedbacks from users to improve our mockups. In the 2nd user Testing, we used our improved mockups to see if the user could navigate better or not. Please check out our prototyping video submitted for the assignment.

2ND uSER TESTING WITH IMPROVED MOCKuPS


PROMOTION PLAN In the Marketing Campaign to introduce Carrion, we will produce 4 videos: 1 Demonstration Video and 3 Promotion Videos with 3 topics: Sharing the Fun, Carry on the art, and Expressing yourself. The 3 Promotion Videos will be released in turn as mentioned; finally the Demonstration Video will be released along with other promotion tools, for example : posters. PROMOTION VIDEOS: The 3 videos represent the 3 core values that Carrion has: Art of the People, Connecting and Expressing yourself. The 3 video will use slices of life of Carrion’s target customers as the main content. We stress on promoting the core values of Carrion. SHARING THE FUN will mainly stress on the connecting value. The plot: A group of friend playing a game in a restaurant, in which each of them has to continue writing a story by only knowing the 3 last words of the previous one. After finish it, they read it together and laugh out loud. The laughter is transferred around the restaurant when they spread the story around, tables to tables, as it goes on, people start to play the game with their friends and others who sit next to them. The clip ends with the line: “Carry on the fun, connecting people.” ; “CARRION. Available on App store 20/1/2013” and the Carrion’s logo appears. CARRY ON THE ART will mainly stress on the collaborative art – “art of the people” value.The plot: A chain of rhythm created by many people: a worker whistles when riding the motorbike, a high-school girl sitting on a Bus catches the last note of the whistle and continue humming, a hippy boy walked pass her to get off the bus and heard the last part of her rhythm so he started beat- boxing from that rhythm while walking on the street, it goes on like that until all the sound is synced together to make a harmony. The clip ends with the line: “Carry on the (sound) (story) (drawing) Art, connecting people.” ; “CARRION. Available on App store 20/1/2013” and the Carrion’s logo appears.

EXPRESSING YOURSELF will stress on the Expressing yourself value, however , it also focus on the other two values. The Plot: A rebellious teenager used her marker to draw on the window of a shop, she got kicked off and the drawing was erased instantly by the shop owner, however, there was still some marks at the end of the drawing that hadn’t been eraserred. A young man walked by the shop and leaned on the window, consequently got the marks inked on the back of his shirt. At the park, where he met his friend, he was noticed about the marks on his shirt. He took off the shirt, put it on the ground and use his marker to draw on the shirt to cover the marks. Accidently he left some strokes on the ground. The other day, a college girl walked by, tired and bored she took out some chalks from her bag and started drawing on the ground. She saw the marks left by the young man so she s continued to draw from it. Then she left, people walked by , some stopped and looked at the drawing then left, the drawing quickly faded away followed all the footsteps passed by it. The 3 drawers accidentally passed by each other as this line appears on the screen: “We express ours elf in our own way.”. Camera closed up on the 3 works as this line showed up: “ Sometime, we carry on others’ works without notice”. The 3 works joint into one –“ Art is made not by one but many” . The art work faded away - “only that they can’t meet each other”. Then Carrion logo appears – “ Carrion creates changes to express yourself, to connect and carry on the art of the people” ; “CARRION. Creating. Connecting. Collaborating”; “Available on App Store 20/1/2013”. DEMONSTRATION VIDEO: The video is created purely by graphics and effects, no shooting required. This video presents the 3 core values of Carrion by typography effects, then goes on to demonstrate how to use the app by showing the app on the iPhone which is controlled by a graphic hand, instructions also appear next to the iPhone.


PROMOTION PLAN (Cont) OTHER PROMOTION TOOLS MIGHT INCLuDE: POSTER, T-SHIRT, GAMES BOOTH. The Game Booths are set up for user to try the app both by iPhone and by hand physically – using the old Exquisite Corpse game for drawings and writings. POSTER (S): Making two to three posters to promote for each main features of Carrion - Draw, Write and Sound. For “Draw” promotion poster, we used a beautiful drawing by the users to make the poster. The Poster will have Carrion name and the icon represents for Drawings, the rest of the poster is for showing the drawings. We also fold the drawings into each pieces of it so the viewer can explore the drawing routine by themselves. On the back of the poster is blank paper with Carrion’s logo an dashed lines that separate the paper in different parts. This is where the viewer can use to play the Exquisite Corpse Game with their friends. (See Poster 1). By this poster, we believe it will help the viewer understand how to use Carrion easier and at the same time - promote for the application effectively with interesting game. For “Write” Promotion Poster, we take an excerpt of the writing made by Carrion’s users, which is weird and funny. Viewer came across this poster will be hooked by the weir and funny narrative and would be possibly want to figure out what Carrion is. (see Poster 2). In small version, the back of the Poster is also blank with dashlines for the viewer to play exquisite corspe game, there will be some instructions for them print on this back to. FOR FuTuRE MARKETING: Event: Organize event to make an art work by as many contributors as possible – breaking some record. Contest: Organize contests on Carrion to encourage user to create more art works and better art works as well as invite their friends to use the app.

POSTER 1

POSTER 2


WEBSITE - MOODBOARD


WEBSITE - WIREFRAMES EVOLUTION


WEBSITE - WIREFRAMES EVOLUTION


WEBSITE - MOCKUPS


WEBSITE - MOCKUPS


WEBSITE - MOCKUPS


WEBSITE - MOCKUPS


WEBSITE - MOCKUPS


WEBSITE - MOCKUPS


WEBSITE - MOCKUPS


WEBSITE - CODING


WEBSITE - CODING PROBLEM The navigation buttons aren’t responsive when resizing screen’s size

For some unknown reasons, these buttons only work when scrolling the page up a little bit


WEBSITE - CODING PROBLEM

Same problem with buttons - only work when scrolling the page up a little bit


WEBSITE - CODING PROBLEM

There are suppose to be iPhones displayed in this empty area, yet, depends on the screen resolutions, there might be enough/ not enough space to place the iPhones in. If viewed by a Mac then the interface will looks exactly likes the mockups but in ofther computers it will mess up.


POSTER - WIREFRAMES EXPLORATIONS User’s Portrait

Logo

Icons

Home page

Portfolio

Draw

Sound

Write

Profile

Setting

Notification

Search bar

Favorite

User’s Portrait

Color scheme

ABCDEFGHIJKLMNOP QRSTUVWXYZ Myriad Pro

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem

ABCDEFGHIJKLMNOP QRSTUVWXYZ

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem

Myriad Pro

ABCDEFGHIJKLMNOP QRSTUVWXYZ Myriad Pro

Style guide

Logo

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,

Color scheme

ABCDEFGHIJKLMNOP QRSTUVWXYZ

Carrion

Myriad Pro

ABCDEFGHIJKLMNOP QRSTUVWXYZ Myriad Pro

Slogan: Merry christmas

How to use?

Slogan: Merry christmas

Flowchart

Style guide Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem

Carrion

Icons

Home page

Portfolio

Draw

Sound

Write

Profile

Setting

Notification

Search bar

Favorite

ABCDEFGHIJKLMNOP QRSTUVWXYZ Myriad Pro

Flowchart

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,

How to use


POSTER - MOCKUPS

PERSONAS

WHAT IS CARRION ? CARRION is a social network application for iPhone – a flat form for creating collaborative art works across the globe. This is where the user continues a work made by another user and vice versa - has their works continued by others.

STYLE GUIDE

Carina Beese 22 years old, American, Lives in California Fine Art Student Loves Jazz & drawing

In CARRION, users express themselves through art, whether by drawings, making sounds or writing writings.

CARRION’s user can stand out as a unique individual while also connects with other users to together create a public artwork.

#67267c

#8731a0

#cb3778

#ebebeb

Levenim MT: used for title - Carrion Bariol Regular:

used for text

a b c d e f g h i j k l m n o p q r s t u v w x y z

HOW DOES IT WORK?

0 1 2 3 4 5 6 78 9

In CARRION, a work is made by different contributors,the later one carries on the previous one’s work where it is left off, without knowing the content of the previous part.

1 problem that we have when designing the poster was we couldn’t measure the size of the font. We didn’t know which size was big enough to see in an A2 size poster so we just chosed the font size that we “felt” like it is readable, and afraid that if we size it down it might be too small. As a result, when the poster was printed, we found out that we could have size down the font a little bit too leave more white space for the design. We did think about reduce the content of the poster, however, since our application is quite hard to understand if there is no clear instruction and explaination. Therefore, we remain the content instead.

Carina has a sketch book of all of her drawings, lots of which she hasn’t finished yet. Her friend recommended her to use Carrion. Carina shared her unfinished works on Carrion and got many others continued drawing her sketches. Some of which she liked very much, some she didn’t like. But above all, Carina enjoyed this experience, from whi she got lots of inspirations for her fine-art which projects. She will continue to use this app.

Chris Wata 18 years old, Japanese. Lives in Tokyo, Japan. Guitarist for his band Loves playing Harmonica Chris needed to write a new song for his band. He did not have any rhythms or words to start with. Therefore, he searched the Internet for inspiration and came across Carrion. Chris found an excerpt of sound that he liked very much. He recorded himself playing the harmonica to continue the sound chain and shared it on Carrion. Thanked to whi which, Chris now had the rhythm for his song and was waiting to hear the result of the sound chain he made with other artists in Carrion.

The App allows many users to work on the same piece at the same time. As a result, from the 1st piece, many works will be produced.

Creating. Connecting. Collaborating.

FEATURES

FLOW CHART ICONS

Users can make drawings; sounds and writings with many supporting tools that help them refine their creations as well as enhance the creating experiences. User can also recording/taking photo of their works and upload them on Carrion. Ca Carrion allows user to post their works on other social networks or invite friends to continue unfinished works. Users can also print/ download works that they like. User will be notified if there are any interactions with their works by other users. ( Ex: Comment Comment, Work is completed, etc.)


PROMOTION VIDEO - STORYBOARD


PROMOTION VIDEO - SHOOTING


PROMOTION VIDEO - POST PRODUCTION

We made the videos by Adobe Premier Pro and After Effect. The biggest problem we found were colouring for all the frame to make them have the same kind of light and mood that we wanted.


DEMOSTRATION VIDEO - STORYBOARD


DEMOSTRATION VIDEO - MAKING DEMONSTRATION VIDEO - MAKING with After Effect

YOUTUBE LINKS TO VIDEOS https://www.youtube.com/channel/UCHNVccYm9caZkkCv8DXjwng


FIXING & FINALIZING On Octerber 2014 , Live team decided to take a look back at Carrion and tried to improve the app and fix all existing problems that we found in the project. Which include : - Fixing All Mock-ups to be more user-friendly and more consistent in desgin - Add a new features on Carrion - which is making drawings by continuing famous artist’s works (ex: The Scream, Girl with Pearl Earing, etc) - Making a web-based Prototype for Carrion Application : http://invis.io/UZ1F5HG8M - Fixing and changing the Demonstration Video upside down to be more interesting and informative. We also made a Youtube channel for Carrion , which has our Promotion Vieo, Demonstration Video and Process Video (the making of Carrion): https://www.youtube.com/channel/UCHNVccYm9caZkkCv8DXjwng - Fixing the Info Poster - Making new NameCard for Carrion - Fixing and Making more teaser Posters - Fixing the Flowchart-Mockups - Fixing the WEBSITE with an enormous help from a new memberWeb Developer : Pham Ngoc Thach


Prototype

for Carrion:

http://invis.io/UZ1F5HG8M

VIDEOS:

https://www.youtube.com/channel/UCHNVccYm9caZkkCv8DXjwng


FIXED & improved info-poster

PERSONAS

WHAT IS CARRION ? CARRION is a social network application for iPhone – a platform for creating collaborative art works. This is where the user continues a work made by another user and vice versa - has their works continued by others.

STYLE GUIDE

Carina Beese 22 years old, American, Lives in California Fine Art Student Loves Jazz & drawing

In CARRION, users express themselves through art, whether by drawings, making sounds or writing writings.

CARRION’s user can stand out as a unique individual while also connects with other users to together create a public artwork.

#67267c

#8731a0

#cb3778

#ebebeb

Levenim MT: used for title - Carrion Bariol Regular:

used for text

a b c d e f g h i j k l m n o p q r s t u v w x y z

Carrion Namecard

HOW DOES IT WORK?

Carina has a sketch book of all of her drawings, lots of which she hasn’t finished yet. Her friend recommended her to use Carrion. Carina shared her unfinished works on Carrion and got many others continued drawing her sketches. Some of which she liked very much, some she didn’t like. But above all, Carina enjoyed this experience, from whi which she got lots of inspirations for her fine-art projects. She will continue to use this app.

0 1 2 3 4 5 6 78 9

In CARRION, a work is made by many creators ,the later one carries on the previous one’s work where it is left off, without knowing the content of the previous part.

Chris Wata 18 years old, Japanese. Lives in Tokyo, Japan. Guitarist for his band Loves playing Harmonica Chris needed to write a new song for his band. He did not have any rhythms or lyrics to start with. Therefore, he searched the Internet for inspiration and came across Carrion. In which, Chris found an excerpt of sound that he liked very much. He recorded himself playing the harmonica to continue the sound chain and shared it on Carrion. Thanked to which, Chris now had the rhythm for his song and was waiting to hear the result of the sound chain he made with other artists in Carrion.

The App allows many users to work on the same piece at the same time. As a result, from the 1st piece, many works will be produced.

Creating. Connecting. Collaborating.

FEATURES

FLOW CHART

ICONS

Users can make drawings, sounds and writings with many supporting tools that help them refine their creations as well as enhance the creating experiences. User can also record sound/take photo of their works and upload them on Carrion. Ca Carrion allows user to invite friends from other social networks to continue unfinished works. Users can also print/ download works that they like. User will be notified if there are any interactions with their works by other users. ( Ex: Comment Comment, Work is completed, etc.)


TEASER POSTERS

Carrion

Carrion

Carrion carrion-app.appspot.com Available on Appstore soon!

Carrion

Carrion


User’s Space > Porfolio

Loading page

User’s Space

User’s Space > Profile

User’s Space > Porfolio > Unfinished

Tap

{Setting}

Tap on an unfinshed work

Showcase (New Notification)

Tap

{Evolution Tree}

User’s Space (New Notification)

Tap

inviite friends

User’s Space > Notification

Tap

{Exit}

FLOWCHART & MOCKUPS

FLOWCHART

Search

& MOCKUPS Showcase

Showcase > Drawings

Showcase > Drawings > Random

Tap at a work

Tap

Tap at the Author’s name

{Comment}

Tap

{Evolution Tree}

Tap

share with friends

Tap

{Exit}

Log-in

“Creating . Connecting. Collaborating.”

Make

Make > New

Make > New > Draw - Fill in information

Make > New > Draw

Tap

{Upload}

Chosing a work in iPhone’s gallery

Drawing with pencil

Tap {Brush} choose a part to edit

Tap {A Brush Style}

Tap

{Color}

Sign-up carrion-app.appspot.com Try Prototype on: http://invis.io/FT1FJNU9Y

Make > New > Write

Make > New > Write - Fill in information

Make > New > Write > Story

Make > New > Sound

Tap

Tap Save

Tap Save

Make > Continue

Tap at a work > continue drawing

Make > Continue > Draw > Random

Make > Continue > Draw

Make > New > Sound - Fill in information

{instrument}

Tap

{Upload}

Choose 8s from the uploaded sound.

Editing uploaded sound

Tap Save

Waiting to share

After Saving/ Sharing

Tap

{Back}


FIXED WEBSITE Hopefully, we are able to get it on carrion-app.appspot.com.


REFERENCES Kos-Red j, 2013, ‘Shen Chanjuan’, image, Flickr, 21 April, viewed 29 December, http:// www.flickr.com/photos/jonathankosread/8639974277/in/faves-timgallo/ Leuthhard T, 2011, ‘Candid & Windy’, , image, Flickr, 16 May, viewed 29 December, http://www.flickr.com/photos/thomasleuthard/5779782073/ McConnochie P,2013,‘Maddie’,image,Flickr,16 November,viewed 29 December, https:// www.flickr.com/photos/dougliz/10980882535/in/pool-100strangers%7Cdougliz Samoilov y, 2009, ‘Portrait of a Man’, image, Flickr, 27 February, viewed 29 December, http://www.flickr.com/photos/yuri_samoilov/9965420034/ Scoble R, 2009, ‘Precious Moloi-Motsepe heads the Mosepe Family Foundation in South Africa’, image, Flickr, 31 january, viewed 29 December, http://www.flickr.com/ photos/scobleizer/3252998944/ Viero M D, 2013, ‘Marjorie joy Model Management’, image, Flickr, 27 March, viewed 29 December, <http://www.flickr.com/photos/danielviero/8613970710/> Wong Z 2011, ‘Makeupida Andrew Stetson’, image, Flickr, 22 February, viewed 29 December, http://www.flickr.com/photos/zingwong/5468221952/ Sounddogs, n.d, ‘Black Hole. Dark, Anxious Piano Arpeggios With Cymbal Swells. Robert Bruce. Socan. Audio Network us Inc. Ascap.’, Sounddogs.com, reviewed 28 December 2013, http://sounddogs.com/production-music/3676/mp3/474467_ SOuNDDOGS__to.mp3 Sounddogs, n.d, ‘Park (in town) ambience: birds, road noise in background #1’, Sounddogs.com, reviewed 28 December 2013, http://www.sounddogs.com/sound-effects/2872/mp3/959915_SOuNDDOGS__pa.mp3

Sounddogs, 2007, ‘Production Music - Happy Everyday, happy, cheerful, celebrate’, Sounddogs.com, reviewed 26 December 2013, http://www.sounddogs.com/production-music/3692/ mp3/550501_SOuNDDOGS__ha.mp3 Sounddogs, 2004, ‘Production Music - Change the World - Feel good’, Sounddogs.com, reviewed 26 December 2013,http://www.sounddogs.com/production-music/8/mp3/336820_SOuNDDOGS__ch.mp3 Sounddogs, 2008, ‘Production Music - Cloud Nine - A cute and sweet pop’, Sounddogs.com, reviewed 26 December 2013, http://www.sounddogs.com/production-music/3692/mp3/550501_ SOuNDDOGS__ha.mp3 Sounddogs, 2008, ‘Half Light 5 (20). Melancholy, spacious ambience with oboe melody. 20 second mix of Half Light. Matt Hill. PRS. Audio Network uS Inc. ASCAP’, Sounddogs.com reviewed 28 December 2013, http://www.sounddogs.com/production-music/23/mp3/215815_SOuNDDOGS__ha.mp3 Sounddogs, 2008, ‘Half Light. Melancholy, spacious ambience with oboe melody, leading to percussion and bass. Matt Hill. PRS. Audio Network uS Inc. ASCAP’, Sounddogs.com, reviewed 28 December 2013, http://www.sounddogs.com/sound-effects/23/mp3/215777_SOuNDDOGS__ ha.mp3 Sounddogs, n.d, ‘Playground Remix -60sA - Pop - Contemporary.’, Sounddogs.com, reviewed 28 December 2013, http://sounddogs.com/production-music/3988/mp3/543181_SOuNDDOGS__pl.mp3 Sounddogs, n.d, ‘Tin Soldiers 2. Anxious, unfolding Drama Featuring Pizzicato Strings & Marimba. No Drums. Gareth johnson. Prs. Audio Network us Inc. Ascap.’, Sounddogs.com, reviewed 28 December 2013, http://www.sounddogs.com/sound-effects/23/mp3/1044851_SOuNDDOGS__ ti.mp3 Sounddogs, n.d, ‘Three In One. Bright, up beat piano led Indie pop. Richard Lacy. PRS. Terl Bryant, PRS. Barrie Gledden. PRS. Audio Network uS Inc. ASCAP.’, Sounddogs.com, reviewed 28 December 2013, http://www.sounddogs.com/production-music/23/mp3/476423_SOuNDDOGS__ th.mp3



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.