Villije app

villije

The team + my role

UX researcher and product designer | The cross-functional, agile team comprised of a product owner and 3 engineers. I created prototypes for evaluative UX research, end-to-end wireframes to validate MVP features, as well as the UI including a style guide.

The challenge

The founder had carried out an initial piece of research that validated the need for the product. I was given the challenge of figuring out the feature set for a minimum lovable product. I also had to work with the target customers to create an intuitive, accessible product within the constraints of the budget and technology.

The process

Initial concept testing
The founder and I had conflicting approaches to populating the product with activities. I thought that technology should be use to scrape data from existing sources so that customer time could be spend on the most meaningful purpose - adding reviews and building their Villije. The founder thought that there was such a need for the product that customers would be happy to give over their data and time to help build the product. The first round of research was conducted to validate these risky assumptions.

We learnt FOUR key things from this first piece of research. Firstly, customers wouldn't give us their email address if they couldn't use the app. Secondly, customers were OK, at this point, with creating activities within Villije. They also understood why we needed access to their contacts. Finally, I was unexpectedly told that the photo I used on the splash screen suggested that the app was for people on holiday.

Initial wireframes
All 5 of us involved in creating the product were working around our day jobs. It was critical to identify our core features for the MVP early on so that we could learn from real customers in a beta. The initial features/screens came from a prioritised list of hypotheses. And we chose to build a react app for iOS. The goal of this step in the process was to identify which features needed isolated evaluative testing. I also worked in Figma so that the engineers could leave feedback on the feasibility early on.

Evaluative research
The end-to-end wireframes showed that we needed to test the 'add activities' and 'circles of trust' features. The first 'add activities' journey was confusing. Only 2 of 5 customers could complete the task and it scored 21% for usability. All 5 customers were able to complete the task in the second version and it scored 96% for usability. The product owner and I worked iteratively on the 'circle of trust' feature before testing. As a result, all 5 customers that tested it were able to complete the task. It also got 85% for usability.

This step in the process featured a couple of other quick tests on the copy and language. I wrote the copy using the Hemingway editor to ensure readability. I worked on the UI as I was getting the UX right so the featured wireframes are at a higher fidelity than normal for this stage in my process. I couldn’t get templates for reporting my UX research so I created a template in Figma. Testing was conducted using Usability hub, Maze.design, and Figma (prototypes).

User Interface (UI) design
The product owner came to me with a name, product idea and colour suggestions. I worked with another (visual) designer to establish the base look and feel - logo, typeface, iconography - then iterated through several rounds of design to the finished styled guide. I advised the engineers to use as many native iOS components as possible to leverage the platform’s accessibility features. I used the Spark plug in and the WAVE tool to ensure that colours were sufficiently contrasting. Finally, I considered dexterity when placing primary actions on the screen to ensure most of these were in parts of the screen that are comfortable for single-handed usage with either hand.