Kick-a-bout
General Assembly UXDI Project 3
The third project in the course was to re-visit Project 1 and develop to a high-fidelity standard.
The original app was designed to enable Rich, my fellow student and the target user, to find other people to meet and play sports with in an informal setting. When re-visiting the concept to develop further, I spoke to Rich to establish any further feedback from the low-fidelity prototype. In the course of the conversation, I established that although he had interest in other sports, he would primarily like to use the app for football.
Re-Visited Sketches

Having re-interviewed the user, I decided to re-visit the original idea and narrow the focus to a football focused app which would enable him to find other people to play with. This made the user journey simpler and the app easier to use.
From there I create a new sketched wireflows, to check both the user journey and the usability of the app.

The user was much happier with the changes, as it suited what he wanted from the app much more and tailored to what he was looking for.
Testing with the User

Having put the new designs into Sketch, I tested them with Rich — the original user — to understand how the new designs fit his aims and lifestyle. Feedback was that the app was more useable now, but that he would like graphics/icons, something simple a bit more engaging within the app.
He also gave useful feedback regarding some of the navigation elements such as adding a back button on the search page if he changed his mind; and that he would like to see the actual location of the event as he may know the location if it was nearby and make his choice based on that.

Moodboard & Colour Selection

When looking at the moodboard for the app I wanted to communicate the sense of it being a social event, that it was fun and outdoors.
From there I created a colour palette that was taken from a single image I felt represented all those things.

In line with accessibility guideline I tried to avoid the red/green combination from the mood board, and also colours that were to close in shade. I wanted a base of green to highlight the ‘outdoors’ theme, with some strong accent colours which were taken direct from the colours in the image.
Design Principles
My next step was to decide on the design principles for the app. Referring back to my original user interview notes, noted that Rich was concerned that it was primarily an informal event, that it was more about having fun than solely being about exercise and that it would normally be a spur of the moment thing, something he would so on the move or something he decided on the day.

Must be Easy — The key is convenience in both the use of the app and the meet-ups, so the design needs to be simple and straightforward.
Fun Abounds — This is the thing you do to get away from work, so using the app should feel like a break from the day job.
Be Flexible — Since it will be used primarily on the go, all design should be presented with that in mind. Quick conveyance of information, so as not to overload the user, and adaptive displays.
Evolutions in Design — Mid to High Fidelity Iterations
When I took the wireframes to mid-fidelity and started putting in the chosen colour scheme it was horrible.

The light option didn’t allow for any contrast, and even with a black typeface was uninspiring. It also really didn’t connect with the image I had chosen for the launch page as the tones were too different. I played with changing the launch page image to other grass or nature related images, but liked the richness of the greens in this one.

The darker green option was better, but still uninspiring, and din’t really get across the sense of outdoors that I wanted to convey. I didn’t even get as far as putting in highlight colours before I decided it didn’t work.
I decided to re-visit the colour palette, using the image i had decided to use on the launch page as a reference. This gave me richer tones to play with, while also using strong highlight colours for any call-to-actions.

As you can see in the wireframes below, using the launch image on all the main screens creates a sense of flow, while the highlight colours create a point of difference and add interest. A white background in the latter pages allows the user to clearly read and understand the information without distraction.

When presenting the final prototype to the user he was very happy with the result, and mentioned he would like to see it on the market.
Prototype

