portfolio ux designer miona bojanovic

Portfolio

Miona Bojanovic

Web site DesignM architecture

Web site design for Architectural Design Company – M architecture

Link: http://depaulkmc-webdesign.com/MionaBojanovic

http://depaulkmc-webdesign.com/MionaBojanovic



Web site DesignM architecture

Blue Ray DesignCover and Menu

Design for a cover of Blue Ray

Design of Menu

Blue Ray DesignCover

Blue Ray DesignMenu - Home

Blue Ray DesignMenu - Scenes

Blue Ray DesignMenu - Features

Application DesignTV.net

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.

TV Zombie integrates with your existing accounts such as Hulu, Netflix and Facebookto name a few.


The interactive schedule helps you keep track of watched episodes

You can browse upcoming shows or discover new favorites


Your favorites list reminds you when your favorite shows will be on next

Shows on your 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

Web site DesignRestaurant – School project

Web SITE Design for Serbian Etno Restaurant

This is a DePaul school project, and doesn‟t have live version

The purpose of the project was to develop JavaScript and jQuery code, not visual design

Web site DesignRestaurant

Home Page with slide show


Menu Page with clickable images on the top


Drinks page with clickable images on the right

Web site DesignNew content strategy and Redesign of EDRA website

New Edra website structure and content is based on Content Management Strategy.

Link: http://miab.siteground.net/Edra1/

In the world of environmental design research, EDRA.org stands out as a website that can offer many different things to many different people. It is an educational resource to students who are on their way into the field as professionals, it is also a tool for current professionals to find exciting new pieces of research within the industry, and it can also be a place for all groups to meet and converse about the hot topics of the day. EDRA.org is a valued resource throughout the industry and with an augmented content strategy it can become more focused on those items that users and stakeholders find beneficial.

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 for a 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 our 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, we‟ve provided recommendations into the governance of content moving forward.

http://miab.siteground.net/Edra1/

Web site DesignNew content strategy and Redesign of EDRA website

Home Page

Current Edra website Redesigned Edra website

Interface DesignExpense reimbursement interface

Wireframe link: http://share.axure.com/W1L4WS

The Objective for Expense Reimbursement Interface Project was to create interface that will allow users to view sum of their expenses, after they enter:

The purpose for the expenses (e.g. travel, event catering) 5-digit account number (can be retrieved with account title) Date or range of dates List of expenses, each including:

◦ Type of expense (lunch, lodging, airfare, catering)◦ Date or range of dates◦ Amount◦ Document upload◦ Comment (optional)

When all the necessary data is entered system displays sum of all expenses per project. User can enter one or more purpose, or one or more types under same account number.

Also, one user can enter expenses for some other person, under same account number, but on the different page, switching from one page to another.

http://share.axure.com/W1L4WS


Wireframe


Home page is the first page user sees when he enters the application. On this page user can see that message that says that he is logged in.

Next thing he can see is two fields to enter the information. He can decide whether to enter his 5 digit account number or his project title.

When he enters the information, in both cases he can press button GO, and that will take him to another page –Page1.


On Page 1, user starts entering information. In the header, the message is displayed saying that the user name is: Sam Bauer. Right next to it there is a droplist, where user can switch to another user name: Laura Johnson, by picking her name from the list. In this particular case, there is only one other person, that Sam is entering expenses for, but it can be many. The process is the same.

Web site DesignCostume 2

Project goal

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.

Content inventory, card sort, and individual analysis

To assist with establishing an effective and intuitive navigational structure and context of use awareness for the interface, we first conducted a content inventory of the items that a user may interact with. Altogether, we identified approximately 126 items. After conducting the content inventory, we utilized the web card sort services offered by www.websort.net to develop a foundational awareness of how users may categorize the items. The card sort consisted of participation of 13 remotely located individuals in an open card sort method using the websortcomputer interface to sort the items into groups. The participants were then asked to assign a label to each group.

For the card sort results, we used the category summaries and tree graph data presentation formats to perform an analysis of the quantitative data revealed form the card sort. 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.

After establishing results from the card sort data, each team member (4 total team members) constructed a wireframe. The wireframes were then compared and discussed for purposes of design consolidation and elimination of ambiguous content.

http://www.websort.net/


Resulting design

The resulting design enables the user to effectively and efficiently search and post costumes, costume related items, post comments, and view photo/video tutorials. All of the searchable costumes, items, and tutorials are user generated and the interface allows for tagging of each post with the items that are included in the posted costume/item; thereby creating a truly user centered database of costumes. The tutorials are especially unique and accommodating as the interface allows for posting of photo and/or video (with audio for the visually impaired) tutorial information to adequately assist the user with creation of costumes. The interface was designed with useable features, acting as somewhat of an open costume database, which could provide a medium for establishing an online community of “costume lovers.” Not only can users use the easy-to-use interface for posting their costumes and getting ideas for future costumes; they can also access the tutorials for do-it-yourself, inexpensive alternatives to store bought costumes.

In the subsequent sections of this report, we will illustrate the following information: The interface site map, which includes a graphical representation of the core navigation for the

website and a description of its design. An active link to our wireframe, including screenshots of the interface‟s most notable

features, and the design process associated with them. Active links and a series of screenshots for the following two (2) task interactions:

◦ Creating a Post (desktop version)◦ Searching for a Costume (desktop and mobile version)

Team reflection on the design process. An Appendix containing all of each team member‟s individual contributions toward completion of

the projects.


An interactive version of all wireframe pages is available at this link:

http://share.axure.com/M6TMO9/

http://share.axure.com/M6TMO9/


Wireframe fro task 1- Finding Fairy Costume

Link: http://share.axure.com/6XI7NO

Screenshots with supporting design notes are below.

To start a search, the user enters their search term in the Search box at the top of the screen. The box has a magnifying glass visual cue as well as instructional text inside the box.

http://share.axure.com/6XI7NO


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 search results screen shows an abbreviated version of the costume tutorial, including a photo, the rating and introductory text so the user can decide if they wish to view the full item. If so, they click the View full tutorial button to be taken to the landing page for that costume.

On the search results screen the user can:

View all results of the search. The text in green indicates the search was successful (a search that returned no results could be in red text) and shows how many results are displayed on the text out of the total number hits.

Sort the search results if there is a lengthy list of hits and the user wants to see results that meet certain criteria first. Options here include relevance, date and rating.

Click the Refine your search option to select additional criteria to narrow the results of the search.

On the Refine your search screen, the keyword box is automatically populated with the term the user entered initially.


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.


Wireframe for task 2 – Finding a fairy costume, mobile version

Link: http://share.axure.com/E5K6T8/

Screenshots with supporting design notes are below.

The following wireframes will show the mobile version of the website. In the mobile version the user will browse for a costume. In this task that costume will be Water Faerie.

On the home page (Fig.1) you can find the website logo, a search bar, the website navigation in a drop down menu, a „What‟s New‟ carousel and a „Latest Tutorials‟ carousel. The two carousels will be an easy navigation option for those looking for what‟s in season, or just wish to browse. The Costume2 logo is also a link to the home page. This is done to save space and provide a link to the home page on every page. The website navigation has been reduced into a menu drop down navigation. (Fig.2)

When selecting the Tutorial page (Fig.3) the logo and navigation bar is the same as on every page for ease of navigation. There is an option to change the way the results are sorted in a drop down menu (Fig.4). The options are Date Added, Views, and Reviews.

Once selecting the Water Faerie Wings costume, the user will be sent to the costume page. On the costume page, (Fig.5) the user can view the related pictures, instructions necessary to complete the tutorial, any other videos or PDF documents.

http://share.axure.com/E5K6T8/


Figure 1 Figure 3 Figure 5

Figure 2

Figure 4

Banner designCoffee banner

Design for web banner, animated, created in Flash

Several versions for different dimensions and positions on web page

Web page

Animated banner


Web pageAnimated banner


Animation start

Animation end

Web page

Animated banners

Transformation card designPlaying cards

portfolio ux designer miona bojanovic

Technology