The document summarizes changes made to tile layout and design on a university website. The old vertical tile layout had issues like cut-off text and a lack of clear calls to action. The new horizontal tile design addresses these by arranging tiles side by side with more space, and changing elements like labels and buttons on hover. The changes aim to improve the user experience by providing a smoother interaction flow and a more app-like browsing feel. Future strategies could further enhance the experience, such as expanding tiles to show more details instead of loading new pages.

1. One! Search. Click. Done.
University Information Technology Services
Tile Redesign
Deepak Bhagchandani

2. The Ask
Design a horizontal layout
Design the tiles in a horizontal layout to primarily
solve the problem of tile details being cut off in a
vertical layout.
Additionally explore arranging and/or adding other
information to the tile.

3. Old Tile

4. Insufficient space for fitting large titles
Due to the vertical nature of the tile, some tile information
might get cut off.
Ex. Large titles like Software downloads (IUware) get cut off
to Software downloads.
No clear call to action
When the user hovers on the tile there is no clear
visual feedback to provide assurance to the user of
their actions. User is not clear whether he/she should
click on the title or on “View Details”.
Extra large Icon
The Icons on the tiles are too large in proportion to the
title of the tile and the tile in itself.

5. New Tile

7. Normal state
On Hover

8. Description
Icon
Size: The size of the icon is
large, but at the same
time well proportioned in
relation to the size of the
entire tile.
Style: The icon has a slight
gradient from light to dark
to enhance the current
“App Store” experience.
The description provides a nice way for
users to find out more information
without first having to click on View
Options or having to Start the app itself.
Title
The title is in a different and darker font so as to
set it apart from everything else. While browsing
the different tiles, its easier for a person’s eyes to
see the title first and then see the supplementary
information later, as the title stands out.
Lock
The lock icon is conveniently
located on the top right hand
corner so that it subtly makes
it clear at first glance that this
tile/app requires login.
Campus Location
The campus location label is light grey so
that it does not catch the user’s eye before
they read the title of the slide.
It is also of a bigger font size than the
description so that its easily scanned by
someone looking for a particular location.
Rating
The rating is located in such a way that
when a person is reading the title of the tile,
it will be in his/her peripheral vision but will
not interfere with the contents of the tile.

9. On Hover
Drop Shadow
A drop shadow on
hovering, provides a visual
feedback to the user and
enhances the focus on the
tile over which the mouse
cursor is placed.
View Details
The user can click on View Details to go to
the details page, to see more information
about the particular tile. The View Details
link replaces the Campus location label.
Start
On hovering over the tile, the user will be
able to see the Start button replace the
ratings. This will provide a clear call to
action for the user after they finish reading
the title and the description.

10. Grouped
Tiles

14. New
Experience
Tile descriptions
On-hover call to action
Styling of Tile icons
Placing of ratings and lock
The new experience allows for a smoother flow of user interactions,
enabling a person to visit the website and quickly perform their required
tasks without any confusion.
It also aims to create a stronger app store experience.

15. Future
Strategies
When a user clicks on ‘View Details’,
he/she should see the additional
details by expanding the tile itself
rather than opening a new page.
This will further smoothen the flow of
the website as experienced by the user.

16. Thank you
Jason Barnett
Jeremy R Hopf
Brian Joseph McGough

17. Feedback/
Comments/
Questions
Deepak Bhagchandani
deepak2510@gmail.com