M.A.P.

I was challenged to develop an App that can be used in both iOS and Android. 

I came up with a concept called M.A.P., an App designed for people of any age that love any type of art and entertainment and want to be updated on the last events around them.

 

Objective: Always be updated with Art Exhibitions, Plays, Musicals, Concerts and local Events. Offering promotions and options to buy tickets.

 

Tools: Sketch,  FlowMapp, Illustrator, InVision

UX/UI Design 

Case Study  | Career Foundry

2019

map phones header.png
02 Samsug mockup Music 01.png
03 Samsug mockup Art 01.png
04 Samsung Mockup Plays 01.png

MUSIC

I started by exploring the main features that the App would have had, this helped me to define the process the user would take to complete selected tasks.

 

Once the Userflow was decided I moved into sketching the Wireframes.

MAP - IPHONE X mockup 2.png

User Flow

Image 1.png

Wireframes

Image 2.png
Image 3.png
Image 4.png

ART

After I was comfortable with my sketches, I created first Mid and then High Fidelity Wireframes for both Systems. The wireframes have been tested to a small group of people for usability using InVision. The Task was to find an Event, adding it in to the favourite and finally purchase the Ticket. All were able to complete the Process.

iPhone 8 X.png

Android Samsung Galaxy S8 

Low-Fid Wireframes

02 - Galaxy S8 - Messagge.jpg
06 - Galaxy S8 - Around Me.jpg
09 - Iphone X - My Tickets.jpg
03 - Galaxy S8 - Select Interest.jpg
07 - Galaxy S8 - Around Me DETAIL.jpg
10 - Galaxy S8 -  Buy ticket.jpg
04 - Galaxy S8 - Enable Location.jpg
05 - Galaxy S8 - Home.jpg
08 - Galaxy S8 - Add Event.jpg
12 - Galaxy S8 -  Select date.jpg
08 - Galaxy S8 - Event.jpg
11 - Galaxy S8 -  Saved.jpg

IOS - Iphone X 

High-Fid Wireframes

02 - Iphone X- Messagge Page.jpg
03 - Iphone X- Interests.jpg
04 - Iphone X - Messagge Page Copy.jpg
05 - Iphone X - Home.jpg
06 - Iphone X - Around Me.jpg
07 - Iphone X - Around Me DETAILS.jpg
08 - Iphone X -  Add Event.jpg
07 - Iphone X -  Event.jpg
09 - Iphone X - My Tickets.jpg
11 - iPhone X - Select Ticket.jpg
12 - iPhone X - Select Date.jpg
10 - iPhone X - Saved.jpg

PLAYS

After i moved to the the Final Screens giving to M.A.P. a visual Identity, creating a Style Guide and appliying the features to both the iOS and Android versions keeping in mind both Guidelines. The final screens have been tested again by a small group of testers using InVision. The App received generally positive reviews, there were just few feedbacks regarding some pale colours that were originally selected.

07 Samsung Mockup HOME.png

IOS - Iphone X

Final screens

01 Iphone mockup .png
02 iPHONE X MOCKUP.png
02 ipHONE X MOCKUP ART.png
02 iPHONE X MOCKUP PLAYS.png
03 IPHONE X MOCKUP.png
04 iPHONE X MOCKUP.png
05 iphone x mockup .png
06 IPHONE X MOCKUP.png
07 IPHONE X MOCKUP.png
08 IPHONE MOCKUP.png
09 IPHONE X MOCKUP.png
10 IPHONE X MOCKUP.png
11 IPHONE X MOCKUP.png
12 IPHONE X MOCKUP.png
13 IPHONE X MOCKUP.png
14 IPHONE X MOCKUP.png
15 IPHONE X MOCKUP.png
19 IPHONE X MOCKUP.png
18 IPHONE X MOCKUP.png
17 IPHONE X MOCKUP.png
16 IPHONE X MOCKUP.png

Android - Samsung Galaxy s8

Final screens

01 Galaxy mockup 3.png
02 Samsug mockup Music 01.png
03 Samsug mockup Art 01.png
04 Samsung Mockup Plays 01.png
05 samsung mockups.png
06 samsung mockups.png
07 Samsung Mockup HOME.png
08 Samsung Mockup .png
09 Samsung Mockup .png
10 Samsung Mockup .png
11 Samsung Mockup .png
14 Samsung Mockup .png
12 Samsung Mockup .png
13 Samsung Mockup .png
15 Samsung Mockup .png
20 Samsung Mockup .png
16 Samsung Mockup .png
21 Samsung Mockup .png
19 Samsung Mockup .png
18 Samsung Mockup .png
17 Samsung Mockup .png

The biggest challenge of this project was designing for two platforms keeping in mind my Style Guide and the iOS and Material style guides at the same time.

During my Testing I made sure to find platform specific testers. This was very important for the Android platform because I was not familiar with it, not only the testers helped me on this with few comments but also going through and studying the Android Material Style Guides and looking at existing Apps and examples.

 

M.A.P. can still be improved with further screens, for example the different ways to book Tickets for Theatre or Concert, having the option to select seats on map, and also develop more the Event page and Setting page.

 

This project was a good way to test my problem solving skills, creativity, use of colours and sense of aesthetic.