Group 29
BIT BY BIT

Our aim is to create a gamified e-learning app to encourage interaction with previously unconsidered subjects and to teach the basics of how to interact with a phone. Pulling together a wide range of participants through Lifeshare we seek to draw people into a wider community and influence them with an initial symbolism that gets deeper the more you delve into each subject. By doing this we create an interactive experience that inspires and immerses.

Download Final Report

Abdullah J / Jeffrey Yong Jian L

Jeffrey Yong Jian L
Project Partner Biography:
Lifeshare is one of the oldest homeless charities in Manchester, they not only seek to home the homeless but also to help people in their care adjust to new skills needed in everyday life. They list their primary objectives as

- ‘To identify street homelessness and offer assistance in obtaining emergency accommodation, signposting other relevant agencies and information for support’
- ‘To alleviate aspects of poverty and hardship through redistribution of resources’
- ‘To assist people to access Primary Health Care and to promote health and harm reduction’
Through their child organisation, the Manchester Digital Collective, they collaborate with a number of other charitable organisations to help teach digital skills for the 21st Century. We in particular will be working with them on their goal of redistributing resources both literal and educational in the digital sphere.

More information can be found at:
https://www.lifeshare.org.uk/
https://www.facebook.com/lifeshareuk/
https://twitter.com/lifeshareuk
https://www.instagram.com/lifeshareuk/
https://www.linkedin.com/company/lifeshare/
Posted 1 Mar 2021 17:07
Jeffrey Yong Jian L
Meet the Team
Daniel Jarvis
Atelier: Infra-Space
BArch: University of Liverpool
Worked at: Mark Reeves Architects
Skill: Photoshop painting, Illustrator iconography
Hobbies: Videogames and wishing I had a cat

I'm particularly interested in the stories architecture tell us, how our understanding of the world is informed by sub-conscious interactions between form and social mythology. How we can say more with the materials we have. I'm a big fan of architects like David Adjaye and love Rossi's theory of buildings of memory making up our perception of the city. Besides architecture I occasionally pretend to read Russian literature
Posted 1 Mar 2021 17:08
Jeffrey Yong Jian L
Meet the Team
Abdullah Jawdatt
Atelier: CPU[Ai]
BArch: Manchester School of Architecture
Skill: Sketchup, Photoshop, InDesign, Lumion for visualisation
Hobbies: Digital Art, Website designing, gamer

One of my major interests in architecture is the endless variation of possibilities that it presents. When I first entered the course, I had linear thoughts about it; Designing houses and including the process here and there and that is it! However, as the years gone by, I only came to believe that I couldn’t be further from the truth. There is so much that architecture presents to us and even more so that it teaches. Currently I do CPU[Ai], however, in my third year I did PRAXXIS. Having been in both ateliers, I came to realise how wide of a spectrum both ateliers reside in as both are so different in process but so similar in fundamentals and that I found to be one of the most interesting things that architecture can present to us.
Posted 1 Mar 2021 17:08
Jeffrey Yong Jian L
Meet the Team
Zhanyuan Gao
Atelier: Advanced Practice
BArch: South China University of Technology
Worked at: Guangdong Jianke Architectural Design Institute(short time)
Skills: Rhino, Sketchup, Photoshop, Illustrator, Indesign, Lumion
Hobbies: Swimming

I'm keen on exploring how architectural design can make a change on human life, and make a closer engagement with the changing times. Human lifestyles are changing, and I really like to engage design with these changes to make better life. Besides, I'm interested in applying sustainable materials, design of energy saving in the design and reuse of shabby houses.
Posted 1 Mar 2021 17:09
Jeffrey Yong Jian L
Meet the Team
Gi Lok Ho
Atelier: Advanced Practice
BArch: Manchester School of Architecture
Skill: Autocad, Photoshop, InDesign
Hobbies: movies and digital painting

Hi there! I am interested in public space in architecture, in particular in the relationship between people and space. To me, good public spaces foster a sense of civic enthusiasm that is important to creating the social cohesion needed for a vibrant society.
Posted 1 Mar 2021 17:10
Jeffrey Yong Jian L
Meet the Team
Jeffrey Lim
Atelier: Advanced Practice
BArch: Manchester School of Architecture
Skills: AutoCAD, Sketchup, Rhino, Adobe suite, Rendering
Hobbies: Photography, Personal Exploration

Currently residing in Hong Kong and a passionate designer. Im mainly interested in experiential architecture and in-depth designs that improve the way we live. Apart from architecture, I seek to explore other spectrums of the design world.
Posted 1 Mar 2021 17:11
Jeffrey Yong Jian L
Activities and Skills in the project:
Our project will outline an in-depth process for app design. Students will learn how a storyboard works and learn the types of graphics that can be used within them. We will then go into how this finished design will be made into a working app through coding practices by developers.

People joining our group can expect talks from leading members of Lifeshare and affiliated organisations through the Manchester Digital Collective. The Manchester Digital Collective encompasses a range of professionals, from artists to musicians who all contribute to Lifeshare’s goals in one way or another.

Throughout the project students will be making heavy use of programs that develop graphics such as photoshop and illustrator. Whilst it is not required that students come to this project as experts in these software programmes, it would be beneficial if students had at least a basic understanding of the interface; some of the tools that can be used within them and what they can be used to produce.
Posted 1 Mar 2021 17:12
Jeffrey Yong Jian L
Social Value Description:
Through the Manchester Digital Collective, Lifeshare gather a number of smartphones which can be given to the homeless. As a group we have been tasked with reinvigorating Lifeshare’s new e-learning platform that they have created to be used as a mobile app. This app is designed to initially teach the basics of how to use a smartphone which may be a new experience to many of the homeless population. Once people have learnt the essentials they can progress to a number of courses which teach skills from cooking to online banking, everything needed to adjust to a modern life.

In gamifying this app we seek to make what is already an admirable and accreditable platform more engaging so that people will want to use it more often. In this sense the work that we do is essential to the democratic dissemination of information. We give people a more appealing choice that they want to learn from. Lifeshare does not seek to instruct but to provide the method for the peoples’ own education.
Posted 2 Mar 2021 09:43
Abdullah J
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
Posted 12 Apr 2021 16:47
Abdullah J
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.
Posted 21 Apr 2021 12:10
Abdullah J
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.
Posted 29 Apr 2021 21:23
Abdullah J
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.
Posted 29 Apr 2021 21:23
Abdullah J
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.
Posted 29 Apr 2021 21:25
Abdullah J
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.
Posted 29 Apr 2021 21:27
Abdullah J
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.
Posted 30 Apr 2021 18:10
Abdullah J
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/
Posted 30 Apr 2021 18:11
Abdullah J
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.
Posted 30 Apr 2021 18:24
Abdullah J
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/
Posted 1 May 2021 19:08
Abdullah J
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/

Posted 1 May 2021 19:18
Abdullah J
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

Posted 1 May 2021 19:27
Abdullah J
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!

Posted 9 May 2021 05:42
Abdullah J
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.
Posted 9 May 2021 05:45
Abdullah J
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.
Posted 9 May 2021 05:48
Abdullah J
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.
Posted 9 May 2021 05:51
Abdullah J
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.
Posted 9 May 2021 05:54
Abdullah J
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
Posted 9 May 2021 05:54
Abdullah J
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.
Posted 9 May 2021 05:56
Abdullah J
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.
Posted 9 May 2021 05:56
Abdullah J
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.
Posted 9 May 2021 05:57
Abdullah J
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.
Posted 9 May 2021 05:57
Abdullah J
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.
Posted 9 May 2021 06:00
Abdullah J
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.
Posted 11 May 2021 00:52
Abdullah J
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!!!
Posted 11 May 2021 00:56
Abdullah J
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.
Posted 11 May 2021 09:20
Abdullah J
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.
Posted 11 May 2021 09:58
Abdullah J
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.
Posted 12 May 2021 04:27
Abdullah J
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.
Posted 12 May 2021 04:30
Abdullah J
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.
Posted 12 May 2021 04:37
Abdullah J
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.
Posted 12 May 2021 04:40
Abdullah J
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.
Posted 13 May 2021 01:50
Abdullah J
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.
Posted 13 May 2021 01:54
Abdullah J
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.
Posted 13 May 2021 01:58
Abdullah J
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.
Posted 13 May 2021 02:02
Abdullah J
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.
Posted 14 May 2021 01:59
Abdullah J
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.
Posted 14 May 2021 02:03
Abdullah J
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.
Posted 14 May 2021 02:06
Abdullah J
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.
Posted 14 May 2021 02:08
Abdullah J
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.
Posted 14 May 2021 18:50
Abdullah J
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.
Posted 14 May 2021 18:55
Abdullah J
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.
Posted 14 May 2021 18:58
Abdullah J
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.
Posted 14 May 2021 18:59
Abdullah J
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.
Posted 18 May 2021 00:24
Abdullah J
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.
Posted 18 May 2021 00:27
Abdullah J
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.
Posted 18 May 2021 00:28
Abdullah J
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.
Posted 18 May 2021 19:59
Abdullah J
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.
Posted 18 May 2021 20:02
Abdullah J
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.
Posted 18 May 2021 20:04
Abdullah J
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.
Posted 18 May 2021 20:05
Abdullah J
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!
Posted 21 May 2021 16:41
Abdullah J
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.
Posted 21 May 2021 16:45
Abdullah J
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.
Posted 21 May 2021 22:32
Download Final Report