top of page

What's Mappin

Date

January 2018

Project Type

Software Engineering Group Coursework

Role

UI/UX Designer

Description

This software engineering group project required us to create a preliminary version of an application for a platform of our choice. What's Mappin' is a proposed application for Android mobile systems, which maps (pinpoints) clubbing events targeting university students across the map of London. I was responsible for the UI/UX design and delivered two user interface iterations, utilizing user feedback to achieve the desired result. 

Page 1: Intro Page

1_edited.jpg

Iteration 1

  • User is welcomed to our app

  • Login options: Facebook, Instagram, Google+, guest

  • Background is a blue clubbing image

Page 2: No Internet

2.1.png

Iteration 1

  • This page informs the user in the case of no internet connection

Page 3: Main Interface

3.1.png

Iteration 1

  • Google Maps API displaying the map

  • Search bar on top, in order for users to search for events based on name or area

  • Three bar menu on top left redirects user to main menu

Page 4: Search Results

4.1.png

Iteration 1

  • Events mapped as bubbles across the map, after user searches

  • When a bubble gets tapped, info about the specific event gets briefly presented

  • User can tap again to go to another page with specific information about the event and venue

Page 4.1: Detailed Event Info

5.png

Iteration 1

  • User gets redirected here after tapping for more info on an event

  • User has access to pictures of event venue

  • Event Price, date, time, location determined  

  • Venue Rating based on users’ ratings

  • User can visit event website to book tickets

Page 5: Main Menu

6.1.png

Iteration 1

  • Main menu comprises of filters, my account, promotion, wish list, help and about us sections

  • WM (What’s Mappin) exclusive offers are displayed on bottom of page

  • Map opacity reduced to 52% to emphasize on the main menu

  • All menu options are designed using a common red button format

Page 6: Search Event

7.1.png

Iteration 1

  • Filters are the first option on the main menu

  • Used to search for specific events, taking into account area, price, venue type and date

  • User must tap Apply Filters for the app to start searching for events

Page 7: My Account

8.1.png

Iteration 1

  • • User’s social network name is displayed

  • User can access privacy settings

  • User can view previously attended events

  • User can sign out of their social network profile

Page 8: Promotion

9.1.png

Iteration 1

  • User can input promotion codes in order to gain discounts and offers in different venues.

  • User must type the code in the white text box and tap submit to check the promo code database.

Page 9: Wishlist

10.1.png

Iteration 1

  • User can access a list of all previously saved events

  • User can select any event from the list to view options

Page 10: Help

11.1.png

Iteration 1

  • User can choose between voice assistance, contact-a-bot and FAQs

  • Voice assistance targets individuals with vision difficulties (accessibility)

Page 11: About Us

12.png

Iteration 1

  • • User can access a brief description of our work for this application

logo_edited.jpg
1.2.png

Iteration 2

  • Focus on simplicity, fewer colors, shorter text, in order to appeal

  • Background is dark grey and displays a red clubbing image with low opacity

  • Red is the secondary color

  • Added our app logo-two glasses cheering portraying the nightlife

2.2.png

Iteration 2

  • Adapted this page’s style to our new design colors and features

3.2.png

Iteration 2

  • Design and colour updated

  • Once map is displayed, local events are also displayed in the form of bubbles

  • Search bar replaced with date bar. We concluded that the common user is more likely to attend an event in the next few days. Search bar deemed unnecessary due to existence of the drop down menu of search filters next to the date

4.2.png

Iteration 2

  • Selected event bubble coloured red compared to the rest (dark grey)

  • Bottom screen part displays event info and also lets user visit the venue’s website, share or add event to the wish list

  • Event organizer rating included to help users decide

Iteration 2

  • Integrated all necessary event information in Page 4, making this page unnecessary

6.2.png

Iteration 2

  • Icons included next to every button making them more attractive

  • Buttons and background reformatted according to new design

  • WM Exclusive offers removed due to repetition and similarity to Promotion (both offers)

  • Each option lights up whenever tapped

7.2.png

Iteration 2

  • Filters replaced by Search Event

  • Included on Page 3 (Main Interface) on the top right of the screen

  • Quicker way of searching for events (no need to access the main menu) • Search results based on area, date and price

8.2.png

Iteration 2

  • User’s profile picture is fetched from signed in social network account. User can change/remove it if desired

  • User can edit the name they use inside the app, also fetched by social network account

  • User has access to past events, settings and can log out

9.2.png

Iteration 2

  • Insert Promotion Code button on top for the user to type in a promo code they possess.

  • All offers and discounts by venues available for the user displayed with venue images individually beneath

10.2.png

Iteration 2

  • Improvements in the design of the list

  • Larger buttons for every event

  • Images of venues included, with the date

11.2.png

Iteration 2

  • Icons for every help option added

  • Clearer background

  • For Host option included providing guidelines for event hosts

  • Online chat included for instant communication with the customer

Iteration 2

  • We wanted our interface to comprise of our app’s most necessary functions, therefore we removed this page

Download the full PDF here:

Below are the iterations from the pages I designed

bottom of page