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
Save
4’th Level 4th Level
Share
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
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
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 >
>
>
>
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â&#x20AC;&#x2122;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
Slogan Slogan
Remember me
Confirm password
Log in
Name
Slogan Slogan
Password
Password
logo
logo
Name
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
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
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
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
123
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
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
f
Draft
Download
t
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
Approximate actual size
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
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â&#x20AC;&#x2122;t save
c
8s
How many pieces:
<
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
123
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
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
123
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
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
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
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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;s Portrait
Logo
Icons
Home page
Portfolio
Draw
Sound
Write
Profile
Setting
Notification
Search bar
Favorite
Userâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;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