Role: Mobile point of contact, Project Manager, research, IxD. Jon Toney visual design
The Project owner came to me to update the Brand app. An iOS, Android and iPad app, that not only needed a refresh, and the goal was to change user behavior to year-round use.
Making the app more condusive to year round use. To utilize the data we had about a signed in user and show him/her things that were relevent.
I started with the shell of a design plan (design brief) because I had business requirements, lots of data from previous years, some retail persona's as a place to start.
I initially held an Ideation Design Session to get all of UX, and the stakeholders involved with the process. We used huge whiteboards with magnetic strips we had created in the UX Lab, so we had a lot of room to work. There weren't huge ideas that came from the session, but we were able to change the retail personas/behaviors and chose three for additions of mobile usage.
I wanted to focus on the call drivers and the year-round aspect as my areas of opportunity, but in order to be sure what we needed, I did a year experience map to help. I poured through tons of Omniture data, and other data the company had created. My goal was to design for the 3-5year, and then pull back what could be done this year.
At first, we wanted to try to create a promo area on the dashboard to show people what they could do with the app based on the time of year.
But, we didn't want it to be a marketing tool, so we quickly gave up on that idea.
While I love to sketch on pape, my prefered paper item is index cards. They are the perfect size for moile sketching, and if need be, they can make a first paper prototype. I love white boards too, but it doesn't take long before I am in Illustrator trying my hand and early wires.
Side note - There is a trend for no wireframes these days. I think it totally depends on the client, stakeholders and developers. I'm all for making things simplier. We have used an InVision App like tool, called Cycle, by KPMG. You create the screens and hotspots and create a prototype. I also have done HTML like UXPin and DivShot. If I need to work through interactions, and want to make sure I have thought it through and not do what is just easy, then I like all the iterations I go through with low to high fidelity wires.
Once I know my basic AI, I make one huge artboard and plot out each section. Then each page comes in. Here is my basic approach concerning wireframes:
First pass - determine which template I'll use and start with basic boxes and text.
Second pass - Varing levels of grey. The darker, the more important the controller, item whatever. This helps with user testing so the user isn't hung up on say, a call to action button being the same color as the other elements on the page. I can easily make a clickable PDF, Axure, or HTML prototype as this point, quickly.
As I make refinements and iterations go by, the fidelity goes up. For instance, if I have already defined the mobile standards all apps will follow, I go ahead an add that in. Illustrator has a fablous library feature that allows me to add text styles, graphics and colors so I can share them easily with the team. No more wondering if everyone is using the same colors, or styles or graphics. It makes branding a breeze.
We had an area that never changed on the dashboard to keep consistency. This area of 4 buttons were the same regardless of signed in or not. We kept the dashboard simple, but the botton 2 buttons (in white in the finished app) were what changed depending on, if they were signed in or not, if they had an Emerald Card or not and if they were retail or a digital customer. The app didn't previously have anything for the Emerald Card, but that was a finding from the experience map. If they had one, and feeling like this app was a "hub" for H&R Block, then to me, it was essential any Block app should show their EC balance and have them be able to check their refund.
The apps biggest challenge, to truely make it a good experience had something I couldn't control. The Sign In process of all the apps is controlled by GUA, and that experience was not fantastic. Like all apps that use a sign in, it seems that no one ever remembers their password. Yep, shocking. HA! Most of the one stars it gets is because of that and something else we can't control, the "Where's My Refund" portion. The IRS gets to decide whether you can scrape their site or not, and we thought we could show lots more info then we ended up being able to show. Oh, it looked super cool, but nope, we couldn't do it. I feel for those people who expected more.
Here are some images of what it looked like before, wires and finished product shots.
We created some standards with this we used for all mobile. First, we set standards for global things, like fonts, general buttons, colors, spacing. Then page interactions we a biggie for me. Lets use adding a document for an example. This was a huge interaction change. My goal is always to make sure the user knows where they are, so keeping them on a base page is key. So they see all their documents on that page, can delete, edit or add new from that page. The only time I take them to a new page is when they are adding a document. I only ever have them go one new page deep, then bring them back to the main page. For forms, inline editing as much as possible and if they have to fill out lets say an address, then one page in to fill it out, then back to the main page. The old versions would go multiple pages deep and the user didn't know where the heck they were half the time.
Over the time I worked on this app, we did 3 prototypes and user testing, making small adjustments along the way. The original Product Owner really had strong opinions of what he wanted. After he left, I would have loved going back and changing a bumch of things. They are likely going to scrap what I did because the new PO doesn't understand why it was native, hey it happens. There is a companion web version, so now they want to make it responsive. A hybrid app perhaps. There is only one issue with that, and there is a tax estimator that dot com has that they'll pull in, and they haven't made it responsive yet. Anyway, it was a blast working on this project.
We'll talk about iPad apps in another post.