Using UX/UI skills to update the UVU Architecture and Engineering website
We were asked to update an old outdated website into something great and easy to navigate
We needed to create a design that attracted the right users and marketed the right content. We needed to draw them in. We needed to trash the old.
Our Task
Our team was asked to redo an old, outdated website. This redesign was for the Architecture and Engineering Design department at Utah Valley University. A program that really should have a great website. There were very few things we had to keep. We were given a pretty clean slate to work with, which always helps with a clean, new design.
What we needed
The head of the department wanted the following on its website.
- They wanted the history of the program highlighted
- They wanted to make it look new and not outdated
- They wanted a place where people can come to look at the programs
After surveys and research, we added the following
- Website needed to describe career opportunities and pay
- Draw attention to the Architecture and Engineering Design program
- Contain important information that is easy to find
- Make it organized, simple, and easy to navigate
- Represent all programs within the department
- Make it look awesome
We all had different assignments. I’m sharing the parts I did in this article. In the end, I had to pick up slack from team members that were checked out. I think this is a college thing. No one was responding and we had a day to do half the project. A couple of us had to pull the whole project together last minute. I am glad I have learned some skills. We had a great final product.
Starting the UX Process
We sent out many surveys and were able to focus on their needs.
We decided that the website should be targeting College students, high school students, and parents of future students. So the three of us individually made and conducted a survey of those 3 groups of people.
I was able to get 60 responses in two hours one evening. I sent the survey to people in our three categories and had them send it to family members that were college students. I have nice neighbors that are always willing to help.
Here are some answers from the college-age group.
Our results as a group had similar results. People cared more about career opportunities and the success rate of the program than the history of it. This was a priority for the department but not the people we surveyed. So we changed it.
Understanding our Audience
We came up with personas. I created Frank that we used as our primary persona, helping us stay focused on our users and their needs.
Staying on Task
I created a timeline for our team to complete the project. No one cared or looked at it but I enjoyed learning how to do it.
Following the Design Process
After a lot of brainstorming, drawing, and concept models, we were ready for the wireframe stage.
Wireframes and Planning
We started with the wireframe process. I went through to see where we could use design principles that would make it a user-friendly website.
Our team created a Site Map to understand the organization and flow
Creating the Look
I created a mood board that helped create an updated look for our project. We wanted the users to feel like they could be a part of this amazing architecture and engineering future. We wanted it to feel high tech and new.
Surface Comps
I was also over the Degrees and Programs pages. I found great images and made it very user friendly. Highlighting programs and using progressive disclosure to keep it clean. Using Read More if more information is wanted.
Using Design Rules
We started the project with the Design Principles we wanted to incorporate. In the end, I went through, defined, and demonstrated where we used them.
The Final Testing using Prototypes
No one in our group knew how to work with Invision so I ended up making the prototype that our project called for. It is the best way for a client to see and interact with the functions of the website. We used this to test people's reactions and fix some problems. Looking good and ready to go.
Conclusion
There is a lot involved in the redesign of a website. I understood the scope, I understood the client, and I was excited about the visual possibilities of the Architecture and Engineering field. Most importantly, I realized that the process works. Understanding the user's needs, using design principles, following the design process, and final testing, gave us the map to a successful project.
Derek Balkman is a student in the Web Design and Development program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (Interaction Design) in the (DGM 2240 course) and representative of the skills learned.
