SlideShare a Scribd company logo
1 of 24
Ogre
- infographic web editor Team:
Tiganas Bianca - Gabriela
Tudosa Razvan - Petru
Ciobanu Madalina - Georgiana
Descriere
Ogre is an application where you can easily
create infographics. The application offers the
possibility of inserting images, text and
creating diagrams. The infographics can be
saved on the user's personal computer or in
his/her application account. The ones saved in
the application account can be visualized or
edited.
Who are the users that will use the
application?

More about personas on the blog http://ogrecliw.wordpress.com/
1.Introducing the user to the
application
• Q: How can the user know what they expect from
the application?
• O:
He has an interactive presentation.
He has a video tutorial.
He doesn’t have any presentation.
• C: We chose the interactive presentation because
he will get the most important information
effectively
Sketch– 1.Introducing the user to the
application
Scenario –1.Introducing the user to
the application
• Event: User is accessing the website.
• Desired result: After seeing the application
slides, the user tries the app.
• Home page has a slider containing a
presentation of the app. While the user reads
the informations, he will also see the final
page of the slider that contains a ”’Try it
now!” button.
Wireframe – 1.Introducing the user to
the application
2. Logging in the application
• Q: How can the user connect to the application?
• O:
He doesn’t create an account.
He registers and creates an account.
He logs in with Facebook or Twitter account.
• C: We chose all, because:
We don’t want to force a user to create an account before
he tries to create create an infographic.
Creates an account because he is organized and wants to
have different accounts depending on his needs.
Uses a social network account because he doesn’t want to
have too many accounts and it is more accessible.
Sketch – 2. Logging in the application
Scenario – 2. Logging in the
application
• Event: User presses “Login / Register” button.
• Desired result: User fills the requiered information
or clicks on either facebook or twitter icon.
• Home page is the same as described above. When
the user clicks on the “Login / Register” button, a
slider with login options goes down. The slider is
devided in two parts: one for login and one for
registration. After pressing the “Login” button or
the “Register” button, the page where the user
can design the infographic appears.
Wireframe – 2. Logging in the
application
3. Creating the infographic
• Q: How does the user creates the elements from
the infographic?
• O:
Creating each infographic element separating and
afterwards adding them in the page.
Creating everything inside the page and visualizing
the infographic when the user wants (preview).
• C: We chose the second options because the user
can have an overview of the infographic at each
step so he can decide whether he
adds/removes/modifies element.
Sketch – 3. Creating the infographic
Scenario – 3. Creating the infographic
• Events: The user creates the infographic and
saves / downloads / shares it.
• Desired result: The user finishes the infographic
and can choose what to do with it.
• The user adds/removes/modifies elements in the
infographic. He clicks on a menu item and the
menu area slides with the options he has for the
selected item. The user saves the infographic in
his collection or downloads / shares it.
Wireframe – 3. Creating the
infographic
Other ideas – 4. Profile
Other ideas – 5. Collection
Prototype

More about prototype here http://students.info.uaic.ro/~razvan.tudosa/Prototip/

More Related Content

Similar to Ogre

Latest_Portfolio_Anxiao_chen
Latest_Portfolio_Anxiao_chenLatest_Portfolio_Anxiao_chen
Latest_Portfolio_Anxiao_chen
Anxiao Chen
 
UCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training EverywhereUCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training Everywhere
Timothy Adrian Lam
 
Gamer’s for Life Application .docx
Gamer’s for Life Application .docxGamer’s for Life Application .docx
Gamer’s for Life Application .docx
hanneloremccaffery
 
Phase 3 powerpoint- Final Presentation
Phase 3 powerpoint- Final PresentationPhase 3 powerpoint- Final Presentation
Phase 3 powerpoint- Final Presentation
lozilozi
 

Similar to Ogre (20)

Latest_Portfolio_Anxiao_chen
Latest_Portfolio_Anxiao_chenLatest_Portfolio_Anxiao_chen
Latest_Portfolio_Anxiao_chen
 
reptProblem
reptProblemreptProblem
reptProblem
 
Problem
ProblemProblem
Problem
 
GetPoll (A Polling Website)
GetPoll (A Polling Website)GetPoll (A Polling Website)
GetPoll (A Polling Website)
 
Sketching - DoToday App
Sketching - DoToday AppSketching - DoToday App
Sketching - DoToday App
 
FINAL REPORT
FINAL REPORTFINAL REPORT
FINAL REPORT
 
Expense_Tracker.pptx
Expense_Tracker.pptxExpense_Tracker.pptx
Expense_Tracker.pptx
 
SahilaMirajkar
SahilaMirajkarSahilaMirajkar
SahilaMirajkar
 
UCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training EverywhereUCD Assignment 2 – Final Report – Training Everywhere
UCD Assignment 2 – Final Report – Training Everywhere
 
Backup Photos- Project Proposal
Backup Photos- Project ProposalBackup Photos- Project Proposal
Backup Photos- Project Proposal
 
(MAKAV).pptx
(MAKAV).pptx(MAKAV).pptx
(MAKAV).pptx
 
python pre-submission.pdf
python pre-submission.pdfpython pre-submission.pdf
python pre-submission.pdf
 
Gamer’s for Life Application .docx
Gamer’s for Life Application .docxGamer’s for Life Application .docx
Gamer’s for Life Application .docx
 
Phase 3 powerpoint- Final Presentation
Phase 3 powerpoint- Final PresentationPhase 3 powerpoint- Final Presentation
Phase 3 powerpoint- Final Presentation
 
Responsive Design: Let's get Responsive!
Responsive Design: Let's get Responsive!Responsive Design: Let's get Responsive!
Responsive Design: Let's get Responsive!
 
Workflow automation i phone application for a construction company
Workflow automation i phone application for a construction companyWorkflow automation i phone application for a construction company
Workflow automation i phone application for a construction company
 
Google UX Design Course - Portfolio Project 1 - App Design for a Fictional St...
Google UX Design Course - Portfolio Project 1 - App Design for a Fictional St...Google UX Design Course - Portfolio Project 1 - App Design for a Fictional St...
Google UX Design Course - Portfolio Project 1 - App Design for a Fictional St...
 
Acl3XsIcb_j22h6.pptx
Acl3XsIcb_j22h6.pptxAcl3XsIcb_j22h6.pptx
Acl3XsIcb_j22h6.pptx
 
How to make an iPhone app
How to make an iPhone appHow to make an iPhone app
How to make an iPhone app
 
HCI Group Project Report
HCI Group Project ReportHCI Group Project Report
HCI Group Project Report
 

Recently uploaded

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Recently uploaded (20)

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 

Ogre

  • 1. Ogre - infographic web editor Team: Tiganas Bianca - Gabriela Tudosa Razvan - Petru Ciobanu Madalina - Georgiana
  • 2. Descriere Ogre is an application where you can easily create infographics. The application offers the possibility of inserting images, text and creating diagrams. The infographics can be saved on the user's personal computer or in his/her application account. The ones saved in the application account can be visualized or edited.
  • 3. Who are the users that will use the application? More about personas on the blog http://ogrecliw.wordpress.com/
  • 4. 1.Introducing the user to the application • Q: How can the user know what they expect from the application? • O: He has an interactive presentation. He has a video tutorial. He doesn’t have any presentation. • C: We chose the interactive presentation because he will get the most important information effectively
  • 5. Sketch– 1.Introducing the user to the application
  • 6. Scenario –1.Introducing the user to the application
  • 7. • Event: User is accessing the website. • Desired result: After seeing the application slides, the user tries the app. • Home page has a slider containing a presentation of the app. While the user reads the informations, he will also see the final page of the slider that contains a ”’Try it now!” button.
  • 8. Wireframe – 1.Introducing the user to the application
  • 9.
  • 10. 2. Logging in the application • Q: How can the user connect to the application? • O: He doesn’t create an account. He registers and creates an account. He logs in with Facebook or Twitter account. • C: We chose all, because: We don’t want to force a user to create an account before he tries to create create an infographic. Creates an account because he is organized and wants to have different accounts depending on his needs. Uses a social network account because he doesn’t want to have too many accounts and it is more accessible.
  • 11. Sketch – 2. Logging in the application
  • 12. Scenario – 2. Logging in the application
  • 13. • Event: User presses “Login / Register” button. • Desired result: User fills the requiered information or clicks on either facebook or twitter icon. • Home page is the same as described above. When the user clicks on the “Login / Register” button, a slider with login options goes down. The slider is devided in two parts: one for login and one for registration. After pressing the “Login” button or the “Register” button, the page where the user can design the infographic appears.
  • 14. Wireframe – 2. Logging in the application
  • 15.
  • 16. 3. Creating the infographic • Q: How does the user creates the elements from the infographic? • O: Creating each infographic element separating and afterwards adding them in the page. Creating everything inside the page and visualizing the infographic when the user wants (preview). • C: We chose the second options because the user can have an overview of the infographic at each step so he can decide whether he adds/removes/modifies element.
  • 17. Sketch – 3. Creating the infographic
  • 18. Scenario – 3. Creating the infographic
  • 19. • Events: The user creates the infographic and saves / downloads / shares it. • Desired result: The user finishes the infographic and can choose what to do with it. • The user adds/removes/modifies elements in the infographic. He clicks on a menu item and the menu area slides with the options he has for the selected item. The user saves the infographic in his collection or downloads / shares it.
  • 20. Wireframe – 3. Creating the infographic
  • 21.
  • 22. Other ideas – 4. Profile
  • 23. Other ideas – 5. Collection
  • 24. Prototype More about prototype here http://students.info.uaic.ro/~razvan.tudosa/Prototip/