B. Craddock UX to UI 2017 Adobe Gen pro Class

Craddock—UX Means

I used Photoshop to create the Eyes and used the built-in mic on the Mac to record in Spark Video!

Assignment 1—Personas. I used Xd to create 2 personas based on the male and female high school students in my classes. (The photos are from Pixabay.) The key problems with apps, according to students, are glitches, too many pop-up ads, and long load times. I was able to identify that Blue is a favorite of both groups and I am thinking that the design of a Photoshop study app will be what I pursue for this series of UX tutorials. I will see what I can find out about the favorite apps the students listed to see what designs I may be able to incorporate into mine.

Class Male Persona
Class Female Persona

Assignment 2—Scope of the Project and Site Map. My initial thought was to design an app for students to easily access Photoshop ACA Certification study helps from their phones. I went through two textbooks: Adobe Photoshop CC 2015, Classroom in a Book, by Adobe Press, and Learn Adobe Photoshop CC for Visual Communication, by Rob Schwartz, also by Adobe Press to ascertain academic terms and subject matter. Students were given the terms and each Student Group came up with about 9 Headings for the Photoshop Study app. Some of the students had passed the Photoshop ACA already, some are still getting ready and have not yet covered all of the materials. They needed a little bit of coaching. I asked the groups if more headings or fewer were better for an app. A couple of comments indicated that more headings were better for a phone app. Below are the results for each group. I was a little surprised at some of the content for each group as some did not fit at all in my mind. We do teach Photography and Graphic Design, so I thought it was interesting that students placed some of the design concepts, etc., under the Photography Heading. Maybe that content should be duplicated in more than one subject Heading. It has been interesting to learn about how testing can create a better product over a broad range of items and services.

Group A
Group B
Group C

Site Map. I compared lists to create the major headings for the app. I created the Site Map in XD and converted the PDF to a .jpg for inclusion here.

Photoshop ACA app Sitemap

Assignment 3—Hand-drawn Wireframes; Testing; Xd Wireframes. I used the provided http://www.interfacesketch.com/ Android template to create the hand-drawn wireframes. I still do not have a smart phone, so I did some searching on the web for some examples of apps. One interesting site was appdemostore.com. I also went and played with the Apple phones at the wireless store nearby! The sitemap above guided the design; also the request to avoid glitches and long loading times.

App Icon-Screen 1
Topics-Screen 2
Scrolling Study List Based on Topic - Screen 3
Scrolling Study Window - Screen 4

Next was to test the wireframes. I tested and recorded 3 students. The student link with the suggestion was most helpful and I implemented the change: https://youtu.be/oSmkzM0BvCU

The 2 other student tests can be found here as well: https://youtu.be/7Rt3eg80z3g and https://youtu.be/geS-Mxo7gQM

I used Adobe Xd to tidy up the screens. You will find them below:

App Icon-Screen 1
Topics-Screen 2
Scrolling Study List Based on Topic - Screen 3
Scrolling Study Window - Screen 4

Assignment 4—Mood Board. Style Tile. Screen Design. The Mood Board was created using textbooks used in the classroom and a copy of an Adobe Photoshop Certified Associate Certificate. Many students preferred the color blue, so it will be a major color in the app design.

Mood Board

The Style Tile was created using the provided template with some modification. For smaller screens I prefer using a sans serif typeface, as I believe it lends itself to greater legibility and readability. The user buttons will be rounded rectangles. The study material will be on a centered lighter-color background.

Style Tile

The Screen Designs were more involved than I thought they would be! I am hoping to be able to save the design and use it in Xd! I used a blue background for each screen as this was a color favored by students. I made buttons for the first three art boards to help avoid confusion and add visual interest. Notice the gray color that has been used for the Output/Saving Files button. I am using color coding for each topic and have colored the background and buttons for this section of study with the same gray. The actual study material will have a white background to enhance readability.

Screen Designs

Assignment Five—Wiring the Prototype. Well, that was a learning experience as I was relying on the phone's back button to move backwards through the app. (I was able to wire most of the screens so that just by clicking on the window they would go backwards, but that wouldn't work for screens 2 and 1.) Thanks to Maria Sanchez for directing me to Terry White's youtube vid https://www.youtube.com/watch?v=wrMBuqjtjpk where I noticed that a couple of his screens had arrows at the top. I initially made the the arrows a bright yellow, but a user test revealed an accessibility issue, so I changed the color to red for maximum visibility.

Earlier in the series I found a wonderful Danksy Live vid https://www.youtube.com/watch?v=UgKmn08-j9Q that showed how to continue information on screens which was very useful for my CMYK Color Model content.

Final Wiring
Final App Appearance

The movie is available at: https://youtu.be/_WGeqs_vQMk

Link for app test: (Note: Only the Gray Output/Saving Files, and RBG and CMYK are being tested.) https://xd.adobe.com/view/04199b03-7e29-4d11-b7a0-e35261f42b62/

Final Takeaways: First of all, I guess I need to break down and buy a smart phone to keep up a little more—it has been difficult to decide on Apple or Android because I would like to experiment with app creation on the phone while avoiding excessive expense. I learned a great deal about apps in this class and it was really interesting and educational to view projects created by cohort members. This was my first app creation and now I am immensely interested in interface design. I stopped at a Barnes and Noble and noticed the interface on the NOOK GlowLight Plus. I noted that some of the features such as page numbers remaining in the section might be useful for the app I was working with. It has been interesting to learn about how testing can create a better product over a broad range of items and services. I ended up being confused about back arrows for navigation as I was relying on the use of the back button on the phone. Once I understood this, wiring of the prototype worked. (Thanks to those who helped me with this!) Learning about Adobe Xd was cool and I am planning to incorporate app design as part of the curriculum for second-year students.

Thanks, Adobe, for again providing a relevant learning experience! (I am hoping that the coding and gaming classes will be offered again.)

Created By
B. Craddock

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.