designprinciples

 

REDESIGNING USING DESIGN PRINCIPLES

CRAIGSLIST - DESIGN CHALLENGE

Identify the site's issues and/or usage of the grids, alignment, Navigation cues and Redesign any of the site's screen to better address these design elements.

Screen Shot 2018-02-03 at 12.05.55 AM

DESIGN ISSUES

Screen Shot 2018-02-05 at 1.02.41 AM

 


Grid - The Craigslist has used column grid in its Homepage. The issue with the grid is that has columns within the column grid. Each main items display sub-items in a single column, 2 columns or 3 columns. Example - “Community” has 2 columns for its sub-items, “Discussion Forum” has 3 columns of sub-items. This structure creates visual imbalance to the readers eyes due to inconsistency in the way the information is organized or arranged.

 


Alignment - There is lack of consistency in the way the information is aligned. For example, the menu items on the left-side, locations on the right-side, main category items are centrally aligned compared to rest of the sub-items which are left aligned. This creates visual imbalance to the users eyes. Also, any lengthy list which is centrally aligned affects the user's readability.

Screen Shot 2018-02-05 at 1.04.47 AM
Screen Shot 2018-02-05 at 12.59.14 AM

 

 


Navigation - All the menu items, Main category items, subcategories items, locations are displayed on the homepage for the user to select and navigate. However, a lot of information will overwhelm the user making it difficult for the information discoverability. In the above screenshot, HELP, FAQ and other options are listed next to each other without proper organization. With the current design, it is difficult for the users to figure out what options are available. Craigslist is a good example for Poor Information scent.

REDESIGN

Screen Shot 2018-02-05 at 12.55.08 AM


Grid - Modular grids are best when columns alone don’t offer enough flexibility and when vertical and horizontal space are of equal concerns. We have categorized “categories”, items on “latest trends”, “calendar”, “price” items into modules. This Modular grid design helped us effectively organize data and present a balanced structure. It enhances usability by providing readers with easily and quickly digestible pieces of information that allocated from each other in a simple and comprehensible manner; it reinforces information hierarchy.

Screen Shot 2018-02-05 at 12.55.19 AM
22

 


Alignment - We have maintained consistency by left aligning the items on the page. Alignment guides the eye, reducing clutter. This alignment creates stability and visual balance to the reader’s eye. The page looks better and cleaner than the previous design. 


Navigation - We have reduced the clutter in current design defining a primary navigation menu and implementing that to the left side of the page. Adding relevant icons to it will help the user to easily identify and discover the available navigations. We have also kept an expand and collapse symbol to indicate the presence of a subcategory under the primary menu. We have also implemented block navigation for each item which will help to improve the information scent. All the relevant metadata regarding the items were displayed on the preview thumbnail. This will help user to get more information about the respective navigation. 

Screen Shot 2018-02-05 at 12.55.31 AM


IPHONE ALARM DESIGN CHALLENGE

Identify the issues with the IPhone Alarm Screen and redesign using Gestalt and Color theories.

 

Screen Shot 2018-06-24 at 6.02.41 PM
Screen Shot 2018-06-24 at 6.02.52 PM

Figure Ground: There should be clear differentiation between the selected time and the rest of the time elements. In the screenshot, there is no much difference between them. They both seem to have undifferentiated background. As a result, the users might find it difficult to focus on the selected time.

Similarity: In the alarm screenshot,  the 3 elements - Repeat, label and sound  have similar selection type while snooze has the toggle button which differs from the rest. This may result in users not perceiving them as a single group. It reinforces differences among the elements.

 

Here in the interface, the save button suffers from Stroop Interference. A phenomenon in which mental processing is made slower and less accurate by competing mental process. Even though save is a positive action the red font color contradicts its perceived functionality.

Screen Shot 2018-06-24 at 8.01.52 PM
Screen Shot 2018-06-24 at 8.03.48 PM

Figure & ground: In our redesign, there is a clear distinction between the figure (object of focus) and the ground (rest of the time elements). The selected time receives more attention by the way it is designed. We have increased the overall size of the figure content for more clarity. We have also reduced the opacity of the background to make it less prominent with respect to the figure.

Similarity: In our redesign, we have created a selection type for snooze (consisting of different snooze time options, eg. 5 mins, 10 mins). The selection type of Snooze is similar to Repeat, label and sound selection types. The similar selection type elements are perceived by the user as a single group. It reduces complexity and reinforces the relatedness of design elements.

 

In the redesign we have tried to solve this issue by providing a relevant color to the save label. We choose a green color because green is assumed to be positive in nature and will hence align with the positive behaviour of save action. We have also colored the selected alarm time green to make it more prominent to the users

AMAZON - DESIGN CHALLENGE

  

To identify Gulf of Evaluation and Gulf of Execution  on Amazon Website and redesign

 

Screen Shot 2018-06-24 at 10.23.01 PM
Screen Shot 2018-06-24 at 10.23.10 PM

 

The user’s goal is to view all the baby boy dresses which fall within the cost criteria $9 - $10. The system provides the price range option (min & max) for the users to input and get the desired results. The users expect the results to be within the same range as their input. From the above screenshot, the Gulf of Evaluation occurred when a system’s behaviour has not met the user’s goal.

 

 

In our suggested design, the user enters the min and max price to view the items. The system displays a message “Every item displayed includes at least one set within the specified price range”. This message allows the user to understand that the item that was displayed with “$5” price contains a set (based on color, size) within the price range.

Screen Shot 2018-06-24 at 10.25.24 PM
Screen Shot 2018-06-24 at 10.25.50 PM

The user’s goal is to view all the items that are 5 star rated only. The user perceives (Mental Model) that he can click/select one button/option to achieve his goal. But the actual system interaction requires him to click “4 & up” button and then displays all the items with 4 stars and above (100’s or 1000’s items) that are randomly displayed. The Gulf of Execution occurs when a user is having difficulties to view only the 5 star rated products.

Our redesign includes a slider which will enable user to select specific rated items. The slider can replace the existing average customer review or can be included as an addition. The slider will reduce the “gulf” by letting the users know how to work and what can he/she do to achieve their goal. Here the user can slide to “4.8” to see only 4.8 rated items.


ZARA.COM - DESIGN CHALLENGE

 

Identify issues with Menus, Navigation, grids and Alignment and redesign Zara.com

 

Screen Shot 2017-11-20 at 10.59.14 PM
Screen Shot 2017-11-20 at 10.56.03 PM
Screen Shot 2017-11-20 at 10.54.19 PM
Screen Shot 2017-11-20 at 10.56.08 PM

Menus: They have an expanded menu layout with a two-level nested structure. Each level redirects to a separate page. So, if the user wants to select a menu option in the second level he will have to traverse between two continuous pages. These is no ease of access to the whole menu lists.

Navigation: The primary navigation of Zara has menus like TRF, JOIN LIFE and EDITORIAL which does not give any hint about its content. When we click on TRF, we are getting images of clothes and their details. The behaviour is similar if we click on MEN, WOMEN, and CHILDREN. Thus, a user will get confused if s/he isn’t see any navigation information scent for the menus.

Navigation on the cover page of the website has random images sliding on the whole screen. The user does not have control to click on the desired Image until it appears on screen. The user has to wait until the images shows up on screen.

The Menu items on the left are improperly aligned. Example, there is no consistent gap/space between NEW IN, Woman, Man, Kids, Join Life and Editorial items. Though it has been arranged based on common elements, its does not look consistent to the user’s eyes. 

 

Low Fidelity Sketches

 

Screen Shot 2018-06-24 at 10.51.53 PM
Screen Shot 2018-06-24 at 10.51.58 PM
Screen Shot 2018-06-24 at 10.52.15 PM
Screen Shot 2018-06-24 at 10.52.28 PM

 

Redesign - Prototype

 

Screen 1.1 copy
Screen 1.2
Screen 1.3
Screen 1.4
Screen 1.5
Screen 3.1 copy

 

Design Descisions: 

Cascaded menu structure allows users to easily navigate between different menu options available. Hierarchical grid helps to clearly distinguish between elements of different priorities like menu structure, seasonal designs, and regular wears. Redesign Includes arrows for image slider to indicate the left and right navigation. Pagination queues are also provided in the bottom of the slider to indicate number of pages and current state. Included a short description about each and every menu item so that user can get an idea about a particular menu item he/she is about to select. Contents are aligned to the left. The primary elements like logo,  search, contact etc are aligned horizontally. Also, the navigation menu is aligned to the left.

 

Projects

UMBC IES WebsiteUsability Evaluation

Website RedesignPrototyping

Wonder Woman BraceletsUser Interface Prototyping & Development

UMBC Choice ProgramGraphic Design

Design PrinciplesFundamentals of Human-Centered Computing

Design Challenge - IDEO & AcumenHuman-Centered design