Loading

UX Design & Prototyping for Educators - Jorge Santiago

Welcome

Hello world! My name is Jorge. I'm an Instructional Designer in Seattle. This is my second Adobe Education Exchange course. Looking forward to learning Adobe Xd and how it can be used in education.

Week 1

  • basics of user experience (UX) and user interface design (UI)
  • identify users
  • identify user problems
  • functionality (apps)
  • visual design (apps)
  • 1st learning journal entry
  • 1st creative assignment
  • process of designing a simple app
  • building on principles of human computer interaction (HCI)

UX Design - the process of creating a product that is as usable, accessible, and as enjoyable for your users as possible.

Assignment #1 - UX Personas

My first attempt at building UX personas in Adobe Xd

reflections​

This was my first time using Adobe Xd. I was a little nervous to mess around with the interface, but found it quite fun and easy to use. I only managed to do basic text, images and pattern repetition for the iPad view, but I'm already curious about the other settings including exporting as more than a PNG. I think the biggest challenge for me is making things look visually appealing or stunning. I'm good with functionality but not that great at color schemes and page balance. Very excited to try out more features.

Personas Revised with user feedback

Ian persona revised
Myra persona revised

3rd revision

Ian - Proxima Nova font
Myra - Proxima Nova font

​Week 2 - A user's perspective. (flowchart)

I definitely learned a lot from this assignment. My original flowchart had a menu that focused on journal, artist, date, location and songs. I never envisioned a user being interested sharing pictures and videos from the concert as part of the music journal.

The revised music journal app focuses on the user's primary needs:

  • searching for artist, date, location/venue
  • results and tracking artist, date, location/venu
  • journal at moment of ticket purchase and at the concert
  • sharing photos, video, audio

My user also happens to be the head of UX at my company. It was very interesting listening to him sort out categories and making suggestions. I took a picture of the finished flowchart and made a revised flowchart that breaks the 2 main components apart (search/journal).

Original Flowchart (post-its)
Final Flowchart (Adobe Xd)

I also made key to remind myself the focus of the user experience:

  • Search - Results/Tracking
  • Journal - In the moment/Sharing
  • Suggestions - User feedback

Week 3 - Paper Prototype and Xd wireframe

​My user was a Content Architect with a background in Instructional Design, Graphic Design and Mathematics.

Doing the paper prototype was a lot harder than I expected. I was surprised at the amount of screens I had to add for the user to get through the experience. Although incredibly frustrating, I loved that I could iterate on the fly. I now understand the value of paper prototyping. It’s fast, quick and cheap.

Recording it was incredibly helpful. Editing the video was very time consuming, but worth while. I somehow managed to condense a 45 minute video to 10 minutes.

This whole experience helped me understand what the user was thinking, where he was stumbling, what was expected behavior.

Playing back the video helped me build the workflow in Adobe Xd. It’s very valuable to have the user narrate the experience out loud. I got good insight into user behavior. I’d like to test it out with at least 2 different users next time.

For my final wireframe I have 70 art boards with only 1 basic sample for each example. Having a search, friend and buddy feature adds a lot more complexity to this experience.

I feel like this is a good start. I wish I had a dedicated team to work with. This is very hard for just 1 person. Regardless, it’s a great exercise.

Week 4 - Style Tyle

​This assignment was surprisingly fun to do. I now feel like I'm actually in control of building the UI / UX for this app. I still don't feel comfortable with naming the app, but I like having a light and dark style tile. The mood board helped with selecting the colors. The hardest part was controlling the symbols once they were built. I don't like that if I change the color of one symbol in one page that it makes global change. There has to be an easier way to do this.

Dark Style Tile
Light Style Tile

Mood Boar Revision

Light Version 2
Dark Version 2

Week 5 - Mini User Testing

​This assignment actually took me a little bit longer than I expected. I had to pull back and do less screens and focus on:

  • Sign Up
  • Login
  • Edit Profile
  • 1 Friend page
  • 1 Final profile page
  • QR code scan
  • Artist page
  • Location page

The feedback that I got was incredibly helpful. Was able to get 4 out of 5 people to help me do the run through. I captured all 4 videos but was only able to upload 3 to Vimeo for today. I'll add the next video tomorrow once 24 hours have passed.

Feedback was overall pretty good.

Features missing were:

  • Email and email confirmation for sign up screen
  • A consistent navigation bar
  • Possible captcha for signup
  • Email verification
  • Sort friend activities by artist, location, date, time all in one navigational bar
  • Unify all lists
  • Use shapes to differentiate between artist, location, friend lists

User testing is great, but time consuming for both parties. I'm glad I did it and I value all my user's time and input. I think I have a much better idea what to do for my final assignment. I am grateful for Google Hangouts for allowing me to connect and share my screen with friends to test out the experience.

I did not edit the videos this time around.

User Test 1

User Test 3

User Test 4

Week 6 - Final Reflection

What I learned in this course?

  • What it means to create a User Experience
  • the importance of User Interface
  • Expected behavior is not always the same across users
  • User testing feedback helps with the design of the product
  • Getting 5 users to test your experience is not easy but incredibly helpful for developing a final app
  • Paper prototyping is cheap and highly iterative
  • To pay more attention to all the design happening around me in my daily life

On being a student

  • There is less time as a full time worker to do studies, but not impossible
  • Discipline is key
  • Iterate, iterate, iterate
  • Learning through failure and by doing is helpful to me as both a designer and user

What worked for me?

  • Adobe Xd helped me to bring my design and ideas to life
  • Users were able to give me better feedback with a working prototype
  • The course is just the right length for an introductory course

What was difficult?

  • Making the time to do user testing remotely
  • Building so many screens in Xd for possible user experience
  • Building in the dark, before feedback

New skills

  • I feel confident I can teach an introductory course on UX / ID
  • I would like to assign paper prototype and fast prototyping assignments to get students to experience quick feedback from their peers
  • These are great skills to implement for bringing a User Experience to life in a DEMO setting.

Final Revised Prototype

Here is the final revised prototype with user feedback.

Credits:

Jorge Santiago

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.