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

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

Android - Samsung Galaxy s8

Final screens

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.