MyUFL Final NEW_merged

UXD Project 1
Ram Kartikeya Boyini, Qing Li, Xiaolei Guo, Gaurav Pathak

myUFL (https://www.my.ufl.edu/)
University of Florida’s portal to a variety of online services and
enterprise-wide applications *
MyUFL website is designed for providing varieties online services for UF faculty and students.
Each student/teacher uses the website for a different purpose. For example; some might use it daily for schedule,
some might use it monthly/annually for insurance, others might use it for training and the rest might use it for HR
related resources.
*https://welcome.hr.ufl.edu/getting-started/ufit/myufl/

Current Design.

Home screen(Hero/Landing Page) of myUFL (as on 10/4/2021)
Courtesy: https://my.ufl.edu/

Interface after a series of clicks on the nav-bar of myUFL (as on 10/4/2021)

Our Redesign.
Adding the ‘my’ to myUFL

What features did we add and the
Rationale behind it >

Announcements.
Affordances
We added announcement and news panel
so that we can keep the user updated about
major happenings regarding the university.
As myUFL is visited frequently, and there is already an implementation
regarding news and announcements in the old version home screen,
we thought of improving the form factor and adding color cues and
visual aid (pictures) to the news to make it more affordances.
Added conventional used icons (cues) so that important
announcements can be distinguished. We simplified the format of news,
only provided title and pictures as a concise abstract to avoid
overwhelming. Items can be clickable to redirect them to the news
specific link to know more.
Result: People are now less likely to miss-out on important
announcements and news regarding UF.

Services panel.
Affordances
The hamburger main menu is now a panel on the
home screen where we also added search bar for
effective and quick searches.
We noticed that most of the Menu items that were segregated into
groups only contained one or two items when clicked. Hence instead of
re-grouping, we listed out the contents according to their usage, hence
reducing the number of clicks and confusions regarding “What to group
to click on to go to a specific task?”
The new hamburger main menu is more affordances with an explicit
menu and conventional search bar. Specific services are listed below
the usage category with smaller font size, with this constraint, the users
is able to locate the services quicker.
Result: People are now less-likely to miss-direct them to unwanted url’s
and can find services they’re looking for easily.

Widgets.
Metaphors
Now myUFL has Widgets, one can
pin to the homescreen to customize
according to one’s needs and stay
in-touch with most important info.
Widgets (metaphorically, inspired by sticky notes in a white
board) , can be added to the home screen as according to
one’s usage. We concluded that users visit myUFL with
different purposes.
Hence, widgets add a customization to the home screen
and help a user to stay in-touch with all the status updates
regarding his/her concerned services in an instant. Widgets
can have shortcut buttons.
Types of widgets one can add: Time Reported, Latest pay,
Training Status etc.
Result: Users can get updates and progress about their
most frequently visited services and perform suitable
actions easily.

Login Status.
Feedback
A nice greeting along with the login status of the user and
his profile picture can give an essence of personalization
and a friendly experience. The greeting is also a feedback
to let the user aware that they are logged in.
Extra Information Gained.
Mapping
Color cues and visual cues on widgets and buttons is mapping to the
specific function, so that might help user navigate effectively and get
updates on his metrics.
Eg: -a Progress bar would help a user to get insights on how many
hours are left from his weekly hours. Accordingly he/ she can perform.
-a Weekly pay graph on the Latest Pay widget can help a User to get
insights about his pay and perform better next time.
-Icons are removed and Text is added to exactly know more about the
items on the top tab.

Current Design:
Our Redesign:
❌
❌
❌
Time and effort are wasted in finding services on the
landing page and navigating through the main menu.
Every user is provided with plethora of information that
might be not useful for him/her.
User’s are more likely miss out on important
announcements.
✅
✅
✅
Home page and navigation are more affordances. Users find
services more effectively, more quickly and less time and
cognitive effort is wasted .
Useful Information only about services a specific User is
concerned about, is shown by custom widgets .
Users are less likely to miss out on important announcements.
❌
Users have a bland experience and do not have info
about their session. Every interviewee wanted a
redesign.
✅
✅
Users get a more personalized, friendly and intuitive experience.
Users are now aware of logged in status (Added Safety).

Thank you.

CEN 5728 - UX Design
FALL 2021
Instructor:- Dr. Sharon Lynn Chu
Teaching Assistant:- Sarah Brown
Department of Computer & Information Science & Engineering (CISE)
UXD Project 1
“A more effective myUFL”
Submitted to CEN 5728 - UX Design
Group 3: Ram Kartikeya Boyini, Qing Li, Xiaolei Guo, Gaurav Pathak
10/11/2021
1

Table of Contents
Executive Summary 3
Introduction 3
Analysis of the Current Design 4
Usability Analysis 4
UX Analysis 7
User Research 7
Focus Statement and Interview Guides 8
Affinity Diagram 9
User Needs 14
Personas 15
A User Scenario 18
Storyboard 19
Proposed Design Solution 19
Brainstorming of Design Solution 20
Final Design Solution 24
The Rationale for Design Decisions 24
Conclusion 28
References 28
2

Executive Summary
This project aims to redesign myUFL, an online services portal for target users: faculty and
students at the University of Florida (UF). Our challenge will be how to make a more informative
home page with efficient navigation. We first analyzed the deficiencies of the current design,
which is insufficient in usability goals such as efficiency, learnability, and memorability. Users
find it takes lots of time to get familiar with the interface since the home page doesn’t provide
much useful information and all the services are embedded under the navigation menu, which is
hard to notice and find at first time.
Then, we set up user research to investigate what users care about most during their experience
of online self-services. We interviewed four graduate students from the class and developed the
affinity diagram according to their experience. Several user needs were concluded from the
affinity diagram, the key idea is that users would prefer self-services that can be accessed and
completed efficiently. Some of them also mentioned preference on aesthetics and concerns on
security.
Finally, with the user research as a guideline, we brainstormed and developed our redesign
solution: a new home page of myUFL, with informative announcements, services panels, and
widgets. The rationale for the design decisions that correspond to the user experience (UX) design
concepts (affordances, metaphors, feedback, mappings), and our user research were provided.
Introduction
MyUFL website is a portal designed for providing various online self-services for UF faculty and
students [1] . Each student/faculty uses the website for different purposes. For example; some might
use it daily for schedule, some might use it monthly/annually for insurance, others might use it for
training courses and the rest might use it for human resources (HR) related applications.
However, we found that the existing design of myUFL has several problems, such as not intuitive
navigation, and lacking useful information on the home screen. How to provide informative and
easy-to-use navigation will be our main challenge. To address this challenge, we analyzed the
deficiencies of the current design, then conducted user research to figure out user needs for an
online self-service.
Finally, we proposed a new design for the myUFL main page according to the analysis of the
current design, detailed user research, and principles of UX design. The rationale of the key
features in our new design shows the improvement of a more efficient and user-friendly interface.
3

Analysis of the Current Design
In this chapter, we focused on the analysis of the current myUFL webpage. Since myUFL is
designed to provide basic online self-service for the UF community, it is supposed to be helpful
with an interface that is easy to navigate. However, when we first went to this website, we found
the home screen (as shown in Fig. 1) is poorly designed, non-efficient, and hard to use.
In the following sections, we first reviewed several usability and UX goals of the interface (What it
should be?). Then we provided a detailed analysis of each goal and its related features, pointing out
both the deficiencies and advantages of the current design (What it is?). We found that although
the current version succeeds in safety, and can achieve a certain degree of utility, it has a lot of
space to be improved in efficiency, learnability, and memorability.
Fig. 1 Home screen(Hero/Landing Page) of myUFL (as of 10/4/2021) [2]
Usability Analysis
Regarding the function of myUFL, this website is expected to have usability goals of effectiveness,
efficiency, safety, utility, learnability, and memorability. First, it should be an effective tool for
employability, financial, and HR resources as a majority of its users use it every day. It should have
good utility, which means the user should be able to complete the services they need
(effectiveness, utility). Second, users entering the website should be able to do everyday things
efficiently. That means services should be easily accessed, and the operation should be easy to
remember (efficiency, learnability, and memorability). Finally, users’ privacy should be protected
(safety).
We carefully went through the website and analyzed how its features contribute to the following
relevant usability dimensions.
4

1. Efficiency
a. As shown in Fig. 1, most of the home screen is blank. Fig.2 provided a zoom-in view
of the home screen, where we can see that most of the provided information is
useless. (i) The “Pagelet Information” is a notification about disabling external
content sources, which is not relevant to most provided services. (ii) There are no
articles currently available in the “New User Help”, which makes this section
redundant and might be confusing for actual new users. (iii) Users looking for the
latest news have to click on the link in “UF News” and be directed to a new site:
news.ufl.edu.
b. The navigation button is hard to find at first. Users have to click on the “navigation”
button at the upper right corner to reach the menu shown in Fig. 3. Moreover, since
the navigation is too complex, including too many categories, it requires several
clicks to do simple everyday tasks such as making timesheets, which is lacking
efficiency.
Fig. 2 A zoom-in view in the home screen (as of 10/04/2021) [2]
Fig. 3 Interface after a series of clicks on the nav-bar of myUFL (as of 10/04/2021) [2]
5

2. Learnability
a. There is a whole elaborate pdf, user manual given to an initial user who’ll have to
use it for the first time. However, a separate document might give users a hard time
following the instructions. They have to open the document, read and back to the
interface and repeat this process until they complete the service.
b. The main menu contains lots of sub-topic, some of which look similar (Fig. 3), which
makes it hard to identify and find the services. For example, when I was looking for
a paycheck, I first went to the topic “Financials”, but it is located in “My Self Service
→ Payroll and Compensation”.
3. Memorability
a. Although the website now has a button navigating users to “Recent places” and
“My favourite” (Fig. 3), the items in the “recent” or “favourite online services” lack
an explanation. Users might not remember what exactly these services are and get
lost when they come back to the website after a long time.
4. Safety
a. The current version provides some verification processes to protect users’ privacy
and property. Fig. 4 is an example of a verification interface before user access to
the direct deposit. It requires the user to answer the security questions to verify
the user's identity.
Fig. 4 Verification interface before user access to the direct deposit (as of 10/08) [2]
5. Utility
a. With manual instruction or a detailed guideline, the user can complete the services
they need. No technical issues are happening, although the navigation is hard to
follow and the website lacks efficiency.
6. Effectiveness
a. Since the usability goal “effectiveness” is very general and refers to the
performance of an interface regarding what it is supposed to do [3] , we think that the
current interface does not have strong effects. The poorly-designed home screen
(Fig. 1) and the navigation menu (Fig. 2) might confuse. Users who got to the
website for the first time might have a hard experience getting everything done.
6

According to the above observation, we conclude that the current version performs well in safety,
has some utility and effectiveness, and can be improved in efficiency, learnability, and
memorability.
UX Analysis
In addition to the usability goals, we also analyzed the UX goals of the current design. We
considered the following aspects:
1. Enjoyable: The home screen (Fig. 1) is not a good-looking one, it doesn’t look like an
authentic website. The layout, text size, and color does not give users an enjoyable
experience. For instance, the font size in Fig. 1 is too small to read and follow.
2. Helpful: With the given instruction, users can access and complete the services.
3. Motivating: The poor design and the hard-to-use navigation menu make users less
motivated to use the website.
4. Adaptive and Responsive: The current interface is not smart enough to adapt to the size of
the screen in which the user is using the application. It must show all the features in and
across the devices. The navbar doesn’t show up on a portrait mode mobile device.
In a word, the current design is lacking enjoyableness, motivation and it can not adapt across
different devices.
User Research
To improve the current design of myUFL, we conducted the following user research. We mainly
focused on user experience on online self-services, exploring what users care most and what
factors affect their experience.
The following sections provided a clear interview guide, including our focus statements, interview
goals, and interview questions. Then, we shared what we learned from the interviewees,
developed an affinity diagram concluding several factors that might affect the user experience of
online self-services. Next, we extracted user needs according to the interview and affinity diagram.
Personas and scenarios were derived from our interviewee’s story and user needs.
7

Focus Statement and Interview Guides
Since myUFL is a website for online self-services, we narrowed down our interview focus to user
experience on online self-services. We started with learning information from users themselves,
such as their role in UF and their daily internet usage behavior. These questions are supposed to
bring interviewees to our topic. Then, we brought more questions regarding their online
self-service experience. Specifically, our second focus statement explored what information that
the interviewee is looking for during their experience on the online self-service websites, and the
third focus statement investigated the way that the users like to access the services. Finally, we
had a brief supplementary section that introduced the myUFL to our interviewees and asked for
their opinions on the product.
Following is a detailed interview guide. For each focus statement, we listed correlated interview
goals each. And for each interview goal, we came with several interview questions.
1. Focus statement1: Guage about the user and their daily internet usage behavior;
a. Interview goal: Introductory questions to make the user ease up and familiar.
i. Question1: What is your role at the University of Florida?
ii.
iii.
iv.
Question2: How much time do you spend online every day?
Question3: What online self-service do you use frequently?
Question4: Why do you keep using the self-service/ Why is it important to
you?
2. Focus statement2: Understand what information that users might want to use/learn on
online self-service websites;
a. Interview goal: Find out what information people are usually looking for when they
are visiting an online self-service.
i. Question1: Think about the last time you used an online self-service, tell me
your story.
ii.
Question2: What information do you want to learn when you are working
on the mentioned self-services?
3. Focus statement3: Understand how users like to access services;
a. Interview goal: Find out what makes it easy/hard for people to complete an online
self-service.
i. Question1: How much time do you spend on the services? (pick one from
previous answers)
8

ii.
iii.
iv.
Question2: Do you think it is easy or hard to complete the services?
Question3: What do you think makes it easy/hard to complete the services?
Question4: What are you currently doing to make this service easier? Did
you discover any alternative?
v. Question5: Has something unexpected happened if you are using the
application?
4. Focus statement4: Discover important insights about users’ behaviour when they interact
with my UFL.
a. Interview goal: Find out user's opinions about the website/ Finding user's critique.
i. Question1: Have you used myUFL before?
ii.
iii.
Question2: What was your experience with the process or the application?
Question3: What do you like or dislike about these other products or tools?
With the above interview guide, we interviewed our classmates Monica, Amit, Ganesh, and
Shreeya. All of them are graduate students in UF, the target users of myUFL webpage. During the
interview, each of our team members had a chance to host as an interviewer, and the rest were
taking notes and recording audio. All the recordings have been agreed upon by the interviewees.
Affinity Diagram
The affinity diagram for the application will be the arrangement to summarize the interview data
and will help in organizing data and ideas from the user needs and the user research process.
In Fig. 5, we grouped the sticky notes and named them as “About User”, “Online self-services”,
“Mandatory/importance”, “Effective Navigation”, “Information is Visible”, “Appearance”, and
“Security”. The first two categories told us information about our interviewee. The last five
categories are the features we extracted from the interviewee’s responses. They are mainly
focusing on factors that affect user experience on online self-services.
9

According to those features, we knew that:
Fig. 5 Affinity diagram we concluded from the interview.
1. Users have to complete some online services because of work/study requirements.
2. Users care about how to find where to access to service is important for users when doing
online services;
3. Display key information in the obvious area on the website is important for users;
4. Good colour scheme and contrast for the text and image on the website provides users
enjoyment experience;
5. Users care about account security.
Fig. 6-12 provided a zoom-in version of each segment of the significant features, where the text on
sticky notes is more readable. Specifically, Fig. 6 listed all the online self-services that the
interviewees mentioned. Fig. 7 introduced the role of interviewees and how much time they
usually spend online or on a specific online self-service. Fig. 8 grouped notes based on the
importance of online self-services. Fig. 9 clustered notes that clarifying users need effective
navigation to the services. Fig. 10 illustrates that the interviewee would prefer that needed
information is displayed on the webpage. Fig. 11 mentioned that some interviewees preferred the
good-looking appearance of the website. Fig. 12 mentioned the user's concern about account
security.
10

Fig. 6 Segment of affinity diagram related to Used applications.
Fig. 7 Segment of affinity diagram related to user information.
11

Fig. 8 Segment of affinity diagram related to the importance of online self-services.
Fig. 9 Segment of affinity diagram related to how effective navigation would help users to complete the services
12

Fig. 10 Segment of affinity diagram on displaying important information
Fig. 11 Segment of affinity diagram related to the appearance of the website
Fig. 12 Segment of affinity diagram related to account security
13

User Needs
According to features and factors we concluded from the affinity diagram, we summarized several
user needs from most to least important. Following the statement of each need, we provided
detailed explanations of why we draw this need from the affinity diagram.
1. Users should be able to access different services easily and quickly.
Time spent online, Effective navigation: Users as interviewed, don't want to spend time
navigating to their favourite, most frequently used places. From the affinity diagram,
interviewees mentioned that because most services are simple tasks, they don’t want to
spend much time finding the right place to finish the task. So, effective navigation and
visible information are important to them when doing online services.
2. Users need a more intuitive (knowing where to click) operation.
Effective navigation: More intuitive operation would be helpful for users to access
services. One interviewee mentioned the icons in Google form are straightforward and has
a good illustration of the function. Another interviewee stated that he wrongly clicked his
way to an undesirable page. So it would be better to provide clear and useful processes of
operations or better ways to represent the links and clickable areas.
3. Users need to be able to view important relevant information directly and clearly.
Relevant information should be visible: Interviewees mentioned that it would be easier to
use the service if they can learn the information they need quickly and directly instead of
servicing them a whole mixed platter of info, users prefer a-la-carte. Information of higher
priority can be presented upfront rather than hidden in some multi-level menus and
sections.
4. Users prefer good/pleasing aesthetics as the website is used frequently.
Appearance: Interviewees think the appearance of the interface largely affects some
users’ enjoyment of the website, and if they want to use the website again. One
interviewee mentioned she wants texts to be readable.
5. Users need to be able to know whether he/she is in an active session.
Security: Some interviewees mentioned that they sometimes experienced some
unexpected accidents when they are using an online service, such as they don’t know
whether they are logged in or out.
14

Personas
According to the interviews and the user needs we extracted from the affinity diagram, we
developed several personas. Fig. 13 is the sample sheet of a persona of one of our primary users;
This will also give an idea of the generic persona sheet which we floated among our team.
We considered a few common traits of the personas.
1. Common Highlighted Brand Affinities: Apple(Shivank, Candis, and Kenneth), Google,
Nike(Kenneth and Shivank)
2. Common Highlighted Traits of the personas: Serene, Subtle, Professional, and Timewise.
3. Common Expectations from the personas: A platform that is quick, effective, and
informative with an aspect of safety.
After we created four detailed user personas, we summarized what a specific user persona might
need. Each simple persona was then organized in a card format (Fig. 14-15), with a short profile
introducing the age and role of the character, a brief description of who they are in “About them”,
and an “Expectation” section showing their needs of the online self-service (either the campus
services or a general case).
We considered our primary personas as Other Personnel Services (OPS) students (Fig. 14). They
need to use myUFL to check timesheets and paychecks. Our secondary personas will be graduate
students (Fig. 15), for whom an effective online self-service would be helpful but not mandatory.
15

16
Fig. 13 Full version of a primary persona

Fig. 14 Our primary personas and their expectations summarized
Fig. 15 Our secondary personas and their expectations summarized
All the personas are developed by correlating user needs with the characters. For example, almost
all of our personas mentioned that they prefer an easy-to-use myUFL or other online-service
platform. Specifically, Jenny and Candis mentioned they don’t want to spend a lot of time on the
services. That is why they want an effective and learnable platform. In addition, Candis also
mentioned her concern about security; Jenny mentioned she would hope the campus services
platform could provide the latest news of University; and Kenneth mentioned his preference on
aesthetics.
17

A User Scenario
Based on our primary personas (Fig. 14), we developed a scenario for Shivank, an international
student who has to use myUFL to manage his schedule. We provided a detailed background of
Shivank and the motivation for him to use myUFL. Then, we provided a scenario showing how
the redesigned interface will satisfy his needs.
“Shivank is an international student from India. He is proficient with computers, he uses
the internet for 6-8 hours regularly daily. He is a tech geek, he likes to use different
websites and applications for his different needs. Since he is on OPS, he needs to use the
application, myUFL, to complete several self-services and enjoy his employee’s benefits.
For example, providing a bank account to direct deposit, viewing, and downloading the
tax-related forms.
“He wants the application to be a bit more fun, interactive and intuitive. The new design
provides him more than these and convenient ways to do his tasks that he can complete
more easily and quickly. Right now, frequently used services are displayed on the home
page. If he moves his mouse to these services, the cursor will change to a “point-up” icon
implying click here. So, he can access his total work time, monthly payment instantly. If
he wants to look for any service, he just needs one click. In addition to the frequently
visited services, other services are well-organized and displayed in a navbar. He now can
access them easily by scrolling down the page and checking the services name or can
search them directly and visit the intended page. As an addition, there is a section for the
announcement, where he can get the latest announcement as well as some reminders
about his work. Which can help him do his tasks on time. The current design looks modern
and well organized, which makes him have a very enjoyable experience. The greeting
shown on the top of the website gives him better ideas about his login status.”
In the above scenario, we provided an envisioned interface that satisfied Shivank’s needs.
Specifically, “frequently used services are displayed on the home page” and the “search” settings
satisfy the first user's need, implying that he can access the services easily and quickly. The
“point-up” icon and “one-click” setting provides an intuitive operation so that he knows where to
click (second user needs). All the important features, such as frequently visited services, the
“well-organized navbar”, and the latest announcements are displayed clearly, which is fitted for the
third user needs. The fourth and fifth user needs indicated that the user prefers a good-looking
webpage and they prefer to know their login status. Our scenario assumed a situation that the
“modern and well organized” design makes Shivank have an enjoyable experience with the
“greeting shown on the top”, and this redesign addressed his concern about the announcements.
18

Storyboard
According to our scenario, we made a storyboard to illustrate Shavank’s story (Fig. 16). We
bought a situation when he is busy with his life and has a lot of tasks to do. Previously, he
preferred completing these services online on myUFL. However, the myUFL website is so
confusing to use that he has to ask for help. He was told about the new design of myUFL.
Finally, he is satisfied with the new design in which he can complete the services quickly and
easily!
Fig. 16 Storyboard
In conclusion, the above user research provided us with some insights towards the redesign
solutions. The interviews were helpful for us to learn more about the user experience of online
self-services and the factors that might affect their experience. Then, the user needs concluded
from the interviews and the derived scenario implied several goals for our redesign.
Proposed Design Solution
With the user needs as a guideline, we brainstormed some design solutions. Every team
member came up with several redesign ideas and explained the rationale based on the user
needs and the interactive UX design concept. Then, we discussed and proposed the final
solution.
19

Brainstorming of Design Solution
Our first redesign version was shown in Fig. 17. First, we worked on improving the previous
interface shown in Fig. 1, making small changes to satisfy the user needs. Following are changes we
brainstormed:
1. Make the entire home screen more informative. The previous home screen (Fig. 1) doesn't
have many working links. In this version (Fig. 17), we added clickable sections to services
on the home screen to make the services more visible and thus, the home screen has more
affordances.
2. List the frequently used functions on the home page for quicker navigation. Users just
click once to access the services they often use (Green box 1 in Fig. 17).
3. Emphasize the location so that users can easily access the navbar (Green box 2 in Fig. 17).
4. Efficiently categorize and browse through the topics instead of long scroll-down menus.
Add conventional and intuitive icons to indicate functions for each topic (Green box 2 in
Fig. 17).
5. Make texts more readable.
Fig. 17 The first version of our redesign
20

Critiques on the first version:
1. Although popular services are listed on the main page, it might be hard for users seeking
uncommon services.
2. Will it be better if we posted the news on the main page instead of the side menu? “News”
hidden in the side menu seems to lack affordances since it is not visible (Red box 3 in Fig.
17).
3. We should add an indication of logging status according to the user’s needs.
Then, we revised the first design and sketched our second redesign (Fig. 18), which contained
these thoughts:
1. We thought of adding tiles (metaphor) in the central section of the page which are the
most desired links or services that a user might need from the website (Green box 1 in Fig.
18).
2. The circle in the top right section of the header could contain user information, a photo if
available, otherwise initials of the user to indicate logging status (Green box 2 in Fig. 18).
3. The left horizontal menu could replace the navbar from the old design, we thought of
incorporating a search bar and, on clicking any menu item, from the left menu bar, one
could see several options in the form of tiles, which could make the design look more
contemporary and interactive (Green box 3 in Fig. 18).
4. The right section of the design might contain quick links, which have been accessed the
most. The difference between the dashboard tiles and the quick action menu is that when
we select any other option (option other than Dashboard) from the left navigation menu,
the options in the center will change but not the quick actions menu. Which will help in
accessing quick actions or frequently accessed websites at any point in time (Green box 4
in Fig. 18).
21

Fig. 18 A sketch of our second redesign
Critiques on the second version:
The horizontal navigation menu (Green box 3), tiles of most desired links (Green box 1), and quick
links ( Green box 4) are confusing and seem to be redundant.
With the above discussion, we proposed the third redesign as shown in Fig. 19. We mainly made
the following changes:
1. Added an announcement section to provide the latest UF news. The announcement will
keep users posted on what happens in UF. The “News” now is visible (Green box 1 in Fig.
19).
2. Instead of simply providing quick links on the homepage, we added blocks representing the
main category of services, and users can go to each block for a specific service. The idea of
blocks is a metaphor inspired by organizing things in drawers (Green box 2 in Fig. 19).
3. Add a conventional point-up icon for the cursor to provide feedback to the user and
indicate “click here” (Green box 3 in Fig. 19).
4. We added a search bar on the top of the page with a conventional search icon so that the
user would be able to type their needed service and access it more quickly and easily
(Green box 4 in Fig. 19).
22

5. We added a greeting below the search bar, which indicates the login status (Geen box 5 in
Fig. 19).
6. We provided a calendar and a side section for the coming deadline so that the user can
manage their schedule more efficiently (Green box 6 in Fig. 19).
7. We added the UF colour-centre to the interface. We uniformed the text font of headings
and normal text respectively so that the font format is consistent.
Fig. 19 The third version of our redesign
However, after discussion, we found this version still has the following shortcomings:
1. Users have to click on the category block to access a narrow down sub-category and go
back to the home page to check other activities if they don’t know which service belongs to
what category.
2. The “To do” list is confusing. Firstly, users may not use myUFL to write their to-do list;
secondly, the write icon fails to map the text entry correctly ( conflict in location), so the
user may not know where to add things (Red box 7 in Fig. 19).
23

Final Design Solution
With all the above discussion, we proposed our final redesign as shown in Fig. 20.
Fig. 20 Final design solution of myUFL
The Rationale for Design Decisions
In this section, we analyzed the rationale of each feature in our final design. In particular, we
illustrated how the key features relate to the interactive UX design concept and how they satisfy
our user needs.
The Dynamic Announcements Panel is visible now:
We added an announcement and news panel as Fig. 21 (a) so that we can keep the user updated
about major happenings regarding the university.
As myUFL is visited frequently, and there is already an implementation regarding news and
announcements in the old version home screen, we thought of improving the form factor and
adding color cues and visual aid (pictures) to the news to make it more affordable. Added
conventional used icons (cues) so that important announcements can be distinguished. We
simplified the format of news, only providing titles and pictures as a concise abstract to avoid
overwhelming. Items can be clickable to redirect them to the news-specific link to know more.
People are now less likely to miss out on important announcements and news regarding UF.
24

This was incorporated from the brainstorming ideas and our team thought that having a much
prevalent working news panel would help everyday users to take note of all the important
announcements on the homepage itself. An announcement section with a title and pictures make
news more visible.
(a)
(b)
Fig. 21 Features in the final redesign. (a) Announcement, (b) The new services panel
The new Services Panel provides effective navigation:
The main menu is now a static panel (Fig. 21-b) on the home screen. We also added a search bar for
effective and quick searches.
We noticed that most of the Menu items that were segregated into groups only contained one or
two items when clicked. Instead of re-grouping, we listed out the contents according to their
usage, hence reducing the number of clicks and confusion regarding “What group to click on to go
to a specific task?” The new hamburger main menu is more affordable in providing effective
navigation with an explicit menu and a conventional search bar. Specific services are listed below
the usage category with smaller font size, with this constraint, the users would be able to
distinguish categories title and services name. People are now less likely to misdirect them to
unwanted URLs and can find services they’re looking for easily.
Our interviewees wanted a quicker interface. The main purpose of myUFL was to direct users to
particular services. This static implementation of the main menu will reduce the number of clicks
25

(In the old version, a user might have to > click on the main menu icon from a bunch of icons>
navigate on open-ended named buttons > then find their service every time!).
Widgets representing frequently-used services, provide quicker access:
​Now, myUFL has Widgets (metaphorically, inspired by sticky notes on a whiteboard) shown in Fig.
22 (a). Widgets can be pinned to the home screen to customize according to one’s needs and stay
in touch with the most important info.
We concluded that users visit myUFL for different purposes. Hence, widgets add customization to
the home screen and help a user to stay in touch with all the status updates regarding his/her
concerned services in an instant. Widgets can have shortcut buttons. Types of widgets one can
add: Time Reported, Latest pay, Training Status, etc. In addition, we kept the idea from our
brainstorming solution that the cursor will change to a conventional “point-up” icon when the
mouse is moved to the widget. This will give feedback to the user indicating where to click.
Adding to the effectiveness and personalization that our interviewees wanted, one can monitor
the hours, payscale range, etc from the widgets themselves.
(a)
(c)
Fig. 22 Features in the final redesign. (a) Widgets, (b) Color and visual cues on widgets, (c) Greeting
The Name and Greeting provide feedback for login status:
A nice greeting along with the login status of the user and his profile picture can give an essence of
personalization and a friendly experience. The greeting is also feedback to let the user know that
they are logged in.
26

This feature was incorporated for a specific case where an interviewee did not know if he was
logged in. He hence was trying to find a Login button even though he was already logged in to
myUFL which uses UF’s single-sign-on.
Extra Information Gained through other forms of feedback:
Colour cues and visual cues on widgets and buttons (Fig. 22-c) are mapped to the specific function,
so it might help the user navigate effectively and get updates on his metrics. For example, a
Progress bar in Fig. 22 (c) would help a user to get insights on how many hours are left from his
weekly hours. A weekly pay graph on the Latest Pay widget (Fig. 22-c) can help a user to get
insights about his pay and perform better next time. We also provide an option that Icons are
removed and Text is added to exactly know more about the items on the top tabs.
With all the discussed features, we could see how this redesign matches and satisfies the stated
user needs:
1. Users should be able to access different services easily and quickly.
We think that incorporating the services panel’s search bar, the panel itself, and the widget
tiles increase effectiveness, are easy, and provide quick access to a user’s services.
2. Users prefer to have a more intuitive (knowing where to click) operation.
The design which we came up with has mapping cues, and we reduced the usage of icons
wherever possible to add to the intuitive experience.
3. Users want to view important relevant information directly and clearly.
Important relevant information like news, other important announcements, widgets, and
the extra cues like graphs and progress circles we added can be effective enough for users
to view the relevant information in a more concise, direct(to the point), and clear way.
Users are less likely to miss out on important announcements.
4. Users prefer good/pleasing aesthetics as the website is used frequently.
We've improved the aesthetics, suiting to the brand affinities of the user personas we
created based on our interviewees. The created redesign is contemporary, subtle, and
professional.
5. Users prefer to know whether he/she is in an active session.
We’ve explicitly added the login status about the session which informs users about the
same. This shall add the aspect of User Safety to the website.
In Addition, to meet user needs, Users now would get a more personalized, friendly, and intuitive
experience.
27

Conclusion
MyUFL’s website is supposed to help gators working with UF and do their everyday time tracking,
viewing payments, scholarships, view benefits etc, all in one place, Effectively. When we first
visited the website, our team found several improvements that can be made to the website. We
conducted UX exercises, interviewed other users of the website, deduced the user needs and then
proposed a redesign of the website. We think that this redesign, if implemented, will be a better
version of the current website, adding to its effectiveness, efficiency, safety and aesthetics. As we
follow, “No design is perfect”, our redesign too might have some improvements that we might add
to the website in the future.
References
[1] https://welcome.hr.ufl.edu/getting-started/ufit/myufl/
[2] https://my.ufl.edu/
[3] Rogers, Yvonne, Helen Sharp, and Jenny Preece. 2011. Interaction Design: Beyond Human-Computer
Interaction. 3rd ed. Chichester, West Sussex, U.K: Wiley.
28