designfundamentalsbycharlotte

[designfundamentalsbycharlotte]

https://www.youtube.com/watch?v=TPrnSACiTJ4

[designfundamentalsbycharlotte]

https://www.youtube.com/watch?v=QrjEa1ZgMZE

[designfundamentalsbycharlotte]

https://www.youtube.com/watch?v=o-kpwYz-Exo

https://www.youtube.com/watch?v=o-kpwYz-Exo

[designfundamentalsbycharlotte]

Evolution

The brief required me to make an ‘alternative’ visitor guide to Manchester, celebrating its uniqueness, my understanding is I will need to create a travel app similar to existing apps aimed at people aged 18-25 (demographic). My app will be aimed at people from other people from the UK coming to explore Manchester and also people from overseas and will include a language change option. In the progression of this brief I will be testing out existing apps and conducting research on what the given demographic likes in an app to ensure for a good user experience. Going into this module I didn’t really have any idea what goes into making an app or how to make an app but now finishing the module I have discovered exactly that and that I really enjoy it and found that I was constantly wanting to work on it and add to it. Through having an understanding of other Adobe software, I was able to work XD and learn it pretty quickly to be able to produce a functioning travel app as requested by the brief for this module. If I would say there is anything to improve it would be the amount taught, due to poor attendance to the lectures most weeks it was just continuing with work instead of being taught new stuff because there was no point due to the numbers of people that were in. If I were to do the module again, I would try and learn more about XD and other prototyping tools so that I could create the best app I could.

[designfundamentalsbycharlotte]

Experimentation

Week 8

Using XD to mock up my app I started by going though the processes and added in some extra pages to my app (login+sign up) to make it seem more realistic. 

My inspiration for the style of my app came from an YouTube video that I watched as I thought that my designs looked childish and I wanted a more professional  look to my app.

Paper Wireframes

Basic Wireframes

At this point in the making my tutor suggested that I did a dark version too as it is a cinema app and would be more fitting so I will duplicate this set of wireframes and use it for a light and dark version of my app.

Adding in Colour

So far

Adding in Images

Week 9

Before final touches

Light

Dark

Personally I prefer the light version but I guess the dark version is more appropriate to my app as it is a cinema app and cinemas involve a lot of dark as a means to reduce distraction.

I am happy with the way this looks at the moment but there is the ‘Box Office’ pages which I think don’t quite look right and don’t fit in with the style of the rest of the app, I will continue to make tweaks to these pages. 

Working App

Week 10

Now that I know my app works I wanted to make it a little more interesting so I revisited my load screen idea and tried making it in XD which was successful this time!

Loading Screen Animation

I had already done this using Photoshop and Illustrator but after exporting what I had done it would only work on a web page so I decided to try and make it in XD.

Wireframes

Adding In Assets

Light

Dark

Prototype Links 

Style Sheet

Also for my app I used the font ‘Gibson Regular’, ‘Gibson Light’ and ‘Gibson Semibold’ for all the text included in my app.

Week 11

User Journey

Now that I have the foundation for my app I need to go through one user journey (at least) at it is part of the brief. Out of all the journeys I could’ve done I decided to expand on the ‘Cinema’ page.

Wireframes

XD Wireframe

Adding Colour Scheme 

Updated Links (Including User Journey)

Functioning

After doing this I had an idea that would count as an extension and an additional user journey through this one.

Papaer Wireframes

XD Wireframes

Adding Colour

Functioning

Week 12

Extra Work

Recently we saw a presentation by a year 3 student doing the same course, about an app and it had a part on it that he had done before his app would load that I thought looked really good and I wanted to include onto my app.

What he included was an actual iphone screen in which the app was downloaded and then launched from. To do this I am going to create and icon for my app and take a picture of my current phone screen.

My Icon

I don’t really like this icon as I think it looks cartoony with the gradient background and the actual icon itself.

I much prefer this Icon compared to the other, the changes I have made to this one is altering the image and getting rid of the gradient which I think makes it look much better than before.

Now what I need to do is add this icon onto my homepage along with my app name.

My phone Screen

Before adding In Icon

After Icon Added (in Photoshop)

Implemented

Functioning

Alternate Login/SignIn Pages

In addition to the home screen start up I also decided to expand a little on my login and sign up pages as I have a section on which allows you to signup/login using either Facebook or Google. To add in this addition I will edit what it would bring up on any other app.

Original

Edited 

Working

Updated Sitemap

Marketing Materials

To help promote my app I created some promotional materials which would be used to present to potential clients.

[designfundamentalsbycharlotte]

Ideation

Week 5

Tutor Progress Review

As we are at week 5 of the brief my tutor decided to see where we’re at this stage, in this session we spoke about my ideas and where I was at for both the Design Fundamentals (travel app) and Digital Innovation and Technology (mosi promotion) brief.

It was here that thanks to the help of my tutor that I decided to change the name of my app from ‘MovieTime’ to ReelTime. My tutor also suggested that I should look into old fashioned cinema to get my inspiration and this is what I will do for my logo and look.

Research into Old Cinema

After conducting this research I had decided that this is the look that I wanted for my app which made me start to think about potential logos too which were related to the research and imagery.

From here I started to think about what my app would need to include.

This then allowed me to create a sitemap for my app showing how things join together.

Initial App wireframes

These are the initial wireframes that I created for my app, each page has 3 different styles as when I first started drawing the first page I was getting multiple ideas for different layouts for the same page so I decided to do multiple that I could then narrow down to 1 at a more finalising stage.

Loading Screen

My idea for the loading screen was that the reel of film would continuously wind in until the app is fully loaded.

Layout 1

Layout 2

Layout 3

Type Exploration for Logo

Thinking about logos

When I first started thinking about my logos I had come up with several potential ones that I had decided to make and test in Illustrator after drawing them on paper.

As my app is called ReelTime I thought this logo to be most appropriate for my app name. I can now develop and experiment with this initial logo to get a finished logo.

This is what I have chosen for my logo, by adding the text in with extra film was taking it a step too far so I decided to go back a step to where it was just the reel on its own as this would look better when applied to things like an app icon.

Thinking about colour

Throughout my research of old cinema I have identified 3 main colours that are almost always present: red (used on chairs, for curtains, part of colour for popcorn packaging, mostly for text too), black(picture of the film) and white(picture of the film, part of colour for popcorn packaging).

Week 6 (Halfway Point)

Halfway Presentation

As were now at week 6 of the brief I had to do a presentation to the rest of my course pitching them my app idea.

Although my presentation didn’t to plan as I forgot most of the things I wanted to mention due to nerves, I still got pretty good feedback from Ben who completed a review sheet for my presentation.

Notes From Feedback

Need to start experimenting with developing my brand

Creative logo and branding

Efficient process of design

Wireframing and style sheet needs to start being brought together

Mock up in Balsamiq

Now that I have done my paper wireframes and site map, I can now progress to creating it digitally in Balsamiq doing a basic version and then adding in colour and images before then refining it in XD.

Initially I had created 3 different looks for the main section of my app with the menu bar at the bottom of each page for easy access. The idea was that the user would be able to switch between the way that they view the information giving it a customisation element giving a unique interface for each user out of one of the 3 options.

Week 7

Loading Screen Animation

Using Youtube I found and easy and quick way to create simple animations using Adobe Illustrator and Photoshop. Using this self taught skill I was then able to animate my logo which I was going to use for my load screen to make it look more appealing.

I might have to scrap this idea because the animation will only load on a tab on the internet which means I can’t import it for my app which is a problem. If I can find another way to do this then I will.

Iconography 

For my app I’m gonna need some icons to help navigate around the page, these are the icons that I thought I would need the most adding in more if needed.

Icon Drawings 

Final Icons

Here are my final icons made in Illustrator.

As I exported my icons as SVG files this meant I could alter them in XD without the use of Illustrator.

[designfundamentalsbycharlotte]

Brief 1 - Design Fundamentals ‘Interactive Prototyping’ Travel App

Week 1

The brief

To produce an ‘alternative’ digital visitor guide to Manchester celebrating it’s uniqueness as the UK’s now formally recognised 2nd City!... Okay, that’s far too open, so let’s define further. Manchester itself is a relatively small but extremely productive and influential city with an identifiable history of social and cultural relevance and inspiration. But how do we handle this message and control it to influence visitors to our fine city by message and mediums? At the heart of all User Experience is the requirement for research and definition. The initial stages of our design process will require YOU to investigate and uncover and discover an understanding of the brief.

My understanding of the brief 

I will need to create a travel app similar to existing apps aimed at people aged 18-25 (demographic). My app will be aimed at people from other people from the UK coming to explore Manchester and also people from overseas and will include a language change option. In the progression of this brief I will be testing out existing apps and conducting research on what the given demographic likes in an app to ensure for a good user experience.

Key Definitions

Wireframe- A visual guide that represents the skeletal framework of a website, created to help arrange elements to best accomplish a specific purpose.

Dirty Prototype- A quick way of mocking up elements to test if they work or not, in terms of interaction and usability.

Reverse / Backwards Engineering- When an object is broken down into its components to help develop a better understanding of how it works.

User Journey- A series of steps usually made up of 4-12 steps which represent the way in which a user might interact with what you are designing, can help to figure out how the user operates and how they would use what you are creating.

User Experience (UX)- The process of enhancing the user satisfaction of a product by making improvements to: usability, accessibility and overall feel of the interaction made.  

User Interface Design (UI)-  The design of things like machines and software compliments the look and feel, the layout and interactive aspects of a product

MVP (Minimum Viable Product)- A product with enough features to satisfy early customers, and to provide feedback for future development.

Site Mapping- A list of pages of a website, used during the planning of a website the designers.

Colourways- Any of a range of combinations of colours in which a style or design is available.

Backwards Engineering of Apps

We were set the task of deconstructing a travel app, for this I chose mTicket by FirstBus as I use it quite often. I have broken the app down into its site mapping and wire framing of the layout for the different pages of the app.

Marvel Prototype

After creating my wireframes and sitemap I decided to quickly mock it up using the app Marvel which allows you to create quick prototypes using your own designs, but I decided to use the assets provided by the app because my drawings aren’t evenly sized.

Mind mapping Initial Areas of exploration

To help me with what I needed to look into in order to progress with this brief I narrowed it down to 4 main areas that I would need to explore further, these areas are: Research, Target Market, Brand Identity and Initial Ideas. From here I can now take an in depth look into each section to advance forward.

Initial Research

Existing Products 

Visitor Guides

I decided that I needed to look at paper versions of visitor guides in order to see what base information I would need to include in my Travel Application. Here I have photographed a pocket sized visitors guide for Manchester.

Initial Ideas

Target Market

Brand Identity

Choosing an Idea

I narrowed my ideas into 2 categories (gym and activities) in which I had 3 main ideas for: a gym finder app, a cinema listings app and an activities in Manchester app. 

These are the 3 ideas that I will progress with, but will only make a final for one of them. I am doing it this way so that if I get part way through and one falls through I still have 2 in which I can carry on with.

Week 2 

Backwards engineering of apps

After creating my wireframe drawings, sitemap and a prototype in the app Marvel, I then went on to develop it in Balsamiq which allows you to create dirty prototypes quite quickly.

Home & Buy Ticket

More & Ticket Wallet (Active)

Ticket Wallet (Purchased) & Ticket Wallet (Expired)

Your Order & Select Region

Support & Account

Bus Times/Twitter

End of Week 2 Review

This week I further progressed my prototyping skills using the application Balsamiq which I enjoyed using as it gives the interface a rough feel and makes you concentrate on the content and not on how it looks.

Week 3

Backwards engineering of apps (continued)

Continuing to reverse engineer the mTicket app by stripping it down to its components and then recreating it, I have now use Adobe XD to create a single route within the app.

I have recreated the route for buying a ticket. Here is a video of the app working in a preview mode.

As I have chosen to create a cinema app I decided to repeat the same process that I did with mTicket on an app that is a cinema app called Cinemap.

Marvel Prototype using my wireframe drawings

After creating my wireframe drawings, sitemap and a prototype in the app Marvel, I then went on to develop it in Balsamiq, just like I did for the other app.

Top Movies (Movies) and Cinemas

Search and Feedback

Movie(Movie) and Movie(Showtimes)

Movie(Ratings) and Cinema Listings

Cinema Information and Map

Continuing to reverse engineer the CineMap app, I have now use Adobe XD to create a single route within the app.

Things to focus on for my app

Thinking about branding

Now that i’ve gotten the 3 ideas I want to focus on it was time to start thinking abut names for the apps. Heres what I came up with.

Additional Cinema App names: F . I . L . M | MovieBox | Cinema Wonder | MovieTime | ReelTime

Gym App- Workspace, WorkedOut

Cinema App- Motion Pictures, Lights Camera Action!, Movie Time, ReelTime 

Activities App- Plans, Outings 

The main app I will be working on is the Cinema app the others are to help generate ideas.

The name that I have chosen for my app is ReelTime as it is play on words with real time and the reason I have done this is because people use cinema as a form of escapism to get away from the reality (real world) that’s happening around them.

Interpretation of information

I have conducted research into existing travel apps and travel maps which will help me identify what information is vital to include in my app and what information isn’t necessary. This will help me when it comes to creating my apps layout designs. Now that I have chosen the name for my app and I can now progress further with my development by looking at possible layout designs, logo design, type and style sheets.

Here I have also explored various app development software which I have become familiar with and will use in the process of creating my app, in addition to the use of hand drawn wireframes and creating a sitemap of how everything will connect.