On meeting Jamie at Lifeshare our key brief became clear; to engage and inform. Our app must draw people in so people want to interact with the learning material that will enhance their lives. We initially see parallels between the design of an app and a Las Vegas sign in how they draw people into a defined character. The bizarre irony of using an architectural element originally used to tempt rather than encourage, and how we can turn this original purpose on its head, isn’t lost on us

The more detailed brief consisted of the inclusion of easily accessible courses and an easy to navigate mobile interface that would make the use of a touchscreen mobile self-explanatory the more it is used. With Jamie we discussed the more accessible features of app design, such as hamburger menus and easily read buttons; elements that are clear in their meaning. The congruencies with Post-Modernism and it’s, easy to read, symbolism was something we wanted to look into further. We could unite these aspects of phone design in an architectural sense.

Exploring Venturi’s theories of symbolism in ‘Learning from Las Vegas’ helped us to synthesise how we could symbolise a building in terms of how it is perceived to the street. The decorated shed is symbolised by it’s ornamentation whilst the architecture itself remains secondary in a message to the external world. In Guild House Venturi talks of how it’s quoins and render surrounds suggest ‘the proportions of a renaissance palace’ (Venturi, 1972:92) stating ‘the ornament of guild house is explicit. It both reinforces and contradicts the form of the building it adorns.’ (Venturi, 1972:91)
Venturi, R., Scott Brown, D. and Izenour, S. (1972) Learning from Las Vegas. 1st ed., Cambridge, Massachusetts: The MIT Press.
For more information on architectural symbolism, it’s methodology or Postmodernism read Learning from Las Vegas.

On the other hand we have the duck whose symbolism is inherent in the form and materiality of the architecture. On Crawford Manor Venturi talks of how it looks as though it were ‘made of a continuous plastic material reminiscent of beton brut’ (Venturi, 1972:91) where in this case of modern architecture meaning comes from ‘our knowledge of technology, from the work and writings of the modern form givers’ (Venturi, 1972:91) etc. This piece of high architecture has a symbolism that can only be unpacked with a prior knowledge of architecture but it’s methods of dissemination may hold lessons for our project.
Venturi, R., Scott Brown, D. and Izenour, S. (1972) Learning from Las Vegas. 1st ed., Cambridge, Massachusetts: The MIT Press.
For more information on architectural symbolism, it’s methodology or Postmodernism read Learning from Las Vegas.

In line Venturi’s focus on the importance of ornamentation we looked into a characteristic building of Manchester the Kimpton building. It displays inherent symbolic qualities in the level of ornamentation which could have multiple meanings to multiple people. Showing the people of Manchester expressions of the architecture around them, on their phone, may engage them with the app and open new insight and interest into familiar buildings.

We developed this elevation by taking parts of detailing and expressing them in illustrator. The zoomed in results are representative without being replicas. They highlight the symbology without needing to exist as a real piece of ornament does. This process of production could be expanded and refined in the intensive 2 weeks to produce buildings for a homepage, which are emphasized versions with buildings that have particularly meaningful details with emphasized scales. This should produce a decorated shed for the phone. A building that can be all symbol because of its existence in virtual space.

Design stages for the app
Stage 1: Brainstorming and initial ideas
We start by brainstorming as a group to come up with initial ideas on the app in regards to our concept, some of these might take in the form of avatar clothing, icons that can be earned by completing the courses and the expressive buildings that populate the homepage.
Stage 2: Storyboarding
Using Adobe XD, we start to draw up a story board of the app’s user interface.
Stage 3: MSA LIVE 21
During the 2 weeks of MSA Live 21, we as a whole collective with the BA students will be designing each element of the app which will later be integrated into a wider framework.

The main storyboard of the app will be designed using Adobe XD, which is a storyboarding app that is used as the standard, often been used for ios and android app UX designs. Adobe XD works as creating a number of pages with button clicks linking them together.
Link for further information: https://xd.adobe.com/ideas/guides/ux-design-process-steps/

During the two weeks, the students will be asked to design and produce graphics of architecture in Manchester to create a homepage. This mood board shows some initial thoughts that could form an overall graphical style from which students can base deigns. User interface design should consider all the visual and interactive elements of a product interface. This includes buttons, icons, spacing, typography, colour schemes, and responsive design. The visual is essential in guiding the user's understanding of the interface as well as their engagement with the virtual world and thus the real world as well.

IOS app development
As IOS is an enclosed environment platform, there are usually specific tools required to create an IOS app and below are both a list of the requirements and a general process of designing an IOS app.
Tools Requirement: To develop iOS apps using the latest technologies described in these lessons, you need a Mac computer (macOS 10.11.5 or later) running the latest version of XCode. XCode includes all the features you need to design, develop, and debug an app. XCode also contains the iOS SDK, which extends XCode to include the tools, compilers, and frameworks you need specifically for iOS development.

Overview of the steps:
Starts with an idea
Sketch it out.
Make it look pretty
Add a file
Test, Test & Test
Debug & Revise
Submit and start learning

Resources for understanding XCode and app development:
https://learnappmaking.com/xcode-tutorial/
https://developer.apple.com/develop/

While app development can be chaotic in nature, there are still structures and frameworks in place to keep the individuals or the teams running efficiently and projects on track to be completed. There are 7 main stages in the development process of the app:
1. Planning the app
2. Pre-production
3. Production
4. Testing
5. Pre-Launch
6. Launch
7. Post-Launch
These stages represent the general approach an app is developed whether it be to commercialised or to be available for free to the public.
Fortunately, there are app development softwares and IDEs that make the process much easier. Some of them have been listed below as well as some other resources:
https://developer.android.com/studio
https://unity.com/
https://www.unrealengine.com/
https://www.yoyogames.com/en/gamemaker
https://www.w3schools.com/java/java_intro.asp
https://reactnative.dev/
https://www.androidauthority.com/android-app-development-1128595/

The process of exporting from Adobe XD to Android Studio for Android App development or XCode for IOS App development is fairly simple and similar due to the seamless compatibility between the softwares. However, there are several things that must be prepared prior in order to not have issues during the process of exporting and these come in 8 main stages:
1. Preparing the XD document by grouping the layers and choosing the appropriate options
2. Render the colours into the correct values
3. Render the images into the right format (PNG, JPG, Bitmap, SVG)
4. Render all vector based shapes into SVG file format
5. Process the relevant text in the XD File
6. Create XML and XCode activities to import the XD Artboard
7. Link the different classes and activities for smooth input
8. Target the devices resolutions and different outputs to be compatible with different devices
Whilst it is not essential at all for the students to have prior knowledge for the two weeks, it will be a good practice to have a general understanding of how the apps get developed and interact with the user and the devices.
Coding languages such as React Native will help greatly with the app development as it is compatible with both IOS and Android. Below are links to useful resources and plugins that enhances the compatibility:
https://avocode.com/
https://zeplin.io/
https://www.invisionapp.com/
https://sympli.io/
https://exportkit.com/
https://exportkit.com/learn/how-to/using-the-suite/using-export-kit-with-xd

This is a brief overview of the timeline that we will be following for the next 2 weeks:

Week 1
10/5
Introductory day that covers introducing MArch and students, as well as the client and the project.
11/5
Generate initial ideas and come up with a unified style for the project design.
12/5
Create a framework for the graphical aspects of the app design.
13/5
Develop specific elements of the app design and conceptualise initial ideas.
14/5
Guest Speaker to present their work and background, to help give context to the app design.

Week 2
17/5
Refine developed designs based on framework and populate the app.
18/5
Refine developed designs and fix any inconsistencies, and compile all designs into XD.
19/5
Present finalised designs and finalise any designs based on feedback.
20/5
Compile all work into a final document that will be presented to the students and the client.
21/5
Present final product to client and wrap up the project!

We have created an initial framework storyboard which can be filled with rich graphical content and symbolic design. Utilising XD means once the full graphical interface has been completed the file can be handed to the client and onto a developer who can turn this into an app for both Android and IOS. XD allows for easy visualisation and task splitting, breakout groups can focus solely on one area and then harmonise it with another breakout groups developmental work.

The first screen the user will see is the splash screen. That is where the main highlights of the app are. Such as the app's company, the name of the app and the background. Although this can always expanded on to bring in more detail. The illustration above briefly highlights those elements.

A loading screen is a very important part of the design. Some loading screens are done in order to get the background work all ready and set to be viewed. Others however, are for aesthetics purposes. The latter is usually accompanied by tips or hints that can guide the user and provide them with important information and features found in the app.

The first time a user logs into the app, they will be presented of a tutorial screen. This screen provides them the option of going through a walkthrough of the app to understand all of its nits and bits. Once they are wholly confident with it, they will be able to navigate through the app with much ease.

Once in the homepage the user initially earns a building for completing the loading page tutorial. Fireworks will shoot across the screen, which can be clicked in the same way as the tutorial to reinforce this action. People can access more courses via the hamburger menu in the top left by completing these they earn more buildings to populate the homepage thus building up an expressive portrait of Manchester

The above illustrates the layout for the learning platform. For each subject of the learning platform, the topic will be broken down into several chapters. For each chapter, the user must complete all the sections in order to unlock the next chapters. Once they finish the chapters, they will have to do a quiz to assess their understanding of the subject.

If the user manages to complete the quiz, they will unlock items that could be in the form of vouchers or avatar clothing as illustrated above. However, if they fail to pass the quiz, the users would be able to revisit the chapters again, in preparation to retake the quiz.

The user firstly select the type of internet skills they aim to learn, then they pass the test through answering questions about the relevant knowledge. After they achieve appropriate correct rate in the test, they are able to obtain bonuses this could take the form of a giftcard the achievement of which can be viewed in the bonus page.

The user choose their favourite characters for their account at the beginning. Then they select the type of internet skills they aim to learn, after which they should pass the test through answering questions about the relevant knowledge. After they achieve appropriate correct percentage in the test, they are able to level up their account which can unlock new clothing and characters for them to pick. Subsequently, they continue to learn skills with their new image.

We are glad to announce that our client Lifeshare will do a presentation for us in the first day!
Judy is the operations manager at Lifeshare and covers many of the ins and outs of how best to run the charity for the benefit of the homeless people they help. Some of the forward thinking solutions Judy’s charity has been a part of are introducing the big issue to Manchester and offering a clean needle exchange. In this interview students will get a chance to ask Judy any questions they may have on the charity itself or how their work on this project will help Lifeshare’s cause.

DAY 1 HIGHLIGHT 1!!

To get people used to the interface and process of illustrator we designed the same door element using a number of illustrator tools. Today, the students learnt how to use the curvature, shape builder, pencil and text tools to create these wonderful designs.

DAY 1 HIGHLIGHT 2!!!

In our smaller breakout groups, the students guided by the MArch students created a variety of different elements for the app. One of such elements was the clothing for the avatar. They have come up with a series of clothing designs all created using Illustrator. A lot of the students used Illustrator for the first time, and yet they did an amazing job!!!

DAY 1 HGHLIGHTS!!!

Achievements and Learning Icons:
Students have started to sketch out some ideas of achievements and learning icons for the app and attempted to use Adobe illustrator to convert these sketches into vector images.

DAY 1 HIGHLIGHTS!!

Meeting with Client:
We had an amazing opportunity to meet with our clients who introduced Lifeshare to the students and have clarified the students about the brief. It was a very informative session and there was a plethora of information to take in. The information taken will serve to inform our design decisions.

DAY 2 HIGHLIGHTS!!

Group 1 - Achievement icons and Learning platform group
For today, students in the achievement icons and learning platform in the first breakout group has started to cater their icon designs to represent the course or the collaborator. These designs were first explored by hand sketches and are later vectorised into working icons using Illustrator.

DAY 2 HIGHLIGHTS!!

Group 2 - The Avatar and Clothing group
The students from breakout group 2 focused on creating several designs for clothing as well as for the avatars after looking at different inspirations and ideas. they then went into sketching their own ideas using pen and paper and scanned it afterwards to vectorise them in Illustrator.

DAY 2 HIGHLIGHTS!!

Group 3 - Home screen and Building Elevation group

The third group focused on redesigning elements of iconic buildings that are found in Manchester. They looked around in maps for Iconic building in Manchester and then made an expressionist illustration of it in illustrator that symbolises it. All of these designs are related to our collaborators and are buildings that our client is fond off.

GUEST SPEAKER!!

We have managed to confirm our guest speaker for this Friday 14/05. Mr. Alex who is our main collaborator alongside Lifeshare will be speaking to us about his journey and interaction with Lifeshare, he will also specify the design elements that he would like to see in the app, and will look at the work the students have done so far and give feedback on them.

DAY 3 HIGHLIGHTS!!

Group 1 - Achievement icons and Learning platform group

For day 3, the achievements icon group has focused more on refining the designs that were produced yesterday and started moving into designing the other course aspects of the learning platform as well as the general learning framework of the app.

DAY 3 HIGHLIGHTS!!

Group 2 - The Avatar and Clothing group

Group 2 had a very productive day today. The Avatar and clothing group focused today on using the compiled precedents and inspirational ideas for avatar and clothing from yesterday to come up with a unified style for the avatar design. Then they have began designing clothing sets for the avatars to give it a sense of variety and individuality.

DAY 3 HIGHLIGHTS!!

Group 2 - The Avatar and Clothing group

The clothing sets made by the avatar and clothing group were made to be a symbol of the course in which are unlocked in. So for example, the mailman clothing sets represent the course that teaches how to send an email, and the doctor's clothing represent the course that teaches how book a doctor's appointment online. Each clothing set will correspond to the course that it is unlocked in by finishing it.

DAY 3 HIGHLIGHTS!!

Group 3 - Home screen and Building Elevation group

The Building elevation group continued on designing more elevations from Day 2 as well as refining and detailing the initial elevations. Then they began to construct pieces of elevations representing different buildings into one. This exercise allowed for the students to come up with varied and interesting elevation designs.

DAY 4 HIGHLIGHTS!!

Group 1 - Achievement icons and Learning platform group

The group has continued to design the achievement icons for the learning app, finalising a draft in preparation for the presentation that will be held with the client the next day.

DAY 4 HIGHLIGHTS!!

Group 2 - The Avatar clothing and the splash screen/loading screen group

For the fourth day, the second group focused on creating ideas for the splash screen of the app. the original illustrations the main elements that the group wanted to explore, such as the type of buildings to represent, the colour scheme and the style.

DAY 4 HIGHLIGHTS!!

Group 2 - The Avatar clothing and the splash screen/loading screen group

The designs made by the group are inspired by the different iconic sites and buildings around Manchester like the Beetham Tower. Once the group became more confident, they began to detail some of the buildings with different styles.

DAY 4 HIGHLIGHTS!!

Group 3 - Home screen and Building Elevation group

The third group further refined a unified style for creating these conceptual elevations by finding a midpoint between the results of the previous 2 days. In this instance they once again took 4 different elements from different buildings and combined them together.

DAY 5 HIGHLIGHTS!!

Group 1 - Achievement icons and Learning platform group

With the developed icons, students later incorporated ways to further define them as achievements that the user gets when they finish a course on the app. The inspiration for these icons came about from the design of award plaques and the community shield trophy.

DAY 5 HIGHLIGHTS!!

Group 2 - The Avatar clothing and the splash screen/loading screen group

The second group focused today on the splash screen of the app. They have first looked at several inspirations and precedents of different app splash screens and then went into illustrator to try to design their own. They learned today a feature called Image Trace that helps with creating detailed vectorised illustrations from rasterised images. They showed a thorough creativity across the day by compositing and collaging the different images and redesigning them in Illustrator.

DAY 5 HIGHLIGHTS!!

Group 3 - Home screen and Building Elevation group

Continuing on the theme from yesterday we made elements at a miso scale and then conjoined them into one conceptual elevation. In yesterday’s we symbolised what building may be earned from completing a course on mobile banking. Today we produced an elevation to symbolise completing the universal credit course, so took a number of government buildings, including the clock from Manchester town hall. We can see that a common theme is of luxury and quality as there have been similarly common themes in other typologies such as the arch in medical buildings.

DAY 5 HIGHLIGHTS!!

Group 3 - Home screen and Building Elevation group

On feedback from the client we also made edits to our building symbolising the doctors appointment course. Taking sections of each building allowed us to increase the scale of details by decreasing the size of the buildings themselves. This creates a happy medium between overzoomed and underzoomed scales found yesterday in our mobile banking building. We have also applied the NHS logo to make the typology clear which otherwise could be opaque.

DAY 6 HIGHLIGHTS!!

Group 1 - Achievement icons and Learning platform group

After having finished the icons last week, the first group focused today on creating the general design layout of the app - specifically, the layout of the courses in the app. This included them using all the assets created by all the second group and combining them together to create a more uniform design.

DAY 6 HIGHLIGHTS!!

Group 2 - The Avatar clothing and the splash screen/loading screen group

the second group continued working on the splash screens and refining them. The focus for the second group today was to choose a unified style, and beginning to design the splash screens based on the unified style. All the artworks that are produced are representative illustration of Manchester but in an abstract manner rather than a specific one.

DAY 6 HIGHLIGHTS!!

Group 3 - Home screen and Building Elevation group

This is the building that represents the course ‘ how to find a hostel’ it takes elements of luxury from various hotels as well as elements from hostels themselves. In this sense we try and convey the typology of a place to stay, but also try to give the convey the same quality seen in the architecture of the hotel as a proposition for the hostel. As a group we would like to see hostels just as well designed and prominent as places where the wealthy stay.

DAY 7 HIGHLIGHTS!!

Group 1 - Achievement icons and Learning platform group

Following on yesterday, the first group continued on adding more the the general layout of the app and refining the other elements. They then started to link the pages in the app together using Adobe XD to provide them with a testing environment to see what elements work well together and what others do not work as well.

DAY 7 HIGHLIGHTS!!

Group 2 - The Avatar clothing and the splash screen/loading screen group

Once the second group finalised the splash screens, they have then began to work on the loading screen and have come up with many different iterations and colour schemes that were aimed to match with the overall app scheme. The theme that was used for the loading screen icon was of symbol to Manchester. This is to reiterate that this is a Manchester app created by locals and is for Manchester.

DAY 7 HIGHLIGHTS!!

Group 2 - The Avatar clothing and the splash screen/loading screen group

Once the layout of the loading screen was decided on, the group then discussed the general manner in which the app will load and how the colour scheme will work together.

DAY 7 HIGHLIGHTS!!

Group 3 - Home screen and Building Elevation group

After feedback from the client we discovered that our first elevation, a doorway labelled working girls home, is actually the doorway into the building where Lifeshare have been based for years. Taking this revelation into account we have decided to reuse that detail as the first building facade earnt and seen in the homepage, after getting past the loading screen for the first time. We hence decided to create a new building for any course content that the Ragged University may provide, for this we looked at iconic elements of university buildings. The final building facade we will produce is perhaps the most refined yet, using everything we have learnt in illustrator including: gradients, the width tool, the shape builder tool and many more.

The final illustrations and assets that we have produced in the past two weeks have been connected using Adobe XD alongside the students. The PG students went over it with the students and constantly received their feedback to refine it even further, and turn it into an interactive application. Once the storyboard was completed, it was presented to our client at Lifeshare and the interactivity was fully demonstrated. This project was completed thanks to the students who worked to the best of their abilities to provide such amazing results!

To finish off the day, the PG students held workshops on different softwares such as Rhino, Sketchup and Lumion going over all of their different methods and workflows to achieve their finalised work. Some of the workshops were merely tutorials into the software whilst others were more in depth processes involving the reproduction of the PGs work, It was very informative and the students were very engaging during the workshop, putting a worthwhile ending to the two weeks MSA Live project.

Finally, over the last few days of the project we worked on getting all of our information into a completed storyboard framework in Adobe XD that can be handed over to the client. In this process, we amassed all our illustration and page work but also detailed the transitions between them in ways that are easy to understand and accessible. The demo of the app was provided to the client and a more thorough walkthrough was demonstrated. This gif highlights of what the app generally looks like.