November 2016 - April 2017
Mobile and Tablet
PROJECT OVERVIEW AND MY ROLE
The concept of FlowHQ evolved over the length of the project. Originally a stand alone application which ended up being merged with another project entitled "World Trade System". This case study will explore how that transition occurred from the initial concept stage, through research and design. I worked as a UX designer and researcher on this project, along side our UI designer and reporting to the Head of UX Design - Steve Morris.
The product itself was a simple one, a tablet and desktop app that would allows users (small business owners) to digitally track their finances, including incomings, out-goings, and current accounts. This would also allow future projections to be created, in 30, 60, and 90 day intervals, lastly it would also allow the user to create hypothetical scenarios to see what their changes would impact in a safe, isolated environment.
Myself and the UI designer started off by doing some research into the current market of digital finance tracking. Mint, YNAB, and Learnvest were a few of the products were looked into. Not only did we establish which features they shared, and didn't share through a Gap analysis, but also looked into the type of users that might use these features.
Image 1.1 Competitor research
As the UX design team we felt it was part of our roles to bring everyone up to speed, it can be difficult for UXer's to get a voice in the big meetings, so using any deliverable we can to help bring people up to speed is vital. However, due to time constraints we had to create some proto-personas, instead of doing research. We carried out a team workshop that included the director manager (as he had key first person experience with similar users), the devs on the project, the product owner, myself and the UI designer. I led the workshop and we brainstormed using the idea of the users point of view. One of our proto-personas can be seen below, we defined this user as a small to medium business owner.
Image 1.2 Persona
Once we and the team were happy with the proto-personas the next job was to take our feature requirements from the product side of the office, and start mapping out potential user flows. These were low-level, detailed flows, that included decision trees - this would help us determine how various states could work in the product, such as a user who was logged in, versus someone who wasn't. After a few whiteboard sessions, and at least 200 post-it notes we had come up with two different flows for the same journey, the main differences being that Flow A (In the photo below, its the top flow) had a very detailed onboarding process, where as Flow B allowed the user to visit the dashboard then be prompted at certain times to complete various stages of the onboarding.
Image 1.3 User flows
PROTOTYPING - PROTO.IO
After sketching and whiteboarding some wireframes we decided that as we wanted to test our designs, and we didn't have much time, we went with unmoderated testing. From this we then chose to digitise our designs in proto.io, as our unmoderated testing platform (TrymyUI) has a proto.io plugin. On top of this proto.io is a very powerful tool and I am well verse with it. We spent around 3 days building the two prototypes, one for each flow, into Proto.io. The next step was to create a script that the users will be able to follow, and answer relevent questions.
Image 1.4 Prototyping
USER TESTING (A/B) - TRYMYUI
With both wireframes designed in Proto.io and both scripts written with suitable questions. it was then just the simple procedure of copying the script into TrymyUI, dividing it up into suitable tasks. Each participant was given 30 mins max to complete the tasks. They were asked to speak out loud when thinking and answering the questions. Seven participants were used for each flow, with a total of 14 participants. Once the unmoderated tests were live, they were sent off and this allowed us to spend time on other proejects, such as World Trade System app, which we waited for the results to roll in.
RESULTS AND ITERATION
Once we had all the audio and screen recordings of the participants I went through them and noted down all the results under each of the relevant script sections. We then looked for common themes and repetition of good and bad points that users made throughout the journeys, taking note of where the user was when they made these comments, and what they were trying to do. At a high-level we found the following:
Users did not find the graph view the best way to visualise the data, as they felt too much was going.
Majority of users felt like the Flow A, with the onboarding up front, didn't mind given that information first.
Users also mentioned often that the icons used for the navigation weren't very clear.
We went through all the results and we ranked them in terms of a few factors:
Scope of the project - consulting with the product owner
Impact of issue on the user and their understanding of the product - User centred approach
Finally, How much time we had left before we had to deliver.
From this we came up with a second iteration, in the form of high-fidelity mocksups. More details can be found below.
HIGH FIDELITY UI DESIGNS
Once we listed all our design changes we needed to determine a UI style before we started with Sketch. We chose Material Design as Sketch has a lot of built in Material Design guidelines, the styling is also very clean and flat which went very well with the flow of the product. Below you can find some sample screens from the final product, the name was also changed to "CashSmart" and will soon be integrated with World Trade system.
Image 1.5 Sample UI designs
MOBILE COMPANION APP
So during the above the Head of UX was working on the mobile companion version of the desktop/tablet app. His process was very similar to the above, and we made it part of the overall process to meet regularly and make sure there was consistency between what I was designing and building, and what he was. Below you can see some of the mobile designs, they use the same module design but tweaked slightly for mobile performance and usability.