UX2UI notebook—SABRINa wood

WEEK 01

Background

I am excited about taking this course and training my brain to problem solve. I come from the world of graphic design, but feel a connection with UI and UX design as it gives intentional purpose to everything.

The Problem:

I currently attend a small 150-member church. Even with a church this small, the needs of the congregation and the building (built during the 1950s) are quite great. Many people miss the announcements because they show up late and do not take the time to read the church bulletin. This late demographic is potentially missing out on several opportunities to serve and be served.

The Solution:

The idea that I had was an app appropriately named “My Church App”. The announcements, which are usually time-sensitive, would appear on the home screen. The three main dashboard areas that I envisioned would be 1)Volunteer 2)Requests and 3)Schedules. For this course I will only be exploring one component, possibly volunteer or requests. The goal is to give users the opportunity to sign up for needs via their mobile device as well as to set calendar reminders on their phone. After exploring safety issues, I feel that it would be best to have two versions of the app—an administrator version and a congregation version. The administrator version would grant permissions and set up the events/information. Users could then, for example, choose to add a prayer request and then select levels of visibility, length of time and who can see the request, such as the whole congregation or just the Mom's group. All requests are filtered through the administrator to ensure that the content is appropriate. (Prayer requests are currently sent out via email through Wufoo, so no extra time would be spent on the administrative side).

Sample Personas

WEEK 02

Card Sorting

This week was challenging as my students wrapped up their courses, which meant more emails and grading than the rest of the term. The card sorting exercise was fun as the participants worked through it like a puzzle. Looking at the different ways that content is grouped and structured was definitely beneficial. One of the main take aways that I gleaned was that the scope of my project is GIGANTIC! Initially, I thought for this course I would visually show the Volunteer Section of my app, but after laying out what to include, I have since decided to switch to the Requests Section of the app and only use one path of it, such as requesting a counseling session.

Card Sorting Exercise Example 01

Site Maps

I decided to build my site maps in Xd, instead of Ai (my first love). It was challenging to not have all the tools that I soooooo love in Illustrator, such as the color guide panel, stroke arrowheads, and spell check, but I really loved not having to use the align panel since it is essentially built in to all the functions of Xd.

WEEK 03

Sketching

I am a firm believer in sketching with paper and pencil first. It gives one the opportunity to quickly explore options without committing due to the investment of time that the digital world requires. Also, the finished/polished look of digital wires can cause one to proceed, unaware that the layout is not user friendly and intuitive. It is best to fix problems while they are small in the beginning stages. If you watch the user testing video, you will see that I have gone back and refined my sketches after receiving input. One of the most valuable things was starting with the home screen announcements open. I moved them out of alphabetical order to not block one from seeing the four main navigation paths.

click to enlarge

User Testing

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).

Digital Wireframes

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.

WEEK 04

Mood Board

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.

Style Tile

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.

Sample Layout

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.

WEEK 05

Final Reflections

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.

Refinements

  1. Remove congregation from the app name, it means nothing to the individual using the app that there is an administrative version.
  2. When selecting a church, first narrow the options by city or zip code along with a search radius.
  3. Block out the entire password with xxxxxx not just part, only credit cards and such will reveal the last digits.
  4. Be aware that 75% don't want to upload a profile picture. Leave the option of not having to available.
  5. Have the user enter their email twice since it is crucial to their account. Try and eliminate the chance of user error.
  6. 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.
  7. 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.
  8. 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.
  9. Move the welcome message up to utilize space
  10. 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.
  11. 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. :)

Thanks!

Created By
Sabrina Wood
Appreciate

Credits:

Created with images by baldiri - "wireframe working"

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.