Step 3. Branding.
With this concept in mind, our team worked on branding while developing customer journey maps. As the UX designer of our team, I advocated for more accessibility in our design, by changing our color scheme: our original branding idea was to have black type and icons on one of five background colors, but each type of task would always have only one color associated with it. It meant that user would have to look at (and read from) a screen with the same background color for a few minutes. In my opinion, our initial color scheme was too bright for it, so together at our team’s meeting we changed the colors to a different set. While designing the high-fidelity prototype for this app, I spent enough time looking at each screen and at the same background color so I can say that my eyes weren’t tired of the color palette that we ended up choosing.
Step 4. User flow.
While considering the needs of both of our personas (boomer Helen and millennial Marcus) I used the data from Marcus for our prototype. The flowchart for onboarding was an interesting exercise on error handling and possible decisions that user could make at different points. While working on the customer journeys I made an assumption that people might have a lot of doubts, especially at the point of background check (which is a whole different UX problem) and I compared this to other apps. While I have not yet found a perfect solution, helping people find as many answers as possible without making them to decide right away, is the right direction. There are now multiple ways that allow the user to achieve their goal. I would need a lot more user testing, including a real situation when people would really pay for the background check to confirm this.
Step 5. Low-fidelity screens, clickable InVision prototype. Iteration.
Based on this user flow I have created a low-fidelity prototype that eventually included 63 screens (not all of them different, some of them very similar to show specific taskflows in detail). I have created screens for the following taskflows:
- Onboarding (including test search, creating account, identity check step 1, identity check step 2 and start of background check step 3). I have made some screens for error handling and also gave users opportunity to stop the process at any time with an option to come back and finish it later as an ideal AbleApp experience requires detailed customization).
- Profile customization: schedule (time when available to volunteer)
- Profile customization: skills
- Search for volunteer opportunities
- Volunteer opportunity: add to favorites, share, apply
- Favorites, calendar screens
I have tested it on a couple of people (choosing potential users is easy because AbleApp is targeted towards a very broad audience). For example, I had to do two iterations on a schedule task flow. In my first version I had a matrix-type schedule screen that was inspired by what I saw in other apps, for example, Golden.
After user testing I had encountered an issue: my matrix didn’t allow to specify time periods in a very detailed way. I had time ranges (for example, 12pm-6pm, 6pm-12pm etc) but the user asked me what if they want to be available in some different time ranges. I rebuilt the same screen with dropdowns and after the second round of showing it to potential users I simplified the screen even more which was so much closer to our initial goal!
Step 6. High-fidelity screens based on brand guidelines.
When I was working on low-fidelity screen, our branding expert created 2 examples of app visual design based on the brand guidelines that she created. Our user flow consisted of 63 screens, and I have designed a high-fidelity prototype based on two screens that I was given. Of course, I had to make a lot of design decisions myself within our brand styleguide recommendations, and it was another challenge that I really liked about this project. Sometimes it is really hard to keep everything simple and monochromatic but I think we did a nice job of staying close to the initial concept that we had in mind.
As an addition to the project, I decided to learn Principle and animate some of the screens with this software. Such details are obviously very important to interaction design, although in case of Able I thought that it should stay rather minimal and smooth.