University Pages
Webpage Redesign
The Problem
Wellright is a company that boosts employee engagement with a personalized and purposeful wellness program. Their "University" pages gather information about the employee and present them with courses that will help educate them about health, wealth, and wellness that is pertinent to those results.
The aesthetic as well as usability of the “University" pages did not meet the expectations of the company. They wanted to create a page that was more user friendly and also looked less congested than their previous design. I was assigned to create a potential design for the new “University" pages that would be able to accommodate their desires for a cleaner and more usable design.
My Role
Since the company was planing on outsourcing for the redesign, I was given this task as a side project during my internship as a QA analyst. Seeing that this is a side project also meant that I would be doing all the research and design on my own.
My role was to undergo competitive analysis research as well as look into user feedback in order to see what issues were being stated by the users. Create user's flow based on the scenarios I devised, using this information to later review the user's journey and to also create a fresh UI that would make the content easier to digest.
Goal
The esthetic as well as usability of the “University Page” did not meet the expectations of the company. They wanted to create a page that was more user friendly and also looked less congested than their previous design. I was assigned to create a potential design for the new “University Pages” that would be able to accommodate their desires for a cleaner and more usable design.
Solution
In order to keep the consistency and create a variety of pages that would satisfy the goals placed, I had to first do research on all the pages the company had within its program. This was the first step in my approach to create a new layout to these "University" pages. Then with that research, the next step was sketching and implementing those designs on Adobe XD for testing.
Research
Starting off this project, I first had to do research. Although, this research was more in-depth than just knowing how the company's system operated. I first had to look at preexisting attributes for the company's “challenge” tiles.
Challenges were goals that the company would create for clients to do in order to receive points. The format for the tiles looked particularly different depending on which type of tile it was. However, whether it was a "Custom, "Default", or "Challenge" tile, the tiles on this "University" home page were completely out of date. Their functionalities did not embody any of the commonalities amongst the other classes of tiles.
The first step I decided to do was to analyze the up to date tiles and there functionalities, in order to make the new page's tiles coordinate with the other pages.
Sketching
University (Tiles)
Starting off this project, I first had to do research. Although, this research was more in-depth than just knowing how the company's system operated. I first had to look at preexisting attributes for the company's “challenge” tiles.
Challenges were goals that the company would create for clients to do in order to receive points. The format for the tiles looked particularly different depending on which type of tile it was. However, whether it was a "Custom, "Default", or "Challenge" tile, the tiles on this "University" home page were completely out of date. Their functionalities did not embody any of the commonalities amongst the other classes of tiles.
The first step I decided to do was to analyze the up to date tiles and there functionalities, in order to make the new page's tiles coordinate with the other pages.
University (Homepage)
The next step was to establish a homepage for the tiles to populate. I had to figure out a format for the information on the screen that was easily scannable and looked organized. Looking at the previous design, the content on the page would overwhelm the users by having too many tiles fill up the screen at any given time. However, on other pages there were grids setup for the tiles to make them easily legible and clutter-free. I took it upon myself to organize the challenges in rows to allow the user to take in less information at a time, but also allowing the user to really notice what was on the screen.
At the company there was a such thing called “Branding Color”, which was where the user could choose any color of their liking and that color would then be displayed in multiple locations on the company pages. Through user feedback, it was conveyed to the company that the clients really enjoyed this feature of the program. Knowing that, I then implemented the use of branding colors to my current design. It allowed the buttons to change to that color when the user hovers over it as well as other places in my design.
Once the format of the page was created and the tiles were placed accordingly, I then went to design the filtering system. Iterating through a number of designs,
I decided to go with a filter dropdown design that would include tabs within, when clicked it would become a dropdown menu of options for the user to select from. Each option containing a checkbox next to it so users could filter through the different university course categories.
I chose this design so the user could see clearly distinguish which category they were on as well as easily navigate in between each them (Implementing the branding color for the currently selected categories).
University (Through Challenge)
A user has 2 options in regards to taking courses. They could take one of their own volition or their company could assign them to go take a particular course (or courses), which would be assigned through a challenge. When this was the situation, the user could see their progression for completing this challenge through the university's "Through Challenge" page (This would be the page the user would be navigated to if they clicked on a challenge that dealt with courses). On this page I had to design a way the user received the information that was prevalent in regards to completing a challenge.
I decided to include a variety of functionalities to this page including, a challenge progress bar, a points display, and a completed courses section. This way the user could see all there was to see in regards to their progress within each challenge, how many points they would receive when done, and the courses they have already finished versus the courses that still need to be completed.
University (Within Course)
Once the user was within a course they would then be met with another screen which had a dual panel, one side having the content that the course dealt with. The other having a quick multi-question quiz on the topic, to see if the user was paying attention or not. The content would be on the left side, while the questions would be on the right side of the screen.
In the previous design, the size of the words for both the content as well as the questions were far too small. Since both these interfaces were on the same screen it was
hard for the previous design to allow the user to focus on a single side. Seeing this issue, I designed a button feature that would allow the user to adjust the panel sizes of the screens. I also added a "Back to Courses" button that would allow the user to go back to the university "homepage" or "through course" page. Previously there was no way that user could do so and that would force the user to go through the whole "select a course" process all over again.
I then gave each question a separate boarder so they could be spaced evenly amongst one another, making each question distinguishing from one another. Most of the rest of the plan was to figure out how to provide the content on the page in a way that would make it easily scannable and legible.
Designing
After sketching all the designs for each page, the next step was to create all of these designs (Using adobe XD).
Outcome
In the end, I created a new design for the “University Pages” that was more consistent with the other company pages. The designs had more features for the user that would help them gain more context about the courses and help them navigate from course to course. I ended up implementing a design that was more spacious, allowing the user to scan the page without being overwhelmed with the information on the page. Overall, I created a cleaner formatting of the pages, which allows the page to be more user friendly.
Learned
- I learned how to conduct in-depth research on the company site. Finding the commonalities and consistencies among the pages, in order to recreate those consistencies within the new redesign.
- I realized that a redesign isn’t simply just making a page look nice. I had to figure out how to design the page in a way that would make it more understandable to the user as well as making the site more user friendly.
Want to work together?
If you like what you see and want to work together, get in touch!