This document summarizes the user experience design process for an infographic creation application called Ogre. It outlines three key parts of the user onboarding and creation process: 1) Introducing the user to the application via an interactive presentation, 2) Logging in options which include creating an account, logging in with social media, or as a guest, and 3) Creating the infographic by adding and modifying elements directly in the page for a continuous preview. Wireframes and scenarios are provided to illustrate how these sections would work. Additional concepts discussed include user profiles and saving infographics to a personal collection.

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

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

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

22. Other ideas – 4. Profile

23. Other ideas – 5. Collection

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