UX/ Graphic Design Projects at The University of Alabama in Huntsville
Dr. Candice Lanius, PhD, Assistant Professor of Communication Arts, UX/UI Design at UAH
Abby is a rare UX professional for her T-shaped design skills. She is a specialized generalist with strong UI and graphic design skills. She can take user stories and quickly produce mockups and prototypes for a wide range of user testing scenarios. She can scope her projects to meet specifications and is receptive to feedback, leaning into the iterative and agile methodologies that produce valuable customer experiences.
The City of HSV Website Redesign
The Original Website Design (Before)
Our team uncovered many issues within the original website design. The logo doesn't stand out, the color choices are strange, the organization of information is confusing, and the overall user experience is cluttered to say the least. After a quick Heuristic Evaluation of the site, the team gathered to discuss initial ideas about how to approach the redesign process.
The images above show the original version of the city of Huntsville website.
My team considered both the graphic style and usability of this website during the redesign process.
The Redesign (After)
The images below represent the finished product of our redesign of the city of Huntsville's website, updated in order demonstrate Huntsville's growth to engage with users. As the population of Huntsville grows, it is vital to the city that its citizens stay informed about local news, events, and things to do in order to keep the local economy functioning properly.
The redesign of the homepage.
The redesign of the airport page.
The redesign of the art page.
The redesign of the directory page.
The redesign of the food page.
The redesign of the forum page.
The redesign of the parks page.
The redesign of the shopping page.
The redesign of the sports page.
The view of the HSV website redesign fully prototyped using Adobe XD.
Anxiety App Design for Ipad
Persona for Target Anxiety App User
The persona I developed for this project was named Zelda. She is a 24 year old student, part-time employee, and caretaker for her mother, Maple. Her mother's anxiety is really bad and requires several different intervention strategies such as medications, herbs, exercise, and fostering relationships. Zelda has mild anxiety herself, so it was important that the design would be able to help both her and her mother manage their anxiety levels. It was also important to develop an interface that makes Zelda's life easier and saves her time, since she is so busy.
The initial wireframe sketches I did to generate app interface ideas.
Wireframe sketches part 2.
The Anxiety App homepage optimized for iPad breakpoint size.
The Anxiety App herbs page optimized for iPad breakpoint size.
The Anxiety App daily plan page optimized for iPad breakpoint size.
The view of the Anxiety App interface designed using Adobe Illustrator.
Delta Boarding Pass Redesign
The Original Design
The original design (the image on the right) of the Delta boarding pass is cluttered, confusing, and forgettable. It is clear that this design has not considered the user's experience. Rather this design simply contains the relevant information and asks the user to figure it out. After closely examining each piece of content and conducting research to determine function and necessity, I generated a few ideas for how to improve this design for both user groups - the passengers and the airport employees. The aim for the redesign was to create something that would work both printed and digitally. A notable observation about the life of the boarding pass is that when it is printed, an airport employee hands it to the passenger in portrait orientation rather than landscape. This discovery challenged the standard of printed boarding passes - there was no reason to have them landscape oriented, especially when simply changing the orientation would enable the passenger users to more easily see important information that is often time-sensitive. Sometimes, the amount of time it takes to locate your gate on a boarding pass (like the one to the right) is the difference between making or missing your flight.
Sketching Wireframes to Generate Ideas
Refining the Strongest Sketch
As you can see, my design evolved a lot over the course of two weeks. I started by analyzing the existing product in it's original form and then did a little bit of research to investigate industry standards. Next I considered the target user group and mapped out their journey while utilizing an passport, keeping in mind all of the stresses on taking a flight and the need for clear, efficient communication.
I started the design process by sketching out the original design in a wireframe format so that I could more clearly visualize the elements and components within the boarding pass and evaluate their importance to create an effective hierarchy. Next, I sketched out 10 totally different design layouts using pen and paper to generate different ideas. After analyzing and discussing the paper wireframes with my team, we selected the strongest design of the bunch and translated it to a digital wireframe using Balsamiq software. I brought this design to the next standup and we discussed how to iterate further.
While discussing the user journey, we realized that the user is typically handed their boarding pass vertically even though the content is oriented horizontally. Further, users tend to keep their boarding pass in their passport, with a little bit of spill-over on the sides, since the boarding pass is bigger than a passport. I wanted to ensure that my redesign would protect the user's personal information (such as name and flight details) while still clearly displaying the brand to assist with Delta's marketing efforts.
The first iteration I designed in Adobe Illustrator after building all of the icons on the left, also in Illustrator. At this point in the design process, I chose to use blue and black for the color palette.
The Final Design
In order to both increase contrast and reinforce Delta's brand, I changed the color palette to the same red and blue that Delta's logo uses. This design contains all of the details relevant to a user's flight and goes even further to delight the user by adding information about the nearest restrooms and foodcourt to their gate, something that would set Delta apart from the competition and lead to more recurring customers.
