Portfolio_UX Designer Miona Bojanovic

UX Designer / Miona Bojanovic
1 / 39Version 0.1 published March 26, 2014
WF.XX.YY Wireframe Name (Command+Shift+Select to Edit)
PortfolioPortfolio

” Strategy is done above the shoulders, tactics are done
below the shoulders...”
I would consider my self being more strategic, than tactical. That means that as UX professional I am more interested in answering the question “What
are we trying to accomplish?” than just “How are we going to accomplish it?” So I would rather create a plan, a method, and series of different activities
that are designed to achieve the goal and deliver unique solution. This plan usually includes a set of tactics, but the main accent is on the plan creation
that will lead to the usage of tactics.
I also find myself being more empowering than forceful. That means that even in situations where certain style of work is not leading to a solution, and
the project is dragging around, I try to motivate people around me, give some suggestions that will engage people, not force them to do something.
But in general I think that that versatility is the solution – being empowering or forceful, depends on a situation. In the situations when you want to improve
quality, innovate, stay competitive, being empowering is the solution. In situations where the fundamental change is needed, strong, forceful leadership is
the answer.

I am passionate about creating attractive and usable interfaces

Website Design

The website was designed for Architectural
Design Company “M architecture”.
Main accent was on reating visual appealing
and attractive website.
On the Home page there is a slide show of
projects.
About Page has short description of company.
Ù Ú
Google - Internet Explorer _ £ Ð
https://www.google.com/ Ù Ú
https://www.google.com/
WF.01 Website Design - M architecture
link: http://depaulkmc-webdesign.com/MionaBojanovic

Page Projects is devided into three sections:
Residential, Interiors and Public.
By clicking on each of those user gets to
another page, with several projects displayed,
and clicking on an image of a project,
slideshow appears with the rest of the images
for particular project.
Ù Ú
WF.01 Website Design - M architecture
link: http://depaulkmc-webdesign.com/MionaBojanovic

I started with a representative content audit
of the EDRA.org website so that I had a full
understanding of how the site is set up and
functions for its users. This step allows listing
of content types and a rating of how effective
they are for the users. It also brings to light
any general content issues that need to be
addressed. Throughout the audit I felt two
important ideas surfaced; social media could
have a much larger presence and the overall
structure could be changed to allow for easier
access to research articles.
I researched two organizations; AIA and
ASID, that are in the same general field and
learned how they relay social media and
research content to their users. The learnings
from those sites, along with the content
analysis help guide the new content strategy
recommendations I constructed for EDRA.org.
These new strategies revolve around two main
topics;
First, to increase Social Media presence, and
Second to increase information access with
both member and non-member benefits.
I’ve also made recommendations about how
the navigation and tagging systems within
EDRA.org could be structured to better suit
user groups.
Finally, I provided recommendations into the
governance of content moving forward.
New Proposed Solution of Edra website is
designed in Joomla.
Ù Úhttps://www.google.com/
Ù Ú
WF.02 Reconstruction of Website - Edra
link: http://miab.siteground.net/Edra1/
Current Edra Website
Proposed Solution

The goal was to design the information
architecture (“IA”) for an interface that allows
a user to post, search, view, examine, and
comment on costumes based on specific
costume types, and view video/photo/
instructional tutorials for costume construction
assistance. The IA includes the site map
and wireframes showing the navigational
organization of the site.
At the begining I conducted the content
inventory that was consisting 163 items, based
on that invertory, I did a card sort with 16 users,
using a tool offered by www.websort.net. Then
I analyzed the results based on summaries
and tree graph data presentation formats.
The card sort results suggested trends in user
categorization of items of including costumes,
masks, accessories, makeup, patterns,
materials, and tutorials, and established a
basis for designing a high-level navigational
structure reflecting the same.
The resulting design enables the user to
effectively and efficiently search and post
costumes, costume related items, post
comments, and view photo/video tutorials.
This is the Home Page where user can see
most atttractive cosumes, search particular
one, see the latest news and go trough main
navigation further in website content.
Ù Ú
WF.03 Wireframe for Costume Website
link: http://share.axure.com/M6TMO9/

In this scenario, the user enters the search
word “fairy” and clicks on the magnifying glass
to begin the search. The search results screen
appears.
The user can enter new text into this box and/
or select a costume type and/or accessory type
to narrow the results to only those costumes
that meet all of those criteria.
It is assumed that because the user wants
to narrow their search, that one costume
type and/or one type of accessory would be
selected, so the drop-down controls here are
limited to a single selection.
Once the screen is complete, the user clicks
the Search button to start the search.
Ù Ú
WF.03 Wireframe for Costume Website
link: http://share.axure.com/M6TMO9/

Spike -o-matic is plant monitoring system.
The spike-o-matic sensor can be set up
outside in a garden or inside home in
individual pots. It’s very versatile, made from
quality titanium, meant to withst and time and
elements.
The spike’s special sensors track the moisture,
light, temperature, and pH balance of the
soil where the plant lives and the air that it
breathes..
The system stores data collected from the
spike in a database that can be accessed from
a website and mobile application.
System also analyzes the data collected and
is able to diagnose why a plant might be doing
poorly or make recommendations for plants
that will do well in similar situations.
WF.04 Wireframe for Spike-o-matic system
link: http://afskgj.axshare.com

I created three scenarios of system usage.
Based on those scenarios, I developed
the funcionallity of the website and mobile
application.
This is the Home page of Spike-o-matic
website, after user already created profile
and entered the plants he has in his house or
apartment.
Icons-images of plants are clickable and take
user to status pages for each plant.
Ù Ú

First Page represents status of a plant. User
can view the Moisture, Temperature, Light
status and Ph Balance.
There is is a short description of plant, current
reminders, and recommendations
Under reccomendations there is a Research
link wich takes user to Reserach page, where
user can see which plants would do well in
similar conditions.
Ù Ú

First Page is Research Diagnose page,
where user can see the diagnose and
recommendation or particular plant.
Second page is Settings page where
user creates the settings for his plants
location, wather it is his house or
apartment, indoor, or outdorr plant.
Ù Ú

This was a group project of website evaluation
for DalaiLama Center.
Our challenge was to:
Develop recommendations for an improved
Dalai Lama Center’s (DLC) website that aligns
with the DLC’s vision while engaging users in a
way that elicits more donations and funders.
We did:
Interviews,
Competitive Analysis,
Heuristic Evaluation,
Expert Evaluation
Card Sort
We also created Short and Long-term
Recommendations with wireframes.
Interviews
WF.05 Website Evaluation - Dalai Lama Center
Competitive Analysis
Expert and Heurisitc
Evaluation
Card Sort

This was a group project of website evaluation
for DalaiLama Center.
Our challenge was to:
Develop recommendations for an improved
Dalai Lama Center’s (DLC) website that aligns
with the DLC’s vision while engaging users in a
way that elicits more donations and funders.
We did:
Interviews,
Competitive Analysis,
Heuristic Evaluation,
Expert Evaluation
Card Sort
We also created Short and Long-term
Recommendations with wireframes.
Wireframe Solution - Home Page
WF.05 Website Evaluation - Dalai Lama Center
Wireframe Solution - Events Page
Wireframe Solution - Blog Page Suggested Site Navigation

I assisted in creation of this website for Serbian
Orthodox Church. The biggest challenge
was to handle big content, so beside Main
navigation on the top, we used Left side menu,
which is visible on every page.
Also we deciced to use a lot of clickable
images and big slideshow on Home page,
which makes website attractive and visually
appealing.
Ù Ú
WF.06 Website for Holy Resurection Orthodox Serbian Church
link: http://orthodoxstore.org/

Mobile Applications Design

TV Zombie is designed to allow friends to
watch TV together; interactively via live chat.
It also helps recommend and keep track of
favorite shows via an interactive TV Guide and
favorite list.
WF.01 TV.Net Mobile Application
The interactive schedule helps user keep
track of watched episodes
User can browse upcoming shows or discover
new favorites

TV Zombie integrates with user existing
accounts such as Hulu, Netflix and Facebook
to name a few.
WF.01 TV.Net Mobile Application
Favorites list reminds user when his favorite
shows will be on next
Shows on his favorite list will auto update by
syncing with your Hulu or Netflix account(s)
The chat feature is a core function of TV.NET
In portrait view it can be shown/hidden
In landscape mode it is side to side with the
show information

The challenge was to design funcional and
attractive music application for a mobile phone.
First screen presents a hompe page. User can
click on an image icon and get to the second
page with list of songs for particular artist.
Clicking the song in the song list takes user to
screen with particular song playing.
WF.02 Music Application

Tho other screens I added here are : Playlist
Page, and More Page. On both pages, icon
images are clickable, and lead to playlist Page,
or on second screen lead to chosen radio
playing.
Now playing leads to screen with song that is
currently playing, and Back button leads to a
previous page.
WF.02 Music Application

The Weather Application is created to show the
temperature both in Fahrenheit and Celsius,
with an option to see temperature for particular
city.
Therefore this application consists of two
microinteractions which are user initiated:
1. The conversion of temperature from
Fahrenheit to Celsius, (and the opposite)
2. Choosing the city from droplist
First microinteraction is initiated with the
trigger in the form of button, located next
to the temperature, which does conversion
with single click. To return to previous value
of temperature, user should click the button
again.
Second microinteraction is initiated with a
trigger in the form of button and drop list,
where user chooses the name of the city from
droplist, and clicks on the button View, and
then new temperature values for chosen city is
displayed.
WF.03 Weather Application
link: http://dnumzc.axshare.com

Design process for Healthcare Application
began with sketching home screens. These
two were possible solutions I created, but since
it was a group projet, we decided to move on
with simplified version of Home screen.
WF.04 Healthcare Application
link: http://h9tcut.axshare.com
Wireframe Solution - Version 1 Wireframe Solution - Version 2

The objetive of the project:
Provide patients custom tailored access to our
newly digitized discharge instruction content.
Patients often don’t read the stacks of paper
we discharge them with, relying mostly on the
conversations they have with their doctors
before being discharged after their care.
We can now offer them this content in the
form of videos that have short bullet points
that accompany them.
As we can see here, Healthcare application
provide user information about: Medical
Records, Billing and Insurance, Medication,
and Discharge Instructions. Also user can
create Profile, Check his Calendar and receive
and send messages to a hospital.
This is the Home Page screen. The icons are
clickable and take user to other screens.
This is the Profile Page screen. This is were
user can view and edit the profile.It contains
Patient info, Doctor Info,and Pharmacy Info

These are the Medications screens, where
user get when he clicks on Medications icon.
When user clicks on Medications icon
he gets into this screen. He can now choose
the medications for particular desease.
When user clicks on HipSurgery Medications
tab, he gets to this screen, where he can get all
the information about medicine and dosage.

This is mobile version of Spike-o-matic
Application.
It is much simplified then Destop version.
WF.05 Spike-o-matic Application
link: http://jas2cy.axshare.com
This is the Home Page screen. When user
clicks on each tab, enters antother screen.
This is the Status Page Screen, when user gets
when clicks on Status tab on previous creen.
This is where user gets information about
plants,Indoor, or outdoor. Red leaf means
warning.

On Peace lIly status Page user can see the
Moisture status, Light status and Temperature
status. If the status has green leaf next to it,
then plant is in good condition, but if it has red
leaf next to it, something needs to be done.
Since spike-o-matic is connected to water
reservoir, user can automatically water the
plant, by clicking on 4 ounces or 8 ounces tab.
When user clicks on a Peace Lily tab on
previous page, he gets into status page for
Peace Lily,
When user clicks on Moisture status tab, he
gets to this screen, where he can see the
message and what needs to be done.

Spike-o-matic is capable of sending
notifications to user based on saved locations.
Since user is close to saved location of
the store, user received a message about
Neutralizer he has to pick up for his plant.
By clicking on info button on previous screen
user gets to the screen where he can see
information about what needs to be done.

Reminder Application is created for different
things user needs to be remineded of.
Unique to the Reminder Application is that it
has ability to send notifications to user based
on locations, date and time.
Wireframe is created in Adobe InDesign, and
it’s available in clickable pdf version.
WF.06 Reminder Application
This is the Home screen. User just
received notification that grocerie
store is close by. User can click on
tab and see the list of grocerie stores
By clicking on Notification Tab user gets to
Locations screen. He clicks on Map it button, on
first location and goes to next screen.

Here on this screen user can see the map of
location and the exact address.
By clicking on back button on previous screen
user gets to Home screen, where he can click
the grocerie tab, to see what he needs to buy.

This is the Grocerie screen, where
user can see list of grocerie items,
and check them after shopping.
By clicking on a Add new button on previous
screen user gets to a new screen where he can
add new item to the list.

This is
This is the mobile version, of Costume website,
that was previusly presented.
The mobile version is simplified, but still has
almost all funcionallity like website.
WF.07 Costume Application
This is the Home screen for Costume Application.
Here user can see whats new , and latest tutorials.
By clicking on arrow on Menu tab, user can see
a drop down menu. By clicking on Tutorials tab
user gets to Tutorial Page.

This isIf user clisk
This is the mobile version, of Costume website,
that was previusly presented.
The mobile version is simplified, but still has
almost all funcionallity like website.
This is the tutorials screen, which displays all the
tutorials recently added.
By clicking on Wter Fairy link on previous
screen, user gets to tutorial about how to create
Fairy Wings.
WF.07 Costume Application

Visual Design Examples
This isIf user clisk

This is Cover Design, and Menu design
for Blue Ray Disc. The Menu prototype is
designed in Flash.
Cover Design
Design Cover and Menu for Blue Ray Disc
Menu Design - Home
Menu Design - Scenes Screen Menu Design - Features

The main goal for this project is to design
animation that would be interesting, visually
appealing and that would have characterization
and storytelling. I decided to create animation
that would be based on a movie Vertigo from
Alfred Hitchcock, because it’s an interesting
story that can be interpreted in many different
ways.
The main character Madeline became my
inspiration for a story about beautiful and
strange woman her strong feelings and
sadness.
In the meantime I found that the new
soundtrack “After Disco” from Broken Bells
would be a great music background for my
story, and that music brought even more
inspiration and ideas of how the story should
develop.
I used the images, incorporated video and
dialog from the movie, but I tried to incorporate
it in a new way, so it has different meaning.
Scene 1
Flash Cut Animation Design
link: http://youtu.be/Npp6nKbhjmY
Scene 2
Scene 3 Scene 4

The main goal for this project is to design
animation that would be interesting, visually
appealing and that would be interactive.
I decided to create animation that would be
the presentation of famous women in XX
century. I used the example of Chicago Tribune
Iconographic example with a time line as
an idea, and then developed a little different
concept.
My goal was to make this iconographic
animation as an interesting journey for user,
so he can click on different buttons and see
different things changing, like time on the time
pie chart, birth location of characters, and
display of images and text.
Home Screen
Interactive Animation Design
Time and Map display
Image Display Text display

This is design for web banner, animated,
created in Flash.
You can see several versions for different
dimensions used for different positions on web
page.
Version 1
Banner Design
Version 2
Version 3 Version 4

The goal of this project was to design the back
side and front side of a playing card.
Version 1 - front side
Transformation Card Design
Version 1 - back side
Version 2 - front side Version 2 - back side

Portfolio_UX Designer Miona Bojanovic

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (19)

Similaire à Portfolio_UX Designer Miona Bojanovic

Similaire à Portfolio_UX Designer Miona Bojanovic (20)

Plus de miona bojanovic

Plus de miona bojanovic (20)

Dernier

Dernier (20)

Portfolio_UX Designer Miona Bojanovic