Category Archives: Adobe Education Exchange

UX to UI Design: The Final Stage

For the final stage of our design process, we had to create interactive prototypes in PowerPoint. I found this part maddening, because I had to teach myself some Visual Basic in order to create the input fields, action buttons, and drop-down inputs.

You can view one of my usability tests on this final prototype below. Apologies in advance for the audio quality; my test subject has a naturally quiet voice.

(Yes, I offered him tacos at the end of the video as payment for his time.)

UX to UI Design: Creating a moodboard, Style Tile, and finished layout

This week we began to flesh out our design using a moodboard and Style Tile before creating our finished design mockup. I found the moodboard to be the most challenging aspect of this assignment. I mean, it’s a faculty portal for entering grades; what kind of mood could I possibly create here? But as I started doing the assignment, I came up with some creative imagery for the mood board: a seagull at sunset, for tranquility, and a statue of the Buddha because I want this to be a very “zen” experience for my users! Although I have been doing web design for nearly 22 years, this is my first time creating a moodboard. It was kind of fun. (I found a great moodboard template at Thanks, Lauren Schroer!)

For the Style Tile, I tried to restrict myself to web-safe fonts (Georgia and Verdana). Because this is a faculty portal, and will likely be accessed on older machines by some faculty members, I didn’t feel that web-embedded fonts were necessarily a good choice. Speaking of fonts, something weird is happening to the text on the menu buttons when I move from Illustrator to Photoshop. The text looks great in AI, but it looks off to me in Photoshop. I’m not thrilled with the buttons, and if I had more time to spend, I likely would have redone them.

If I end up teaching our new Human Computer Interaction course in the Spring, I plan to have students do a moodboard and Style Tile as part of their final projects. (A free Style Tile template was provided by Adobe Education Exchange.)

View my completed assignments here:

UX to UI Design: Usability Testing

For Unit 3 of the UX to UI Design, we were required to create wireframes and then conduct usability testing. My students know these assignments well, as I require them in many of my classes. Still, it’s good practice for me to be doing the assignments I expect my students to do.

Video of one of my usability tests is below. It was shot on a Kindle Fire and so it’s not great quality, unfortunately:

You can view my completed wireframes here: wireframes (Please note: you may have to download this file and view it, rather than viewing it in your web browser.)

UX to UI Design: Site Map

For Unit 2, I had to do a card-sorting task for information architecture and then create a basic site map. You might recall that we were previously asked to identify a problem. The problem I identified was faculty members’ having difficulty entering and submitting their final grades. I found this assignment to be challenging because of the nature of the problem I’ve chosen to solve. My issue is not so much a problem with the web site’s information architecture as it is with the interactivity and lack of feedback. A flowchart might have been a better choice than a site map in my case.

That said, here is my Site Map.

UX to UI Design Course on Adobe Education Exchange

Since I have 3 weeks off from teaching, I’ve decided to refresh my skills. I’m taking a free UX to UI Design Course on Adobe Education Exchange. We had to identify a design problem, which was not hard to do; many of the instructors in my department have been having difficulty with the school’s online grade entry system, so I am going to focus on this issue. We’ve started off creating personas. Here is the persona which I’ve created: Persona-David Torres

Although I have experience in the creation of personas, it’s sometimes good to go back and do the work which I expect my students to do. Many of my students have had to create personas for my interactive design courses. For me, it was a good reminder of what it’s like to be a student.