Brief:
While working at the Digital Corps, we were asked by Ball State University to redesign the mobile app notification system on the school's student portal site used by its 22,000 students. 
My Role:
I was able to lead the process of this re-design and be the sole designer of this aspect of the project.
Original Solutions
Ball State's notification system had previously been a large block of basic text with a real lack or organization. Because of this, I felt our first issue was to section out all of the different types of notifications you could have, and how we could visually sort them. We finally came to three types of notifications- the first using the student portal to solve the notification, the second allowing the user to solve the problem within the notification drop down, and the third requiring the user to visit a linkable site outside of the student portal. Because some of the notifications could involve important financial information or issues that could place holds on your account, permitting you from signing up for classes, we thought it was important show categorize some notification as important. When classifying, we added in another categorization illustrated by the question mark, which would inform the user that they needed to answer something for the notification to disappear. After these details were hashed out, I created the design and updated the main page that reflected the newly re-branded Ball State.
Refractoring UI
This project was originally created two years ago, and was my first introduction to UI/UX design. While it was a good start back then, the overall result is truly upsetting now. So in Steve Schoger fashion, I decided it was time to do some updating using the knowledge I now have of the industry. 
Hierarchy
The typography lacked hierarchy which made it hard for the user to tell what was important and what was not. To fix this, I moved words like "Urgent" out of a paragraph of text and created a header style. I removed the use of bold text in full paragraphs as well to prevent the user from becoming desensitized to what is important. 

White Space
The original design was in terrible need of negative space. To remedy this, I removed the divider lines and replaced the separate notifications with a card style design on a grey background. This change really helped the overall design aid it communicating where one notification ended and where another began. 
Color
The original design is lacking in use of color to show clarity. To fix this, I grey to signify a primary action and red to signify a secondary action. I used grey to signify a primary action within the notification drop down as opposed to red, because I wanted to help the user differentiate between the primary actions on the main screen and those within the notification section. I also changed the text from a pure black color to a gray tone as well as to not compete with the colors of the primary and secondary actions. 
Iconography
The iconography was very unclear in the original design, so clean this up I reduced the size of the icons and placed them next to text that helped solidify the idea that something is "Urgent". Originally, I had also used a question mark to signify that the user needed to answer or respond to something, but after reviewing the design, I determined that this competed with the urgency header too much. 

Verify and Change Address
During my college career, I never had to actually change my permanent address. Because of this, I felt like the "Change Address" button needed to be visually represented as a secondary button with less importance. To verify my my very weak version user research, I asked my friends from college if they ever had to change their permanent address. Out of 10 people, only 1 had to change it so I went ahead and reduced the importance of that button.
Homepage Buttons
When looking at the first version of the home screen, the four red main buttons do not look clickable. In a perfect world, I would scrap this whole idea and of full screen buttons and try literally anything else, but I wanted to pay homage to the original concept and just fix the problems. So to keep with this idea, I created a skeuomorphic effect by creating a shadow at the bottom and a highlight at the top of each button. 
The notification "button" also does not read as a button at all. To fix this I made a drop down arrow that shows the user that it is clickable. I also replaced the bell icon with the number of notifications the student has. 
Close Button
I added a close button on notification cards that have a completed task. Beforehand there was no way for the user to remove a card from their notifications, so that option was added.
"Learn More"
Perhaps the most important change made on this design in the "Learn More" drop down. In the original design, the drop down arrow has no explanatory text, and even if you knew you could click that nondescript arrow for more information, it's placement looks like it is going to give you more information about the date and time the user received the notification. To fix this, I added some extra text next to the arrow to help with clarity. I also moved the icon and text right below the text you would learn more about if clicking this.
Some final changes involved the obvious need for consistent spacing around elements and text. Overall, this was a super fun and relaxing thing to do. There is something very cathartic about tearing apart your old work, and I cannot wait to come back to this same project in two years and think "Oh, its hideous again."

VIEW MORE PROJECTS

Back to Top