HERD
STUDENT NIGHTLIFE APP MVP
CLIENT
Clickonic LTD
DELIVERABLES
IOS & Android
Nightlife App MVP
MY ROLE
UX Research
UX Design
UX Testing
TIMEFRAME
3 Weeks
When approached by Clickonic, our team was excited by the prospect of producing an MVP for a mobile app that solved a range of university student nightlife “problems”.
Personal safety is at the heart of the concept. The hook to users are food & drink promotions, local event & venue listings and identity & age verification.
01. DEFINE
THE PROBLEM
Of course alongside getting top marks for every assignment at university, the biggest priority is the nightlife and a good night out with fellow students.
Being informed about local event & venue listings, cheap drinks promos, and not getting turned away by doormen because of age restrictions are factors that will make or break an evening out on the piss with the peers.
It’s also inevitable that sometimes there’s a panic when a member of the team goes AWOL…
Where are they? Are they safe? Could they have got into some kind of trouble?
It’s difficult being a student these days!
CLIENT OBJECTIVE
Produce an MVP for a mobile app featuring 3 core aspects of functionality/features…
User Identity & Age verification
Using a 3rd party API such as YOTI – www.yoti.com after a registration process, the app will display information relating to the users ID and age when required.
Local Listings & Promos
Clickonic have established revenue generating relationships with the likes of bars and clubs. Information about venues, events and money saving promotions needs to be clearly communicated to the audience.
Safety
Panic button / reporting features in case of unwanted attention and sexual harassment.
02. DISCOVERY
THE USERS
INTERVIEWS & SURVEY – 18 to 27 YEAR OLD MALES AND FEMALES
It was important to validate the project specification & assumptions supplied to us by conducting our own user research.
ID VERIFICATION USEFUL?
86% of the people surveyed said that they would find ID and age verification useful as it would mean not having to carry official documents such as a passport / driving license to prove their age.
EVENT/VENUE LISTINGS
80% Said they use nightlife websites and would find tailored venue and event listings very useful in an app to help plan a night out.
FOOD & DRINK PROMOS
80% Said that they would love to be informed about cheap food & drinks promos as getting value for money was high priority.
USER LOCATION TRACKING
100% Said it would be useful for the app to feature user location tracking so their peers would know where each other are on an evening out.
*2 FEATURE SUGGESTIONS BASED ON USER RESEARCH
The interviews and survey validated the project scope and suggested 2 additional features.
USER LOCATION TRACKING
When on an evening out, allowing a selected group of friends see in real-time where each other are on a map.
PUSH LISTINGS TO USER DEVICE
Listings could be pushed to a users device based on them being within a certain distance from a venue.
Not only useful for the audience, but would also be a great function for Clickonic to sell to their business customer base.
USER PERSONAS
I created 3 personas that allowed the team to become familiar with the intended audience and get into the users shoes. By using the personas we were able to understand and empathise with user frustrations, pain points and needs.
THE DOMAIN & COMPETITORS
WE LOOKED AT THE 5 MOST USED APPS & WEBSITES IN THE NIGHTLIFE ARENA…
It was a surprise to reveal that none of the other offerings combined all of Herds suggested features in one app.
AGE & ID VERIFICATION
PERSONALISED LISTINGS
PERSONAL SAFTEY FEATURES
…Making Heard a unique offering in the NIGHTLIFE app domain!
03. PLANNING
USER STORIES
The persona objectives and pain points helped with the user stories below.
SITEMAP v.01 BRAINSTORM
Based on the client spec and user stories we put together a high level sitemap that formed a foundation for initial UI sketching…
04. IDEATE & DESIGN
DESIGN SPRINTS
Using the first version of the sitemap as a foundation, solo sprints allowed us to sketch out a range of ideas for screen designs. Each members ideas were evaluated and critiqued as a team, where we were able to shortlist and further develop the ones we felt had potential.
This exercise also helped to further develop the sitemap, as well as uncover user flows for various features of the app.
LO-FI PROTOTYPE & TESTING
Using the first version of the sitemap as a foundation, solo sprints allowed us to sketch out a range of ideas for screen designs. Each members ideas were evaluated and critiqued as a team, where we were able to shortlist and further develop the ones we felt had potential.
This exercise also helped to further develop the sitemap, as well as uncover user flows for various features of the app.
ITERATIONS v.01
Some key takeaways from testing a lo fi prototype with 5 users.
LISTINGS SCREEN
ITERATION – Add a tab “All” to the listings screen.
SUMMARY – Displays an unfiltered list, displaying all Promos, Venues & Events in a logical order.
ITERATION – Resize listing card height.
SUMMARY – Adjust the heights of each entry in a list so that the bottom card appears to run off screen. In turn indicating that a user can scroll vertically to see more.
SAFTEY
ITERATION – Panic button needs a mechanism to stop it from being activated by mistake.
SUMMARY – Add the need for a user to use a gesture or swipe button in order to activate the call for immediate assistance.
USER LOCATION
ITERATION – Move user location from “Safety” screen/area to a suggested area called “Herd”.
SUMMARY – User Location features require changes/enhancing the sitemap because peer location tracking is dependant on users performing related actions such as: Create Group, Edit Group & Delete Group. From an IA, usability & find-ability perspective, using an area called “Herd” gives context and a logical place to group this content.
NOT ONLY DOES THE HERD AREA PROVIDE A HOME FOR PEER TRACKING FUNCTIONALITY, BUT WITH SOME THOUGHT AND PLANNING IT COULD ALSO BE A SPACE FOR ADDITIONAL CONTENT, FEATURES AND FUNCTIONALITY FOR A GROUP OF USERS IN FUTURE RELEASES… INVESTIGATE!
SITEMAP v.02
Enhanced sitemap developed through design sprint conclusions.
FEATURES LIST
Crucial in moving forwards and developing detailed wireframes, I put together a features list based on site map v.02 & conclusions drawn from the design sprint.
FROM SKETCH TO SKETCH – WIREFRAMES / SCENARIO / USER FLOW
Translating sketches, sitemap v.02 and features list into wireframes from which a Mid-Fi prototype was the created for testing.
WIREFLOW
05. PROTOTYPE
MID-FI PROTOTYPES
Sketch prototype functionality allowed the wireframes to be linked made interactive for testing. Tests revealed the need for some additional screens to enhance user flow and page findability.
InVision prototype with additional screens.
OVER TO U…I
Some visual hints to help with colour, visual style, card design pattern and general look and feel.
06. MOVING FORWARDS
Due to the tight 3 week timeframe assigned for this project, priority was given to working on UX design for features specified by the original client spec. However based on research, it’s apparent that the user experience would be further enhanced if the following features were incorporated in phase 2 of the Herd app development.
HERD & USER LOCATION TRACKING FUNCTIONALITY
A feature that all of our survey participants said they would like to see.
Discuss with developers:
- Can we use social media api’s to allow users to create a “Herd” (Group of members) for an evening?
- Member location could be shared with other members of the Herd
- Herd I.M functionality
- Herd voice/video call functionality
PUSH PROMOS & LISTINGS BASED ON USER LOCATION
By pushing relevant promotions and listings to user handsets based on location would not only be useful to users of the Herd app, but would also present revenue generating opportunities to Clickonic.