top of page
Create Your First Project
Start adding your projects to your portfolio. Click on "Manage Projects" to get started
UCCS Program Page Redesign
Project Type
UX/UI Design
Began
Late February 2025
Ended
May 2025
Role
Project Manager, UI/UX Designer
In my senior year UX Design Principles course, I led a team in collaboration with the lead UX Designer at UCCS to redesign the university's program pages. Over three months, we conducted online client interviews to identify pain points and understand the desired changes as well as establish a relationship with the client in the process. Using this data, we created a user persona that reflected the client's expectations, along with wireframes of the site layout. We then tested prototypes in class, iterated multiple drafts and final mockups based on peer and user feedback, and, upon project completion, presented the final design to the client, from sketch mockups to the individual prototypes, ending with a tour of the final product, all using Figma.
This project pushed my skills further into advanced Figma usage, client-centered design, and fast paced project management. Challenges here included reworking our user persona mid-project after conflicting client and instructor feedback, requiring a fast redesign under tight deadlines, and learning a new program during development. There was also an extreme change of process through user testing done during lectures which caused constant re-designs of the prototypes between back and forth versions until a balance was met between both usability and dynamic content. Through this experience, I also greatly strengthened my UX/UI design abilities, team coordination, and adaptability under pressure.
The slideshow below showcases key stages of the development process centered around both client feedback and persona needs using the areas of the prototype I worked with the most. Along with this, the button at the top of the page will lead you to the site links page to view the full individual project pages from wireframe to final product.
User Flow Paper Sketch 1
This is my first sketch based wireframe for our third user task, which was developed via feedback from the client. The client had suggested that the current site lacked additional information on application and individual program processes and details, so this became one of the user tasks I was in charge of and would sketch out. This particular version involved containers with descriptions and drop downs to indicate which type of application you selected, leading to the main application page after.
User Flow Paper Sketch 2
This is the second sketch done for the same user task, in an attempt to broaden out my ideas. This version involved a more container heavy version of the program page, swapping between text based information and images followed by the same drop down mechanic. The client had also informed us that she found the current site to be lacking in images and contained too much free floating text, so this second sketch represents the idea to fix that.
User Persona Initial Draft
This was the first draft of our user persona, which we had put together based off the data that the client had provided us. They were a non traditional student who was looking to get back into an education track after being deployed in the military, a common occurrence in Colorado, where the college is located.
After discussing with our professor, this model and Task 3 was scrapped in favor of a more relevant model based on extra suggestions given by the client in terms of favoring a more traditional student body that does make up a larger majority of the campus population.
After discussing with our professor, this model and Task 3 was scrapped in favor of a more relevant model based on extra suggestions given by the client in terms of favoring a more traditional student body that does make up a larger majority of the campus population.
User Persona Final Copy
This was the final copy of our user persona, which represents that traditional student suggested by our client within our demographic. This model far more represented our user tasks and design choices going forward, with my user task 3 being replaced by "How can I find more details about this program?" compared to "How can I apply to this program." We also adjusted some of the demographic and personal details of this persona based on the location in which this project was taking place, as it was likely that a new college student would not have a high end job and overall some of their choices may reflect both their work and personal positions.
Low Fidelity Wireframe: Part 1
This is a portion of the Low-Fi Wireframe translated over from our user sketches. In this case, this represents Sketch 1, applying more drop downs and nested information, now representing the updated user task as a result, with information such as an FAQ and Faculty List. This design was meant to cover a single page, with the drop downs pushing information as needed when expanded and then adjusted to reflect each individual program it was representing.
Low Fidelity Wireframe: Part 2
This is another section of our low fidelity wireframe, in specific user task 3.
Given this was a low fidelity draft still, the representation of the nested information being dropped down was represented using individual frames in Figma, with updated information depending on the drop down. Overall this wireframe still followed a "user flow" format as it was directed from frame to frame similar to how our sketches had been at that stage to better understand how to transition the design into a workable prototype.
Given this was a low fidelity draft still, the representation of the nested information being dropped down was represented using individual frames in Figma, with updated information depending on the drop down. Overall this wireframe still followed a "user flow" format as it was directed from frame to frame similar to how our sketches had been at that stage to better understand how to transition the design into a workable prototype.
High Fidelity Wireframe: Part 1
This is a screenshot from our high fidelity wireframe, which developed out from our low fidelity by adding in some basic color animations and the ability to swap from page to page in order to simulate user flow. This screenshot actually represents user task 2, which was also changed from showing condensed course information to much more spread out and detailed information for individual courses. As a group we all worked on this section, eventually developing the prototype that exists in the final copy, which is a carousel that swaps between specialization tracks in the degree.
High Fidelity Wireframe: Part 2
This is another example of the expanded version of user task 2, in which we developed individual cards for each course, which at first only extended to work within the course but was later changed to include course information. This section was partly developed by me, in which some ideas from my sketch user task were instead translated to this area, as they were a better fit to them there, one being the card with the academic catalogue and image placement next to it.
High Fidelity Prototype V1
Moving from our second wireframe, after some user feedback during our scheduled lecture times, we focused on creating the first iteration of the prototype page. Following the example page we were given for reference in this project we chose to structure our text based information within our design around the Biochemistry Program, which will remain consistent from here on out.
This page reflected some major user feedback from that lecture, which for my user task included adjusting the layout of the drop downs from vertical to horizontal, and creating a more "card" like structure for them. Along with this came a lot of the basic formatting developments from the university such as standardizing the text for links to be blue indicating they can be clicked on, as well as the formatting for the header of the page along with a navigation bar at the top. The faculty drop down was also reworked into a card which was designed to be imbedded with the page that actually contained the faculty, which within the prototype was able to be scrolled through.
This page reflected some major user feedback from that lecture, which for my user task included adjusting the layout of the drop downs from vertical to horizontal, and creating a more "card" like structure for them. Along with this came a lot of the basic formatting developments from the university such as standardizing the text for links to be blue indicating they can be clicked on, as well as the formatting for the header of the page along with a navigation bar at the top. The faculty drop down was also reworked into a card which was designed to be imbedded with the page that actually contained the faculty, which within the prototype was able to be scrolled through.
High Fidelity Prototype V1: Part 2
This is the expanded version of the first prototype layout page, in which, using the variant property and auto layout features on Figma, I created a working expanding and contracting accordion for this model. Given my team and I were new to Figma, we had not learned all the basics yet at that given time and could only work with basic layouts, hence why the accordions were so spread out, as I did not know how to hug the content so it would adjust on open. Though the formatting here continues to show across all the prototypes, with a small adjustment to the contact information as I was waiting to hear back from the client on how to structure them.
High Fidelity Prototype V2: Part 2
This is another example of the bigger changes made to the site in this iteration, in which the FAQ, that had been styled in a drop down format had now been cleared of that formatting and instead been given and open layout and card based format. As a whole the color formatting remained the same, but there was an additional question added as a showcase, which was regarding the faculty page. This felt like a good place for this information to still reside without taking up much of the page, since it would likely be a question asked of almost any degree by a first time college student like our persona.
High Fidelity Prototype V2
Following another round of user testing and feedback done for the first prototype, we began working on the changes from that feedback into prototype two. This iteration contained some of the most significant changes on my user task design, which included another rework of the cards section to layer them back to a vertical format but structure them away from drop downs as the information now felt too condensed to the users. Given our persona was a first time student, it was likely that such a minimalist and simple design would discourage them from the program under the assumption that very little effort was put into it.
As a result each card was given its own section with individual bars separating them, and all accordions removed. Along with this, user testing found the faculty window to be far too cramped given how much faculty was involved and felt it was far too small given the importance of it. So as a result, the idea I came up with was to remove the faculty page entirely in this design and replace it with a dedicated section for the department advisors, as they were not present anywhere on the main page, and our persona within task three was looking for extra program details, something that the advisors fit perfectly.
If you want to see this design change in more detail I would recommend checking out the Prototype 2 link directly on the site!
As a result each card was given its own section with individual bars separating them, and all accordions removed. Along with this, user testing found the faculty window to be far too cramped given how much faculty was involved and felt it was far too small given the importance of it. So as a result, the idea I came up with was to remove the faculty page entirely in this design and replace it with a dedicated section for the department advisors, as they were not present anywhere on the main page, and our persona within task three was looking for extra program details, something that the advisors fit perfectly.
If you want to see this design change in more detail I would recommend checking out the Prototype 2 link directly on the site!
High Fidelity Prototype V3
Once again, after user testing on the second version of the prototype, now nearing the conclusion of the project, a lot was changed based off of this feedback.
Overall users still found that the page was not as inviting as it could be for a prospective student, and so the first major change made in that area was to include much more welcoming text through all of the headings and sections, explaining not only what it is but also maintaining a high energy and friendly tone with the user to create a more lively page.
There was also a suggestion made to include something beyond just a header leading right into the next section, which led to the creation of a potential built in video window that was meant to show prospective students a rundown of what makes this particular program so special, which would be recorded by the chair of the department. This set a much more developed entrance to the page and would establish to the user that the program takes itself seriously and looks to assist the user wherever it can.
Overall users still found that the page was not as inviting as it could be for a prospective student, and so the first major change made in that area was to include much more welcoming text through all of the headings and sections, explaining not only what it is but also maintaining a high energy and friendly tone with the user to create a more lively page.
There was also a suggestion made to include something beyond just a header leading right into the next section, which led to the creation of a potential built in video window that was meant to show prospective students a rundown of what makes this particular program so special, which would be recorded by the chair of the department. This set a much more developed entrance to the page and would establish to the user that the program takes itself seriously and looks to assist the user wherever it can.
High Fidelity Prototype V3: Part 2
This was once again an altered version of the FAQ page, which was by far the biggest pain point of this project given reversions back and forth between a drop down and non drop down system, until a compromise was found within this particular iteration.
As a whole along with the subheading below, the individual questions had been split into their own accordions, which then had been given a the color code of gold specific to the university. Along with this, the overall interaction became more dynamic, with adjustments made to the states of the variants to change color and move a little when dropped down. At this point the link colors had also been changed from blue to gold, which was a mistake on my end as a designer as I had been referencing the dark mode version of the actual page, and swapped them over for coherence in design. This would change back in the final iteration.
At this stage I had also learned how to navigate Figma far more, and was able to add in the hugging option for each drop down, allowing for them to move when one was expanded above it. This compromise was just about the final version of this drop down, and most changes from here on out were cosmetic and color.
As a whole along with the subheading below, the individual questions had been split into their own accordions, which then had been given a the color code of gold specific to the university. Along with this, the overall interaction became more dynamic, with adjustments made to the states of the variants to change color and move a little when dropped down. At this point the link colors had also been changed from blue to gold, which was a mistake on my end as a designer as I had been referencing the dark mode version of the actual page, and swapped them over for coherence in design. This would change back in the final iteration.
At this stage I had also learned how to navigate Figma far more, and was able to add in the hugging option for each drop down, allowing for them to move when one was expanded above it. This compromise was just about the final version of this drop down, and most changes from here on out were cosmetic and color.
Final Prototype Page Design: Part 1
Following the final round of user testing done within two weeks of the project end date, a variety of changes were made both cosmetically and some alterations to layout and design. From this point forward I would strongly recommend looking through this final prototype, as many of the animations and effects cannot be shown through static images.
This is generally the same home page from prototype three, which had both a heading and a video at the start. The heading was given a slight rework to be more friendly, and the video was adjust in size and given a pop out when clicked on. For accessibility, and aligning with our client goals of such, we added in an option to open a transcript of the video, which all follows the color and design standards set by the university. Along with this the play and exit buttons were given hover over animations and color reflecting that standard as well.
This is generally the same home page from prototype three, which had both a heading and a video at the start. The heading was given a slight rework to be more friendly, and the video was adjust in size and given a pop out when clicked on. For accessibility, and aligning with our client goals of such, we added in an option to open a transcript of the video, which all follows the color and design standards set by the university. Along with this the play and exit buttons were given hover over animations and color reflecting that standard as well.
Final Prototype Page Design: Part 2
The research opportunities page remained the most untouched during user feedback, as most of it was minor changes such as swapping back to the blue color as mentioned before and adjusting some of the subheading wording.
Along with this, an image representing the research mentioned was added as a placeholder as the marketing department had no images left for chemistry based tasks. Following a review of the university webpage in light mode, using the variants feature again, which at this stage I had gained a proficient grasp in, I created a hover over effect in which the shade of the blue was changed and the text was underlined to avoid having permanent underlined text. This was however the only addition made to the page as it did not need more adjustment beyond this.
Along with this, an image representing the research mentioned was added as a placeholder as the marketing department had no images left for chemistry based tasks. Following a review of the university webpage in light mode, using the variants feature again, which at this stage I had gained a proficient grasp in, I created a hover over effect in which the shade of the blue was changed and the text was underlined to avoid having permanent underlined text. This was however the only addition made to the page as it did not need more adjustment beyond this.
Final Prototype Page Design: Part 3
Once again the "Advisors" page underwent some extensive changes following user feedback and brainstorming. From the perspective of our persona, they would be looking for all relevant faculty to the page, and adding it to the FAQ would make it easier to miss. So as a result the advisors page was changed to include a card that hyperlinked out to the entire department list, along with a small line of text and a heading with the head of the department and their contact information displayed as well. There were also some color adjustments made to the faculty cards to better contrast the headshots and also follow the formatting closer to the university, with gold text for black backgrounds and icons for emails. With those changes the page was finalized in this state.
Final Prototype Page Design: Part 4
The final version of the FAQ page was made through minor adjustments of mainly the dynamic aspects of the drop downs and the way it was formatted. Per recommendation from our professor, I changed the outline of the dropdowns to instead be a singular bar at the bottom in order to separate each heading from each other.
A long with this, the drop down visual was vastly reworked to follow the same standards the university had implemented into their drop downs. Upon highlight the plus icon would change into a light shade of the gold that is used, and then when clicked on, both the bar and plus sign would permanently change to the proper gold in this state to indicate it being open, along with a spin animation added to the plus icon as it was dragged out, with the reverse happening when it was closed to return it to its base state.
At this stage I had grasped a proficient scope of Figma and was able to make these changes throughout each dropdown, along with clipping content to cut off and become scrollable if multiple were selected and caused the information to expand outside of the section. This final change to the design was kept within the presentation to the client, which was found in line with their expectations.
A long with this, the drop down visual was vastly reworked to follow the same standards the university had implemented into their drop downs. Upon highlight the plus icon would change into a light shade of the gold that is used, and then when clicked on, both the bar and plus sign would permanently change to the proper gold in this state to indicate it being open, along with a spin animation added to the plus icon as it was dragged out, with the reverse happening when it was closed to return it to its base state.
At this stage I had grasped a proficient scope of Figma and was able to make these changes throughout each dropdown, along with clipping content to cut off and become scrollable if multiple were selected and caused the information to expand outside of the section. This final change to the design was kept within the presentation to the client, which was found in line with their expectations.
Final Prototype Page Design: Part 5
Following up with the previous comments, this is a static image of the dropped down variant of the FAQ, in specific, what the design looks like when hovered over during a drop down, also providing a highlight of color to indicate it can still be clicked on when in this state. This entire sequence is dynamic and was created using a multi stage variant within the prototyping aspect of Figma.
Final Prototype Page Design: Part 6
Finally, the "Department Contact Information" page was adjusted as well, to provide the same visuals that the research section did, in which all links were changed to blue and given a hover effect as well. Along with this, icons for both phone and email contacts were added to stay consistent with the design changes made in the faculty page and reflect was the college does within their own side. There was also a final addition made to the footer, which added in a "Apply Now" button along with some added text and extra information below it in order to tie into the contact section to give it a more natural flow, as this is likely the end stage of the user once they have gotten through the page entirely.
User Flow Paper Sketch 1
This is my first sketch based wireframe for our third user task, which was developed via feedback from the client. The client had suggested that the current site lacked additional information on application and individual program processes and details, so this became one of the user tasks I was in charge of and would sketch out. This particular version involved containers with descriptions and drop downs to indicate which type of application you selected, leading to the main application page after.
User Flow Paper Sketch 2
This is the second sketch done for the same user task, in an attempt to broaden out my ideas. This version involved a more container heavy version of the program page, swapping between text based information and images followed by the same drop down mechanic. The client had also informed us that she found the current site to be lacking in images and contained too much free floating text, so this second sketch represents the idea to fix that.
User Persona Initial Draft
This was the first draft of our user persona, which we had put together based off the data that the client had provided us. They were a non traditional student who was looking to get back into an education track after being deployed in the military, a common occurrence in Colorado, where the college is located.
After discussing with our professor, this model and Task 3 was scrapped in favor of a more relevant model based on extra suggestions given by the client in terms of favoring a more traditional student body that does make up a larger majority of the campus population.
After discussing with our professor, this model and Task 3 was scrapped in favor of a more relevant model based on extra suggestions given by the client in terms of favoring a more traditional student body that does make up a larger majority of the campus population.
User Persona Final Copy
This was the final copy of our user persona, which represents that traditional student suggested by our client within our demographic. This model far more represented our user tasks and design choices going forward, with my user task 3 being replaced by "How can I find more details about this program?" compared to "How can I apply to this program." We also adjusted some of the demographic and personal details of this persona based on the location in which this project was taking place, as it was likely that a new college student would not have a high end job and overall some of their choices may reflect both their work and personal positions.
Low Fidelity Wireframe: Part 1
This is a portion of the Low-Fi Wireframe translated over from our user sketches. In this case, this represents Sketch 1, applying more drop downs and nested information, now representing the updated user task as a result, with information such as an FAQ and Faculty List. This design was meant to cover a single page, with the drop downs pushing information as needed when expanded and then adjusted to reflect each individual program it was representing.
Low Fidelity Wireframe: Part 2
This is another section of our low fidelity wireframe, in specific user task 3.
Given this was a low fidelity draft still, the representation of the nested information being dropped down was represented using individual frames in Figma, with updated information depending on the drop down. Overall this wireframe still followed a "user flow" format as it was directed from frame to frame similar to how our sketches had been at that stage to better understand how to transition the design into a workable prototype.
Given this was a low fidelity draft still, the representation of the nested information being dropped down was represented using individual frames in Figma, with updated information depending on the drop down. Overall this wireframe still followed a "user flow" format as it was directed from frame to frame similar to how our sketches had been at that stage to better understand how to transition the design into a workable prototype.
High Fidelity Wireframe: Part 1
This is a screenshot from our high fidelity wireframe, which developed out from our low fidelity by adding in some basic color animations and the ability to swap from page to page in order to simulate user flow. This screenshot actually represents user task 2, which was also changed from showing condensed course information to much more spread out and detailed information for individual courses. As a group we all worked on this section, eventually developing the prototype that exists in the final copy, which is a carousel that swaps between specialization tracks in the degree.
High Fidelity Wireframe: Part 2
This is another example of the expanded version of user task 2, in which we developed individual cards for each course, which at first only extended to work within the course but was later changed to include course information. This section was partly developed by me, in which some ideas from my sketch user task were instead translated to this area, as they were a better fit to them there, one being the card with the academic catalogue and image placement next to it.
High Fidelity Prototype V1
Moving from our second wireframe, after some user feedback during our scheduled lecture times, we focused on creating the first iteration of the prototype page. Following the example page we were given for reference in this project we chose to structure our text based information within our design around the Biochemistry Program, which will remain consistent from here on out.
This page reflected some major user feedback from that lecture, which for my user task included adjusting the layout of the drop downs from vertical to horizontal, and creating a more "card" like structure for them. Along with this came a lot of the basic formatting developments from the university such as standardizing the text for links to be blue indicating they can be clicked on, as well as the formatting for the header of the page along with a navigation bar at the top. The faculty drop down was also reworked into a card which was designed to be imbedded with the page that actually contained the faculty, which within the prototype was able to be scrolled through.
This page reflected some major user feedback from that lecture, which for my user task included adjusting the layout of the drop downs from vertical to horizontal, and creating a more "card" like structure for them. Along with this came a lot of the basic formatting developments from the university such as standardizing the text for links to be blue indicating they can be clicked on, as well as the formatting for the header of the page along with a navigation bar at the top. The faculty drop down was also reworked into a card which was designed to be imbedded with the page that actually contained the faculty, which within the prototype was able to be scrolled through.
High Fidelity Prototype V1: Part 2
This is the expanded version of the first prototype layout page, in which, using the variant property and auto layout features on Figma, I created a working expanding and contracting accordion for this model. Given my team and I were new to Figma, we had not learned all the basics yet at that given time and could only work with basic layouts, hence why the accordions were so spread out, as I did not know how to hug the content so it would adjust on open. Though the formatting here continues to show across all the prototypes, with a small adjustment to the contact information as I was waiting to hear back from the client on how to structure them.
High Fidelity Prototype V2: Part 2
This is another example of the bigger changes made to the site in this iteration, in which the FAQ, that had been styled in a drop down format had now been cleared of that formatting and instead been given and open layout and card based format. As a whole the color formatting remained the same, but there was an additional question added as a showcase, which was regarding the faculty page. This felt like a good place for this information to still reside without taking up much of the page, since it would likely be a question asked of almost any degree by a first time college student like our persona.
High Fidelity Prototype V2
Following another round of user testing and feedback done for the first prototype, we began working on the changes from that feedback into prototype two. This iteration contained some of the most significant changes on my user task design, which included another rework of the cards section to layer them back to a vertical format but structure them away from drop downs as the information now felt too condensed to the users. Given our persona was a first time student, it was likely that such a minimalist and simple design would discourage them from the program under the assumption that very little effort was put into it.
As a result each card was given its own section with individual bars separating them, and all accordions removed. Along with this, user testing found the faculty window to be far too cramped given how much faculty was involved and felt it was far too small given the importance of it. So as a result, the idea I came up with was to remove the faculty page entirely in this design and replace it with a dedicated section for the department advisors, as they were not present anywhere on the main page, and our persona within task three was looking for extra program details, something that the advisors fit perfectly.
If you want to see this design change in more detail I would recommend checking out the Prototype 2 link directly on the site!
As a result each card was given its own section with individual bars separating them, and all accordions removed. Along with this, user testing found the faculty window to be far too cramped given how much faculty was involved and felt it was far too small given the importance of it. So as a result, the idea I came up with was to remove the faculty page entirely in this design and replace it with a dedicated section for the department advisors, as they were not present anywhere on the main page, and our persona within task three was looking for extra program details, something that the advisors fit perfectly.
If you want to see this design change in more detail I would recommend checking out the Prototype 2 link directly on the site!
High Fidelity Prototype V3
Once again, after user testing on the second version of the prototype, now nearing the conclusion of the project, a lot was changed based off of this feedback.
Overall users still found that the page was not as inviting as it could be for a prospective student, and so the first major change made in that area was to include much more welcoming text through all of the headings and sections, explaining not only what it is but also maintaining a high energy and friendly tone with the user to create a more lively page.
There was also a suggestion made to include something beyond just a header leading right into the next section, which led to the creation of a potential built in video window that was meant to show prospective students a rundown of what makes this particular program so special, which would be recorded by the chair of the department. This set a much more developed entrance to the page and would establish to the user that the program takes itself seriously and looks to assist the user wherever it can.
Overall users still found that the page was not as inviting as it could be for a prospective student, and so the first major change made in that area was to include much more welcoming text through all of the headings and sections, explaining not only what it is but also maintaining a high energy and friendly tone with the user to create a more lively page.
There was also a suggestion made to include something beyond just a header leading right into the next section, which led to the creation of a potential built in video window that was meant to show prospective students a rundown of what makes this particular program so special, which would be recorded by the chair of the department. This set a much more developed entrance to the page and would establish to the user that the program takes itself seriously and looks to assist the user wherever it can.
High Fidelity Prototype V3: Part 2
This was once again an altered version of the FAQ page, which was by far the biggest pain point of this project given reversions back and forth between a drop down and non drop down system, until a compromise was found within this particular iteration.
As a whole along with the subheading below, the individual questions had been split into their own accordions, which then had been given a the color code of gold specific to the university. Along with this, the overall interaction became more dynamic, with adjustments made to the states of the variants to change color and move a little when dropped down. At this point the link colors had also been changed from blue to gold, which was a mistake on my end as a designer as I had been referencing the dark mode version of the actual page, and swapped them over for coherence in design. This would change back in the final iteration.
At this stage I had also learned how to navigate Figma far more, and was able to add in the hugging option for each drop down, allowing for them to move when one was expanded above it. This compromise was just about the final version of this drop down, and most changes from here on out were cosmetic and color.
As a whole along with the subheading below, the individual questions had been split into their own accordions, which then had been given a the color code of gold specific to the university. Along with this, the overall interaction became more dynamic, with adjustments made to the states of the variants to change color and move a little when dropped down. At this point the link colors had also been changed from blue to gold, which was a mistake on my end as a designer as I had been referencing the dark mode version of the actual page, and swapped them over for coherence in design. This would change back in the final iteration.
At this stage I had also learned how to navigate Figma far more, and was able to add in the hugging option for each drop down, allowing for them to move when one was expanded above it. This compromise was just about the final version of this drop down, and most changes from here on out were cosmetic and color.
Final Prototype Page Design: Part 1
Following the final round of user testing done within two weeks of the project end date, a variety of changes were made both cosmetically and some alterations to layout and design. From this point forward I would strongly recommend looking through this final prototype, as many of the animations and effects cannot be shown through static images.
This is generally the same home page from prototype three, which had both a heading and a video at the start. The heading was given a slight rework to be more friendly, and the video was adjust in size and given a pop out when clicked on. For accessibility, and aligning with our client goals of such, we added in an option to open a transcript of the video, which all follows the color and design standards set by the university. Along with this the play and exit buttons were given hover over animations and color reflecting that standard as well.
This is generally the same home page from prototype three, which had both a heading and a video at the start. The heading was given a slight rework to be more friendly, and the video was adjust in size and given a pop out when clicked on. For accessibility, and aligning with our client goals of such, we added in an option to open a transcript of the video, which all follows the color and design standards set by the university. Along with this the play and exit buttons were given hover over animations and color reflecting that standard as well.
Final Prototype Page Design: Part 2
The research opportunities page remained the most untouched during user feedback, as most of it was minor changes such as swapping back to the blue color as mentioned before and adjusting some of the subheading wording.
Along with this, an image representing the research mentioned was added as a placeholder as the marketing department had no images left for chemistry based tasks. Following a review of the university webpage in light mode, using the variants feature again, which at this stage I had gained a proficient grasp in, I created a hover over effect in which the shade of the blue was changed and the text was underlined to avoid having permanent underlined text. This was however the only addition made to the page as it did not need more adjustment beyond this.
Along with this, an image representing the research mentioned was added as a placeholder as the marketing department had no images left for chemistry based tasks. Following a review of the university webpage in light mode, using the variants feature again, which at this stage I had gained a proficient grasp in, I created a hover over effect in which the shade of the blue was changed and the text was underlined to avoid having permanent underlined text. This was however the only addition made to the page as it did not need more adjustment beyond this.
Final Prototype Page Design: Part 3
Once again the "Advisors" page underwent some extensive changes following user feedback and brainstorming. From the perspective of our persona, they would be looking for all relevant faculty to the page, and adding it to the FAQ would make it easier to miss. So as a result the advisors page was changed to include a card that hyperlinked out to the entire department list, along with a small line of text and a heading with the head of the department and their contact information displayed as well. There were also some color adjustments made to the faculty cards to better contrast the headshots and also follow the formatting closer to the university, with gold text for black backgrounds and icons for emails. With those changes the page was finalized in this state.
Final Prototype Page Design: Part 4
The final version of the FAQ page was made through minor adjustments of mainly the dynamic aspects of the drop downs and the way it was formatted. Per recommendation from our professor, I changed the outline of the dropdowns to instead be a singular bar at the bottom in order to separate each heading from each other.
A long with this, the drop down visual was vastly reworked to follow the same standards the university had implemented into their drop downs. Upon highlight the plus icon would change into a light shade of the gold that is used, and then when clicked on, both the bar and plus sign would permanently change to the proper gold in this state to indicate it being open, along with a spin animation added to the plus icon as it was dragged out, with the reverse happening when it was closed to return it to its base state.
At this stage I had grasped a proficient scope of Figma and was able to make these changes throughout each dropdown, along with clipping content to cut off and become scrollable if multiple were selected and caused the information to expand outside of the section. This final change to the design was kept within the presentation to the client, which was found in line with their expectations.
A long with this, the drop down visual was vastly reworked to follow the same standards the university had implemented into their drop downs. Upon highlight the plus icon would change into a light shade of the gold that is used, and then when clicked on, both the bar and plus sign would permanently change to the proper gold in this state to indicate it being open, along with a spin animation added to the plus icon as it was dragged out, with the reverse happening when it was closed to return it to its base state.
At this stage I had grasped a proficient scope of Figma and was able to make these changes throughout each dropdown, along with clipping content to cut off and become scrollable if multiple were selected and caused the information to expand outside of the section. This final change to the design was kept within the presentation to the client, which was found in line with their expectations.
Final Prototype Page Design: Part 5
Following up with the previous comments, this is a static image of the dropped down variant of the FAQ, in specific, what the design looks like when hovered over during a drop down, also providing a highlight of color to indicate it can still be clicked on when in this state. This entire sequence is dynamic and was created using a multi stage variant within the prototyping aspect of Figma.
Final Prototype Page Design: Part 6
Finally, the "Department Contact Information" page was adjusted as well, to provide the same visuals that the research section did, in which all links were changed to blue and given a hover effect as well. Along with this, icons for both phone and email contacts were added to stay consistent with the design changes made in the faculty page and reflect was the college does within their own side. There was also a final addition made to the footer, which added in a "Apply Now" button along with some added text and extra information below it in order to tie into the contact section to give it a more natural flow, as this is likely the end stage of the user once they have gotten through the page entirely.
bottom of page