I tried to vary my user testing on those who attend a church and those who do not. The most helpful part of the user testing occurred after the video ended, when I was able to talk through each screen in detail and weigh whether they were needed and logical. These dialogues showed me that switching the order and adding screens was imperative and suddenly glaringly obvious. The truth is that I may have never seen this without user testing. Definitely, if time permitted, I would have done more user testing. (There was an expressed interest in developing the app, so we shall see what the future holds).
Creating the wires was much more time consuming than I originally thought. It was beneficial to have guides to ensure my margins and spacing remained consistent. Setting my typographic hierarchy was something that I tweaked repeatedly as new content was introduced which required me to rethink previously assigned sizes. Since my sketches were lo-fidelity (mostly), I decided to make my digital wireframes high fidelity. I felt it would be advantageous at this stage, since I had some specific content. Below are a few of the screens.
Another week and the end is in sight. This week was particularly refreshing for me as I was back in my comfort zone of design. The irony though is that I have never actually created a mood board for myself before this assignment. Yes, I have taught about them for years in my lecture on branding and the style guide, and even helped interior design students construct them digitally at the previous college I taught at, but never had I created one for myself. The process was a fun exploration of hundreds of images. The challenge was feeling a bit limited to what I was able to find rather than what I could envision. All of my images came from free stock websites. I was able to generate the mood board rather quickly using the transform and crop tools in Photoshop. I also used a grid framework to bring some balance to the composition. I will definitely consider it for my next freelance project, and it would be interesting to see if adding this process actually saved me time while in the design production phase.
Creating the style tile was a different approach for me. My goal was to try to compose a harmonious scheme that was friendly but not too vibrant or muted. This meant that an orange was needed but I still wanted to incorporate blues for tranquility as well. I selected a neutral off-white for the background and decided that keeping the body text in grey or purple would be friendlier on the eye than pure black. Putting the tile together affirmed that the icons that I originally chose would work well for the app. If time permits, I may explore the same styles in a different color scheme.
Well, here is my sample layout. Did the colors evoke the correct connotations (orange warm/friendly, blue tranquil/dependable)? Does the text show adequate hierarchy and contrast? I love white space, but is it too clean? Is there enough variety while maintaining unity? Does the personality of the brand come across clearly? Would it welcome repetitive use? Does it meet the needs of the broad demographic? These are all things that I am pondering now.
The last week has finally arrived and it has truly been an amazing class. Adobe Education Exchange has allowed me to experiment and break routine. This course has made me eager to learn and explore user experience in a comprehensive way. I really enjoyed connecting with peers globally and putting myself in my students' shoes in terms of time frames and new software applications. I currently teach is a 1000 level course, so it is always challenging to NOT add more to it, but I have been given permission to add Xd in the next roll out, and I can't wait! I am also going to experiment with Spark journaling for the campus version.
Prototype User Testing
I really tried to vary my user testing for this final stage. Four individuals were asked to give me feedback, each with their own area of expertise. 1. A Graphic Designer — this particular individual gave me valuable feedback that I will revisit at a later date. 2. A Pastor — this particular individual was caught up more in the overall benefit to the congregation and possibly needed more time to process each screen. I used Screenflow to capture this individual going through the screens rather than the camera on my phone. The video is posted below 3. A Programmer — this particular individual teaches database and visual framework courses. When I asked for his opinion, he was just impressed with Xd as a program and that became the basis of the dialogue. 4. A Usability Expert — this particular individual has done contract work for Applause and is a huge asset to my department. I normally brown paper bag my lunch, but yesterday I decided to go to lunch with my coworkers, and then serendipity—I ended up sitting next to this user experience expert by chance! At first, I was intimidated, but then jumped right into showing him my prototype on my phone as we waited for our lunches. The down side though, was that since my phone was being used, I could not record the session. I did, however, scrupulously jot down notes as he kindly tore my app to shreds. :) I have included some of these notes below under the subhead refinements.
- Remove congregation from the app name, it means nothing to the individual using the app that there is an administrative version.
- When selecting a church, first narrow the options by city or zip code along with a search radius.
- Block out the entire password with xxxxxx not just part, only credit cards and such will reveal the last digits.
- Be aware that 75% don't want to upload a profile picture. Leave the option of not having to available.
- Have the user enter their email twice since it is crucial to their account. Try and eliminate the chance of user error.
- Require validation with a confirmation email. This was after discussing why I wanted them to go through the sign up process for security reasons, rather than access immediately.
- Button states are not clear, the non-active state still looks functional. Grey out the text more, so that the user will not be confused.
- Add a small action calendar button to each event, rather than an add to calendar button at the bottom of what could potentially be a long scrolling screen and frustrate or be oblivious to the user.
- Move the welcome message up to utilize space
- Remove hamburger menu on the edit screen and place update at the top right to try and eliminate the user from potentially forgetting to confirm their changes.
- Consider two tiers of announcements that can be adjusted on the administrators end. This would prioritize content above the navigational options, but not block these main navigational hub selections.
Before and After Example 01
Before and After Example 02
Well, here is final prototype: https://xd.adobe.com/view/2e5d8566-1949-4426-9236-544f3d1b9a9f/ , below is a video as well. Thank you all again for making this course an amazing experience. :)