Portfolio_UX Designer Miona Bojanovic

UX Designer / Miona Bojanovic1 / 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 architecturelink: 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.

Ù Ú


https://www.google.com/ Ù Ú



WF.01 Website Design - M architecturelink: 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/ Ù Ú

Google - Internet Explorer _ £ Ðhttps://www.google.com/

WF.02 Reconstruction of Website - Edralink: 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 Websitelink: 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 Websitelink: 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 systemlink: 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.

Ù Ú

Google - Internet Explorer _ £ Ðhttps://www.google.com/ Ù Ú




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.

Ù Ú

Google - Internet Explorer _ £ Ðhttps://www.google.com/ Ù Ú




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 EvaluationCard SortWe 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 EvaluationCard SortWe 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 Churchlink: 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 nextShows 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.NETIn portrait view it can be shown/hiddenIn 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 Applicationlink: http://afskgj.axshare.com


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 Applicationlink: http://afskgj.axshare.com


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 Applicationlink: 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 Applicationlink: 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 paperwe discharge them with, relying mostly on theconversations they have with their doctorsbefore being discharged after their care.We can now offer them this content in theform of videos that have short bullet pointsthat 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 iconhe 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 allthe 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 Applicationlink: 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.


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.


Here on this screen user can see the map oflocation 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.


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.


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 Designlink: 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 bethe 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

Design

Transcript of Portfolio_UX Designer Miona Bojanovic