Matrix of the accountability-app market
Problem: It’s easy to make commitments, but hard to follow through with them; especially when we are responsible for our own accountability.
Solution: This app empowers people to keep their commitments by giving someone they trust the responsibility of keeping them accountable, via evidence and incentives.
Timeframe: The work described below took around 3 months to complete.
My Role: I was the sole designer and researcher, in charge of managing three user research projects, brand identity design, and all UX & UI design work. My team included one primary full-stack developer, and we used contractors for certain roles such as logo design and back-end infrastructure development.
Whimsical – Wireframes
Invision – Wireframe prototyping
Figma – High-fidelity mock-ups & prototype
Google Sheets – Analyzing quantitative user research data
NDA Disclaimer: There is some information that can't be shared until launch, around Q4 2020.
Early Market Validation
Before any designing began, the other co-founder and I entered a Tech Startup competition to validate the idea. We won 2nd place and came away with valuable research, so we decided to develop the app as a side-project, starting with the backend architecture (which was done by the development team). Once I began working full-time on this from September 2019, I designed the app's entire UX & UI from the ground up.
I researched our competitors in order to see where we fit in the market, and to identify opportunities for differentiation. I used a matrix that looked at how niche these services are, and how strictly accountability was enforced.
User Research Projects
I commissioned three independent research projects through the Riipen platform, which included:
Two groups of undergraduate psychology students from the University of Toronto, who conducted surveys
A master’s student from Queen’s University, who conducted both surveys and interviews
I explained to each group what I wanted to learn, and I managed the research over two semesters. This included a classroom visit, as well as email and video correspondence. A total of 255 participants were included, and 12 people were interviewed. Once the data was gathered, I analyzed it myself; and it was combined with our early market validation research (above) to create a user persona.
The data pointed towards a single user persona. However, new user research will be conducted after the app is launched, in order to validate this persona with real user data; and to expand user personas once we have more real data.
Notably, in one of the studies I commissioned, 100% of 106 respondents reported having habits/skills they wish to develop, and 96% had bad habits they want to get rid of. However, relying on self-reports or the “honour system” simply doesn’t work well, which is why things like New Year’s Resolutions are notoriously unsuccessful.
Before I was able to start designing, I created several elaborate UX Flows (such as the one pictured here). This was necessary to understand the core functionality of the app.
I decided to start with wireframes rather than pen & paper, because I had several ideas of concepts for the UI that differed slightly. After hundreds of wireframes were designed, I created a prototype in InVision.
The InVision prototype tested four tasks that embodied the core functionality of the app. The results from all three usability tests were overwhelmingly positive, with all of the tasks being completed, both easily and quickly.
All of the negative feedback was actually related to the explanation of one particular concept in the app. This was encouraging because copy is the easiest thing to update.
The Need for Branding
During my wireframing process, I also made a simple landing page design to try to get people to join a mailing list. While it did what we wanted, some people got the wrong idea about what our brand was about from this concept.
Even though the early mailing list strategy is appropriate, it was clear that without fleshing out more of the brand, I wouldn't be able to design a landing page that conveys our intended brand identity.
I began working with the other co-founder to establish our core values and what we stand for. Accountabull is meant to embody honesty, authenticity and ambition, while still being fun and social – not too "serious." With information like this (and many other branding decisions we made), I began exploring options for aesthetics. I experimented with colours depending on their associated meanings (purple for authenticity and ambition; yellow for an energetic feeling and friendliness, etc.).
Stylescapes & Logo
I created three very different stylescapes (curated explorations of a brand's visual language) for the other co-founder to decide on which design direction to pursue. #2 was selected.
I used #2 to help communicate our brand to a logo designer. After discussing dozens of variations, we finally picked the logo that best suited our brand identity.
Since the co-founder and I both like Smash Bros, I used the colourful characters from that video game to populate the app as if they were users. This made it engaging, and easy to contextualize the information.
I ended up making a design system while I completed the UI designs. This made it much easier to complete a landing page that actually communicates what we want to convey about our app, without sacrificing the early mailing list strategy.
What I learnt
Thinking early about branding and UX is not a bad idea — Both disciplines depend on appealing to users, so doing user research early was not only useful for making design decisions, but also for determining marketing strategies.
Don’t dwell on visual design in the beginning… you can change it later — Picking things like colours for an app is not to be taken lightly, but you shouldn’t dwell on it either. My strategy was to pick a palette that another app already uses; and once several screens had been designed, I experimented until I ended up with a palette that seemed to fit better with the brand.
My biggest challenge
As soon as I finished the wireframes, I attempted to create a design system to make things more scalable in the future. However, without having finished mock-ups to base important design decisions on, I struggled on how to even get started. Eventually I decided to just start designing the UI, until I had a sense of what elements would be included. Once around half of the UI was made, I was able to make the design system, which then made it much easier to make iterations that were consistent across the app and landing page.