The Broads: Phase 1.5 (W3 & W4)

Week 3: Wednesday 13th, March 2019

This week so far has kept me in terms of Storehouse and continuing to develop the Storehouse website which you can see at https://www.aashhab.design/storehouse/ and arranging deals on potential freelance projects. While I did want to go to a lecture on landing a creative job at a Design Agency, I could not make it unfortunately due to unexpected circumstances that occurred with my housemate. I was not able to sleep till 3 AM, and when I woke up at 8 AM I felt dead, literally dead. I couldn’t get myself to move and head to the lecture for the interchange program that is taking place this week.

I’ve had several problems with this housemate for some time now, and the individual has promised not to disturb me again. This person was being loud from 12 AM to 3 AM not being considered nor realizing that it’s midway through the week still and I still have university to attend to next day. I was really frustrated and annoyed that I couldn’t make it to the lecture, because I actually really wanted to do, but I could not do it just on 5 hours of sleep. It was really hard, despite having that short amount of sleep in the past and still making it through objectives and events that I had the next day, I couldn’t make it this time. But other than that, this problem will not be happening again as I am moving to a much higher quality place starting September 2019, for my final year of this degree. The excitement of moving out of where I live right now is still on fire because it feels the source of oil adding to this fire is endless.

Making excuses is not particularly a priority for me, but when there is a problem, and it affects my performance, it should not be seen as an excuse, because I know the difference between an excuse and being motivated and having goals to achieve. It’s been a while since I have encountered a problem involving a housemate, but I hope it doesn’t happen again anytime soon unless it’s a holiday period where things are slightly laid back or the weekend. However, I cannot afford to tolerate such behavior and interruption during a week where I am required to be busy and will be busy.

What about Thursday? isn’t there an additional day of interchange? sure there is but the activities are all full, except an Architecture-based session where you would build a dome, but I have no interest what’s so ever to attend an architecture based interchange session. I cannot just bring myself to collaborate or participate in an interchange program that I have no interest in. I 100% understand it’s part of collaboration, but if the events that I am actually interested in are full, then can I really force myself to go to an event where I am not interested and make the people around feel uncomfortable due to the lack of interest and the in-desire of wanting to be around? Nope, I will not do that.

It’s not that I am not open to participating in events outside my field, it’s simply most of the events felt irrelevant to me. Therefore developing the lack of interest and not really wanting to participate UNLESS the events that I liked and had interest in attending were relevant to me. So that’s that, so what did I do instead?  Good question, here’s what happened so far and what I have actually done to compensate.

  • Worked on the Storehouse Website and finalized the articles page, along with adding animations and interactions.
  • Jason came over on Saturday 9th of March so we can work on our own things, while he worked developing the framework for the Broads Project that he was struggling on.
  • Edited the speed of the prototypes animations mentioned in a previous post due to the stakeholders giving me the constructive feedback of suggesting to slow down the animations so I can explain along while the animations are happening. This is in preparation for the presentation taking place on Thursday 14th of March at the Broads Authority.
  • Spoke with a few clients and making deals to design for new projects.
  • The eagerness to learn the framework VUE Js over summer has developed and I have scheduled to begin learning it once hand-ins on the 10th of May take place and are over.
  • Develop my UI/UX Design business/studio, which you can see here: https://mindui.co/

Jasons Framework: Updates

Live Demo: http://www.jasonbrown.nuacomputerscience.co.uk/sources/scrollsnap/index.html

Based on my previous post, a major problem was the snapping of the grid and the cells of the grids when you scroll and the navigation experience. When Jason came over on the 9th of March I remember his frustration during the period of time where he was right near me working on the framework itself, while I was developing the Storehouse website. He was so frustrated that things weren’t working as they should be when he has done everything required until he has landed upon something called CSS Scroll Snap.

What is CSS Scroll Snap?

CSS Scroll Snap is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.’Mozilla. The real question is, does it work on all browsers? due to this technology being new, unfortunately, it isn’t, not yet.

The main two noteworthy programs that have full help for this are Chrome and Safari. Firefox and Edge have halfway help yet it appears that Mozilla won’t actualize full help in the up and coming Firefox 66 and 67 discharges, so it may be some time before Firefox gets full support. A great deal of the lesser-utilized programs like Opera and Samsung Internet Browser has no support for this by any means, which could represent some ease of use or potential issues.

Browser Usage

Key takeaways,

  • Google Chrome has a market share of 42.6%, putting it in 2nd place just before Safari, which has a market share of 47.01%.
  • Samsung internet has a market share of 7.39%.
  • BlackBerry has a market share of 0.06%.
  • Opera has a market share of 0.44%.

So what does this information tells us? it tells us it is important to ensure the framework/and or the website/app supports the major browsers which are clearly Google Chrome and Safari, and most likely Mozilla Firefox as well, this is because it’s what people use most. Taking into account and consideration on the browsers and software people use is a key piece of the puzzle in delivering a flawless user experience in the industry and making sure people are enjoying what they interact with, without problems.

Storehouse: Updates & News

You may be asking, how is Storehouse related to this project? the question should be how is it not relevant to this project? it’s not directly relevant, but indirectly! I’m saying this because my animations expertise has grown a lot over the past few months. Not only in code, but also in making design concepts using Sketch & Principle. I’ve boosted my expertise in using the library GSAP, which you can see here: https://greensock.com/gsap – I have developed a further understanding on how to utilize the library by applying it on the Storehouse website and my own portfolio website!

It’s indirectly relevant to the broads project because I can take what I have learned while developing the storehouse website and apply it immediately on the app/website that I will develop in this project. To make this clearer and more understandable here’s evidence of this.

  • The text animation on the homepage has been accomplished using just CSS.
  • The homepage scaling in has been accomplished using Javascript and GSAP.
  • The menu opening with the staggering options is Javascript and GSAP.
  • The scroll animations have been done with a library named AOS.

At the same time being the Head of the Online department is teaching me a lot. It’s leveling up my leadership skills and working more efficiently in a collaborative environment, these skills are also directly relevant to the Broads Project! because now we are in the collaborative phase where communication is highly involved, decision making, time management, planning, and all of these skills compiled together into one. I’m doing the same thing with Storehouse here, so all in all. This is a win-win for me regardless of what project I am working on. All the projects are benefiting and in one way or another, they are indirectly or directly relevant to each other.

Here’s what I have contributed to the Storehouse website so far:

  • Design & Development of the website, design decisions have been made with the other team members of the online team who are Jason, Michael, and Corrina. Thanks to them, the website has been made. While Jason is working on the software that will make the article pages containing the content of each article submitted by students of NUA who would like their work to be seen by people.
  • Leading the Frontend Development of the website, I have achieved a neat structure using SASS. I separated pages with their own stylesheets using SASS which is then combined together into one stylesheet for public release.

You can see how the homepage has its own stylesheet which is _homepage.scss, and there are 2 different articles stylesheets for layout purposes to match all the articles that the users have submitted. Due to the menu is a public element and is across all pages, I’ve put in its own stylesheet. There is also a _public.scss stylesheet which is for other custom CSS elements that are being used across the website.

Advantages

  • Neatly organized website files with a reasonable Architecture.
  • Finding and editing elements is way faster than manually searching for it or using command f.
  • Modifying an element and making it apply across the whole website is achievable with SASS.
  • You can store fonts, colors, and other elements using variables through SASS.
  • And much more with Mixins, includes, and functions.

SASS/SCSS is an industry standard strategy/approach when building websites and ensuring efficient architecture is achieved.

Overall I am happy with how Storehouse is coming along so far and look forward to the release date that is taking place on the 30th of March, in other words, the end of this month.

———————————————————————————————————————————————————

Collaboration

I’ve been interested in researching the art of collaboration since the beginning of this project and I want to see how collaborations are beneficial in the industry and what their impact is in work environments. The productiveness, the boundaries, the limitations, and basically what can you do with collaborations and what you cannot do.

5 Benefits of Collaboration:

  • Accelerated business production, this means the projects that the business works on are sped up and run much quicker due to not only 1 person working on the project, but a team of 3 people or more. Ideas, developments, sketches, and communication go between 1 person to the other. The entire organization’s ability to produce results therefore accelerates. When you are collaborating, a work management tool is also used, which means the scheduling of plans, meetings, deadlines, etc…
  • With collaborations, the generation of ideas is equivalent to productive output. With the mix of personalities, experiences, and work styles the result is a dynamic group of people who are able to produce and run through potential ideas. Without these ideas, your business is likely to struggle and suffer.
  • Increased profitability, with the mixture of capable and intelligent individuals you are able to maximize the potential goals of the business and meet sales targets, revenue targets, net-profits, etc…the capable individuals are developing a highly skilled work environment that moves at a fast pace and are able to match the speed of the running schedule. Therefore boosting the efficiency of the business.
  • According to the Harvard Business review, the creation of a value-based, in other words, a culture driven by collaboration and professionalism improves the mental health of employees. When you treat employees as people instead of cogs in a machine unlike many managers nowadays, then you’ll be able to decrease and eliminate high levels of stress in the work environment that lead to toxic health conditions and mental health.
  • Collaborative technology and devices such as tablets, smartphones, and computers allow employees to work more flexible than the traditional 9-5 office day. With these technologies, many end users are able to work from home and on the road, and even take advantage of the real-time collaborative capabilities with remote coworkers around the world. Improved flexibility can lead to greater efficiency and effectiveness. In fact, a 16-year study by Idea Champions recently found that only 3 percent of people come up with their best ideas at work. The other 97 percent said they encounter great ideas throughout their day, at home, on vacation and even in the shower.

Decision Making

Brause(2017, p.88) states that group decision making can be challenging and confusing, how in order to overcome the difficulties and conflicts, it is to set a decision-making style:

Leader-led decision making: when a fast-paced decision needs to be made, the designated leader can be the one who makes an independent decision to decide what’s going to happen.

Decision making by voting: There are a variety of voting methods, including ranking after-natives and establishing the common approach of a majority by the percentage of the vote.

– Consultative decision making: For greater buy-in, the group leader might consult with team members for recommendations. Invidiaully or as a whole prior to making the final decision. It’s a good approach due to having a balance and a speed while involving stakeholders.

Personally so far in my life, I have been applying the decision making by the voting method. I feel it is a fair approach because you are involving the rest of your team and giving them the opportunity to contribute to important decisions. It is an effective method to drive your team forwards, and not only yourself. However, there will be times where you believe in a decision that your team doesn’t. In that case, you have to make a leader-led decision. A leader needs to lead, and this is where this kind of decision making could step in. If you truly believe in a decision that no one else does, then this is it.

Thursday 14th, March 2019

Presentation

Today here are the following events that took place:

  • The morning session, which involved editing the presentation.
  • Day time, around 12:45 PM Jason, myself, and Naomi headed to the Broads Authority office with our lecturer Jamie.

The Morning Session & Presentation

This morning a very important event took place just before presenting to the Broads Authority. The editing of the presentation took place, majorly removing un-necessary slides and shortening the whole presentation because we only had roughly 15-18 minutes to present. It was important to perform this because we had a total of three presentations to run through. It did sound difficult at first to achieve this, but when we stood and actually presented I realized it wasn’t so bad at all.

  • The User Persona slides were 5 in total, but then they have been compressed to 2 slides. 5 Profiles have been taken, and 2 of them have been applied to the user journeys that Jason and Naomi have created. The result has made this information easier to comprehend and consume a shorter span of time.
  • An additional crucial edit was the editing of my prototypes. I had 4 animated interfaces as mentioned in my previous posts: https://ameeralashhab.nuacomputerscience.co.uk/2019/01/17/the-broads/ and https://ameeralashhab.nuacomputerscience.co.uk/2019/01/24/interface-animation-effects/ – What I did was add pauses in between the screens, so before each screen proceeds to the next animation, there’s a 4-5 second pause to allow me to talk and to communicate the broads stakeholders and explain to them the purpose and idea of the screen.

After these edits have taken place, it was time to walk and head to the Broads Authority office…

We reached with office/building with Jamie and went inside a room that was classified as a meeting room I believe. It was quite a big room with tables that formed a circle shape. The reason why I’m mentioning these details is that I have not really been inside such a room or an office before. I really haven’t, and so being in a meeting room like this was a new experience for me, it made me put my mindset to ‘serious mode’ and this is where my mind has begun to shake a little, but I took control of myself because presenting is something I should start getting used to, but the thing is, it was not only that, it was the fact that we had to present to a series of important individuals such as directors, managers, and heads.

Something funny that I did and remembered from childhood was to pinch myself when I get nervous, and that is exactly what I have done. This method of nervousness reduction and control works really well, at least for me and it still does. Performing and talking was not a problem for me, and I made sure not to stutter while talking to appear confident, and I think I have appeared confident. However, if someone did focus well, they will notice the level of slight nervousness I had to deal with. But overall in all, I think I have done well and the audience (the stakeholders) have said we have done an excellent job and we ticked all the boxes that they would have marked for professional presenters.

My experience in presentations increases and gets higher the more I do this, and honestly, this is what I need. This is what will prepare me for the industry and the real world once I graduate. I’m quite thankful for these opportunities and I hope to see more of them arise, despite how much discomfort these kinds of situations put me in, it’s what will truly improve my professional skills and abilities as a Designer. My ability to also convey and describe my ideas and designs to an audience will become better. I’ll be able to make it easier for other people to understand my mind as a Designer and how I see the art of the digital world.

Feedback & Discussion

After the presentation was over, it was time for feedback and discussion. As far as I can remember, the main point that was brought up by one of the stakeholders was usability for children. The person has asked if we are going to create a 2nd version of the app adjusted for kids, and how will kids exactly use it. Then we responded with the fact that the app is family friendly, which means that the parent of the kid or child can direct to the part of the app that the child will use. However, after the feedback session, amongst ourselves, we thought we should take into consideration kids when we design the app. In other words, making some parts of the app usable for kids by perhaps taking visuals and the way we make elements look into consideration for kids.

Another point that was brought up, is making the experience not heavily digital-focused to the point where users would walk and just keep looking at their phone. In regards to this, I responded with the idea that because the app will contain useful information about wildlife, this will encourage users to actually investigate the information that they have just read and find these animals at the locations they are at, at the Angles Way. By doing this I suspect people will take pictures of these animals and share them across social media with hashtags relevant to the Angles Way. This develops the audience of the Angles Way and increases the chances of people visiting The Angles Way. It’s like a chain of impact, where one thing hits the other. Perhaps even a better way to describe this is a line of dominoes falling on each other.

Other than these 2 important points that have have been brought up, the rest of the discussion was based on the next steps and we exactly plan to do. Primarily applying the thoughts mentioned above into the next iteration of design through what I already have presented in that presentation and mentioned in my previous posts.

I personally think it will be a challenge to make sure that the design of the app will be adjustable for kids, but also at the same time professional looking. I think we could accomplish this by using fun and professional looking typography, colored elements, and other variables that we need to take into consideration. Overall, regardless of how I think I performed, the day went well and I look forward to Friday which will be an exciting day of collaboration. I’m sure it will go well and a lot of learning will occur.

Friday 15th, March 2019

Today, was a busy day, quite busy actually and it was full of collaboration. The day started at 9:30 AM by heading to our usual room at SA07. Graphic Communication students have also joined us. We spent the whole day collaborating with the students and what happened is an interesting and fun bonding session at Wetherspoons which we headed to for Lunch. The rest of the evening was then also spent collaborating with these students. Then, Jamie, my lecturer introduced Jason and me to the library Jquery Mobile, which is, of course, jquery made for mobile usage and it works across all platforms. This is basically what happened on Friday, but it’s time to get into the details!

The Morning Session

The morning session was quite productive, and before we dived into working along with the graphics comm students, Jamie has told us what we should do for the day, and that was the paper prototype and come up with the ideas for the website/app. My initial reaction was “Why do I have to paper prototype”, but then I realized instead of disliking or hating on paper prototyping perhaps I should try it and experiment with it more before I start developing this dislike or hatred. I truly do realize the value of paper prototyping and I know much it is useful in the industry. Therefore I should not involve my personal dislikings or hatred towards such a useful method of UI/UX development and ideation.  It was also a collaboration activity, so what is there to dislike or hate?

Proceeding with paper prototyping, we grabbed 3 A1 sized sheets and shapes have been cut out to represent the app’s components such as Header, image placement, text placement, etc… this form of prototyping also reminded me of my Foundation Year in Graphics at NUA, why? because in that year a lot of cutting, paperwork, and crafting was involved. I remembered how much I struggled with cutting shapes and using tools like scissors. Paperwork and art crafting has never been my kind of thing to do and execute because I am simply terrible at it, and in all honesty, I don’t particularly enjoy it. But of course, there are days where you need to be uncomfortable in order to grow, which helps you with developing yourself and improving. Here are the following results:

First, we have come up with an Information Architecture or rather a journey of the User Experience while creating the paper prototypes. The image above is a wrap of sticky notes that have written to indicate the steps that the user will go through in order to navigate between content/and or pages. While coming up with this I.A, we asked ourselves a lot of questions and debated on the simplicity and difficulty levels of this navigation. But then we digitized this design and tested the I.A by having users try using the app at the Student Lounge, which is at the bottom of Saint Andrews, I’ll be mentioning this at the end of this post.

The questions we asked ourselves were:

  • “Is this easy enough for the users?”
  • “How will navigation work?”
  • “Will the users understand the arrows?”
  • “What will the content of each page be?”
  • “What content should we use to explain to the users what the app is?”

And many more questions, because is part of investigating the UX and is part of the process of ensuring we deliver a functional and usable app. What’s a UI that’s not usable? if a UX isn’t usable, then you need to go back and revise what you have done. Obviously, it’s pointless to create and develop something that doesn’t work.

After the creation of the Information Architecture, we proceeded to display the content on A1 sheets through the cutting and shaping we have done…

Figure 1: Map Page

The map page was worked on by me and Zach,  how it works is, most of the page is dominated by the map and at the bottom of the map there are 2 key options which are “Discover” and “Key”. What’s the point of these two features? the point is…

  • The Discover option will allow users to discover what’s available at the location, similar to google maps how when you click discover you’ll be able to see available restaurants, public services, toiletry facilities, and many more. We wanted to provide the same capabilities and features because based on previous research, people did mention they would like to see these options being offered because obviously, you will not be able to discover everything around the Angles Way without relying on a digital service. As well, when people see these facilities they would be encouraged to go to the Angles Way for a great walk and then have a cup of tea or lunch.
  • The icons that Zach have created using Adobe Illustrator were also based on the visual language of the logo that they have come up with for The Angles Way, which is the image below:

Brand mark designed by The Graphic Comm Students:

  • Corrina, Zach, and Chloe

Figure 2: Theme Selection

The construction of this page has been done by Jason and Chloe. They both have worked together on this page which is similar to the design have they done previously, this is a digital version:

I personally think the design is quite nice and adapts a visual hierarchy by making the color of each theme different. There is also great usage of contrast which makes the content readable and understandable. The dark pictures in each block allow you to be able to see what the picture is and grasp the idea behind each theme. So I think they have done great overall, even though the design is nice, it does not suit my taste and I’d like to re-iterate on it once I have the chance to do so. That on the side, the design is quite usable and the users we have tested this on have mentioned that they like the design and the aesthetics of it.

I personally have more of an abstract approach/taste: such as the images below

The designs above are more trendy and more accommodating to my taste, however, it’s important to be realistic, and if their design works, it works. But I still believe it can be re-iterated and I hope to do so soon. What I find really interesting in these concepts is how simplicity is integrated along with shapes that are waves with different levels of transparency, creating the illusion of a wave. The border-radius on the images are really nice as well along with the implementation of blue buttons and the design of the bottom navigation in the image directly above this paragraph.

Figure 3: Landing Page

The landing page’s paper prototype has been crafted and developed by Naomi and Corrina, who are both talented and excel greatly at what they do. I think the concept and idea of what they have come up with are great and solid. The content on it is also quite nice, however, the actual information being displayed should be revised because when we have tested this on a few users in the Student Lounge, they had no idea what The Angles way was, which means we have to and must put content that explains what the Angles Way is, why they should visit it, media, and how it will benefit them to visit the Angles Way. Perhaps even mention the walking paths and routes they can take. As you can see there’s still quite a lot to do and variables we need to consider.

What I Think About The Collaboration So Far

I think the collaboration so far has been pretty enjoyable, educational, engaging, motivating, and communicative. I think all of us are able to work together very well. Ideas bounce from each other and we don’t get frustrated from each other or bothered at all. I’m grateful for that because I’ve been hearing how much other students have been struggling with others in collaborations, at the same time this makes me feel that Amy, their tutor, has made the right choice picking those three students. Collaboration is not just getting along each other well, it’s also about many other things such as the following:

  • Commitment, being committing in a team is essential and is key to the success of a collaboration. Being there when you need to, and being where you need to be at the times you are asked is very important. You need to be on time with your team to ensure you are able to catch up and you are sticking to the schedule.
  • Dedicated, there are times where your relaxing and you are taking your break. But what if at some point something bad happens, such as a file has been lost and something needs to be redesigned and recreated once again, at times like this you need to ignore your relaxation and get straight back to the computer or drawing board to redesign that piece of work once again. There are times where something like this has happened, so it’s important to be aware of this.
  • Communicating and understanding, of course, this is without a doubt a key principle in collaborations. You cannot work in silence and not share what you’re thinking with your colleagues. It’s a no brainer.

Overall everything is going as I am expecting it, and we will be meeting up tomorrow for a pizza gathering and to have a good time in the evening. It’s a good way to bond and engage with them, the relationship with the Graphic Comm students is strengthened through activities like this and allows us to be good friends. Collabing and ending up as good friends is part of the process, and I’m sure it happens in many companies and different industries.

This is the first week where I feel we actually collaborated on something and worked together, and I’m sure things will become more intense because next week is heavily development and coding based. I look forward to it because I do enjoy looking at code and writing it, making a product into something amazing is very satisfying.

What’s happening next week is Jamie has introduced Jquery Mobile on Friday and I’ll be investing it and taking a closer look. I’ll be playing with it and examining the code.

 

 

 

I also want to bring GSAP, Greensock animation into this project because I mentioned the usefulness of it in another blog post, which is here: https://ameeralashhab.nuacomputerscience.co.uk/wp/wp-admin/post.php?post=1984

It’s insanely powerful and it’s about many websites on awwwards.com have been created. They use GSAP to accomplish most of the complex animations and the incredible work of using Web GL effectively. Nonetheless, it’s exciting all in all, can’t wait for it.

End of Week 3——————————————————————————————-

Week 4: Monday 18th May 2019

Monday, apart of this collaboration project, or rather because we get along well, pizza night has been arranged and thanks to Jason for hosting this night, I decided to invite everyone to Dominos pizza under my expense. The reason I did this because I like everyone and getting together was great. I enjoyed the night. We watched a comedy show on Netflix until around 8:30 PM I ordered the pizza, and we grouped outside Gunton at around 5 PM, where Jason as picked Corrina, myself, and Zach up. While Naomi and Chloe have come with their own cars. We headed to Wymondham as that is where Jason lives.

Yep, Monday wasn’t particularly spent focusing on this project, but it was great to connect and spend time together like this. As mentioned earlier in this post, the collaboration of this project is a success so far because I always have heard people complaining about not getting good people to work with, so again, I’m satisfied and happy with the people I’m working with. They are intelligent, smart, intellectual, and demonstrate great designing abilities that will prove and carry this project to success.

We bonded over pizza and watching Netflix!

Tuesday, today was an excellent day at Oulton Broad. It was full of entertainment and overall I had a great with everyone. We headed to Oulton Broad for the purpose of exploring the location and taking pictures in relation to the project. Oulton broad is quite a tranquil location with the sea water and the trees surrounding the park that is in front of the sea. Here’s what I mean, as the pictures demonstrate this:

You can see how calming the environment and atmosphere is. I do have to admit that choosing and focusing on Oulton Broad for this project due to the lack of attention it has and the culture, it’s indeed a very good place to focus on for this project.

But further on, here’s what exactly happened today in order:

The journey to Oulton Broad was arranged on Monday (Yesterday) as Jamie has told us or in fact, it’s been mentioned on presentation day and even earlier than that, that Oulton Broad was the selected location. The journey began at 2 PM, we met at the RCP car park, I was there initially with Corrina, Jason, and Chloe. We waited for Naomi to arrive, we then headed to together to the train station to pick up Zach. From there onwards we made our way to Oulton Broad, which I believe took around 1 hour to be specific.

The moment we got there, we took out our gear and equipment. Corrina had her camera and Jason brought the Samsung Gear 360 which belongs to the university. We borrowed it so we can take 360 pictures at Oulton Broad, so we can apply it to this project when we design the prototype and the digital experience of the app!

We walked around this location: For around 3 hours until it was 5:30 PM before heading to The Wherry, which is a bar/restaurant. (Like Wetherspoons)

While walking I felt relaxed and calm, because of the atmosphere around me and it made realize that Oulton Broad is beautiful, I thought it was more beautiful than the first initial visit earlier in this project with Jamie and Anne. I’m not sure why I feel that way, but I just thought it was more interesting for me and engaging.

What makes Oulton Broad even better, is the Geese that we witnessed, along with the ducks:

I really wanted to interact with the Geese and pet them, but of course, that is not possible as I do believe these kinds of Geese’s are aggressive and probably unlikely to be unfriendly. However, I think they would let go of their aggressiveness if you provide them with some Bread. Which I have seen a lot of people do at London Hydepark. I recall seeing someone pet a duck or a goose after providing them with bread. As we walked further on, Jason has taken out his tripod and placed the Samsung Gear 360. We took several pictures with it, and this was accomplished through the idea of establishing a connection with Jason’s phone and then hiding behind the trees so we can get a high-quality picture.

Here’s a funny picture of Zach demonstrating this process:

What I also thought was cool is the fact that there were people boating if that is the right term for these particular sails:

Samsung Gear 360

Oulton Broad as stitched by the Samsung Gear 360 app.

The area by the footbridge over the small pond. 

On the edge of the jetty, stitched by Nadir Stitch.

Zach and myself connecting with nature, two wild creatures in their natural habitat.

I got the impression that there are interesting activities that happen at Oulton Broad and it’s docks. Even though Oulton Broads population may not be that significant as demonstrated by the website CityPopulation.de

Let’s say between 4000-6000 people for the Year 2019, targeting such a population with this digital experience will generate interesting results I feel. I’m saying this because I believe when you target a small population, you are more likely to have success with the targeting. Also when you take into account that Oulton Broad is a small town, you are more capable of getting attention compared to a larger city.

I think if we end up producing a successful experience for this project, and we deliver the project work to the Broads Authority, they can then expand on what we have made before implementing the final work into Oulton Broad. The potential of this project is really vast because people like digital experiences that provide entertainment, as well as educating them at the same time about the area and place.

By the time we were done taking pictures, it was time to head to The Wherry to have a good dinner, where I ordered a Fajita Chicken Wrap, and others ordered Wedges, sandwiches, etc… and a major point of all these events, this is enough evidence demonstrating that we are great collaborators and we are all committed to being together. Really it’s all clear by now. There is so much potential in what we can do.

After The Wherry, it was by this time,6:30 PM, where the beautiful sunset was around:

Indeed, it’s beautiful, right? I was exhausted and it was just about time to head home and prepare for tomorrow, what’s happening exactly tomorrow? well here’s what I am going to be doing.

  • Go for a morning run/jog.
  • Investigate Jquery Mobile.
  • Work on the Storehouse website for the release taking place next week on Monday.

So there will be quite a lot to cover and document once I have gone through the above activities and the work. So far, everything is going as planned and I do hope my work and contributions to this project allow me to achieve a 70% and higher grade for final submissions which take place on the 10th of May

Wednesday 20th – Thursday 21st May 2019

Wednesday, a day that I spent analyzing and experimenting with the Jquery Mobile framework. I had a bad impression of Jquery Mobile initially because it’s out-dated, it has not been updated for almost 2 years now and I read comments from critics stating that Jquery Mobile framework is not particularly the ideal or the framework that would many choose these days, why? this is because there are better frameworks like ReactJS, Angular, etc…and suggested alternatives rather than using Jquery Mobile is Semantic UI, Foundation, Bootstrap – but then I thought to myself what are these sources saying? These frameworks are for styling not directly offering JS based functions such as dragging, swiping, etc…so I now understand why it is that Jquery Mobile is indeed the ideal framework for this project and here’s a list explaining why:

Pros

  • An important thing to consider is that jQuery Mobile takes care of cross-platform and cross-device (iPhone, Android, Windows, Blackberry, and other platforms) issues so you don’t have to worry about writing different code for each device or resolution. This is a huge advantage that results in a unique, clean code that saves time and resources.
  • jQuery Mobile adapts the page to different Android devices with different screen sizes and resolutions.
  • You can create your own theme using the ThemeRoller – a useful tool for creating themes without writing any line of code.
  • jQuery Mobile uses HTML5 along with JavaScript for ease of development.
  • Layout grids made it easy for us to create the client’s product page, result page, and other custom pages
  • It’s easy to add collapsible menus

Cons

  • Based on the experience of others, it’s been stated that jQuery Mobile works fine for simple designs where you can use a default theme or create your own theme using the ThemeRoller. However, if you have something custom that you have made, there are a lot of things that have to be overwritten to obtain the results you are trying to get.
  • Since jQuery Mobile uses Ajax to navigate through pages, a user has run into multiple issues, like with anchors. The issue has then been resolved by resetting the Ajax navigation with the following code:
    $('a').attr('data-ajax', 'false');

- This disables the ajax functionality on anchors, which therefore mitigates the problem.

Conclusion

Since what I’m saying is based on other users, I am yet to come up with my own thoughts most likely by the end of this project. This is because we will be applying jQuery Mobile and therefore I will be able to get a true experience of this framework. The only experience I had with jQuery Mobile today was playing with the widgets and features they offered. I read through the documentation and tried different here and there, such as sliders, collapsing information, navigation bar, etc…

But what other people are saying is that jQuery Mobile is a very powerful platform for mobile application development. However, it doesn’t fit for all kind of applications especially when there is a complex design that doesn’t match with any of the custom themes. But other than that I will post a great review of jQuery Mobile at the end once I have had the full experience of utilizing this framework.

-> I wanted to go for fun later today after playing with jQuery Mobile but I could not because I was exhausted, so I went back and a 1-hour nap. I then proceeded with continuing the freelance work I am doing for Stardust. As I do work for Stardust on a part-time basis/contract. You can see me here on the website being mentioned that I’m part of the teamhttps://www.stardust.gg/

The work I am doing for Stardust right now working on a 3D Isometric Illustration and this is the progress of it:

It’s taken me around 5 hours to get to the result above, I’ll need another 5-6 hours I believe to finish this model/illustration.  I’ve only started learning how to use Cinema4D 2-3 weeks ago, properly. So I have managed to take huge steps here and there through YouTube tutorials. Overall I’m glad because I’m broadening my design capabilities and skillset.

Thursday, very educational morning session, but my enthusiasm and energy levels were ridiculously low and I could barely function due to a lack of sleep and here’s why…throughout the night of sleeping I woke up and slept again about 5 times. I’m not sure why I kept waking, but it could be the birds nearby because I could hear the chirping all night. I really thought it was weird because why would there be birds be chirping at this time? shouldn’t it be during the day?

I ended up going to university feeling tired, un-energetic and appeared uninterested in anything to people, however, I was interested in what was going on, and maintaining my attention was really hard because until I ate (lunch) my energy levels went up and I was able to be slightly normal again. What happened today is Anne, Erica, and Jordan have come to our room today. Erica is a biologist and is very knowledgable about the Carlton marshes and the whole broads area. Anne is, of course, the key stakeholder of this project, and Jordan works in the ideas factory as Business and Enterprise administrator, for the university.

What has been discussed with Erica is she pulled up a map that she had printed. A map of the broads and she explained the different locations and areas. She said so much that I had difficulties keeping up, but at the same time I managed to record key information that I found interesting and quite valuable to learn, here’s what I learned off Erica:

  • Oulton Broad is not in good condition due to lack of plants, some areas have reed beds, and this is due to the docks. It’s also not the richest place, but a key point on the map and is different from other areas.
  • Arable land is farmed, lots of pollution from farming gets into rivers. There are farmers who receive payments from the government to improve farming for wildlife and affect the environment less.
  • Peto Marsh – an arable land where people are going to create a big reeds nest to provide a decent habitat for other species.
  • There are people digging out settlements and plants, which affects the environment quite negatively, based on what I remember I believe this around the Carlton Marshes area.
  • There are local people in Beccles Marsh who help. The Wild Life contributes to the cleansing of the environment through volunteers from the RSPB and BTO.

So as you can see, this is just one part of what Erica has said, but it was great to have her today because she was pointing on the map and explaining multiple locations flawlessly, indicating a high level of knowledge and thus I couldn’t keep up! Erica, Anne, and Jordan have left at around 12 PM after they have left, Jamie has stated that we have 2 weeks before testing. We have to have a prototype in just 2 weeks! so Jamie has recommended us to group up. Which means work in pairs and perform the tasks we need to do. Sticky notes have been stuck on the wall with key tasks that we have come up with in order to develop the prototype.

We haven’t done a lot of work today because the Graphic Comm students have lectures and other important events to attend to. However, tomorrow, Friday is the crucial “do” day. This means Fridays are usually the days of the week where we work a lot on the project and it’s been defined as “Do” day because this is the day where we also stay in the room SA107 working till 4:30.

I’m looking forward to it and hopefully tonight I will get a good night sleep! I would hate to wake up tomorrow feeling the same as I did today. Otherwise, I will not be able to be productive unless I drink a lot of coffee. I couldn’t also stay too focused today because of my limited attention span, which is 45 minutes to an hour max. After that I need to move around and do something, I noticed we haven’t been given a 5-10 minute break, but I completely understand because we were really engaged with Erica and what she was saying so I did my best.

Friday 22nd May – 2019

I work up this morning feeling a lot better than yesterday and my performance at university was way better than yesterday, as I did mention the struggles I’ve gone through that night and day.

Today was a very busy day, from 9:30 AM all the way to 3:30 PM focusing on being productive and collaborating with my group. In the morning session till the afternoon we were working on designing the app or the digital experience, from previously we paired up to work on our tasks. Naomi & Corrina worked on designing the landing page and a few other pages, Jason & Chloe worked on the development of the 360-degree image with the hotspots experience, and Zach & myself worked on figuring out a potential design for the ‘grid’, which is the key structure and layout for the themes, as explained previously in a post of my blog.

Zach working on designing the grid system

During the morning session Zach & I worked hard to figure out a potential design for the grid system, however, we struggled, struggled, and struggled. We wanted to make something that is really trendy but also works. The number of times we moved text, resized content, changed colors, and so on is incomprehensible. We also look at designs for inspiration from Dribbble & Behance, here’s some of the inspiration we looked at.

These designs are really great, modern layout and structure, well-chosen colors that contrast with each other, great use of imagery that brighten up the whole design, and the typography as well are easy to read and it’s very clear.

But inspiration wasn’t our problem particularly, the problem was coming up with a design that fits the target audience of this project, which is adults and the older. It’s hard to design something that works for the majority of the target audience because works for one, may not work for everyone. So it’s important to stick to the basics for a project like this, but just because we stick to the basics it does not mean we cannot come up with fresh and innovative designs that work for the target audience.

Another important factor was to make the design constant and matching with the other pages, so that’s what made things, even more, harder and challenging. Zach is not a great fan of the boxes with border-radius, so that option had to be eliminated as well. But here’s some of the experimentation that Zach and I have done:

 

 

This is my personal input on the design, I really like abstract, hence why I have combined typography and shapes together.

Starting with the first image on the left, and onwards:

  • I first tried making the box holding the container fit or match the iOS theme because I really liked it.
  • Then I thought let me try making the box and reduce the blurriness, Nah that didn’t work.
  • Proceeding, I changed the shape to a circle and the text to red, that also didn’t work.

Simply, my desire was to come up with something unique and cool to use and interact with. I rotated the text because to me it seemed more interesting and fun to look at, however…

Does it work for the target audience? unlikely

Back to the drawing board, I went. It wasn’t even matching the designs that Naomi & Corrina have done which are as follows:

You can clearly see the difference between their design and mine. Due to this, I had to redesign it along with the help and advice of Amy and the team. Here’s the result after going through the edits and changes.

A change in colors has occurred to match the theming of their design. Three different themes, which are Cultural Heritage, Biodiversity, and Landscape Heritage. Each theme has it’s own color, in this case, Cultural Heritage is red, hence why it’s red, Biodiversity is green, and Landscape is yellow.

I personally like the design overall, but there are things that I would still change about it, I feel the arrows are positioned in a strange and a weird way, and I say this because they are inside the box with the text, they shouldn’t be, because they are unique elements of the page, therefore they should have their own space. But that is up for debate and is subject to change once I re-group with my team.

When Amy visited us at around 1:30 PM to check with Jamie on how we are doing, I was pleased to see her because I remembered the days where she was also teaching me back in Year 0. Her feedback and criticism are helpful when it comes to design because she really knows her field well and the feedback she gave me was to redesign the work that I did above to match the design that Naomi & Corrina have done, therefore it all connects and the designs are all relevant and connected to each other.

I’m happy with how everything is coming so far, but we have a lot to do this week, what’s next, is developing the pages above and writing the code so then we can proceed from there into making it an actual prototype. I look forward to it and we will for sure achieve excellent results I hope as long as we all work together as required till the last push.

Misc

Other than this project, I have also worked on designing artwork for the upcoming Stardust website, as mentioned previously in this post I was working on a 3D model for the website, it’s an isometric piece of art that will be placed in the header. It was a lot of work because it was the first time I work with a 3D software for that much time in a short time, as also the details in the design were quite time consuming and I needed to learn a few techniques here and there through youtube and also messaging a friend of mine who is highly experienced with 3D software.

The complete artwork for Stardust

I spent roughly 12 hours in total working on this model, and rendering it alone took 40 minutes. However, rendering times highly depends on your system. This is because you need a powerful computer that has a high amount of RAM and a decent GPU that has the capabilities of rendering graphics within a short time. For example, my laptops GPU is an NVIDIA 1050TI card, which is decent in this day and age but wouldn’t be the industry standard card. In this case, if I really want to step into the industry standard GPUs we are looking at an NVIDIA 1080GTX minimum, which is a very powerful card, and expensive.

You can see the Stardust website herehttps://www.stardust.gg/

Different Angles in the render:

The idea behind this artwork:

This concept was created based on my interpretation of what was required of me to design for Stardust. The idea was to make an isometric world that represents the company’s purpose. Which in this case is selling weapons and items of a game through the blockchain network of Stardust. This would benefit Stardust and the companies of the game. Stardust is a full-featured API and marketplace allowing game developers and publishers to easily integrate blockchain into their new and existing games, providing increased revenue and better game experience.

I’ve achieved to represent Stardust through this render by placing robots who act as NPCs of the game, there’s also the main representation which is the 2 toy items being held in a capsule, that’s the Spinner and the pyramid-like toy, which represent game items. The client was happy with the outcome, and I continue to work with him as a part-time Freelance contractor.

His name is Canaan and has given me a recommendation on my LinkedIn profile which I am happy about, he’s a great CEO and I am doing my best to push his startup to grow and become a big company because I would love to work for Stardust full-time. The idea behind Stardust is unique and I can see a bright future for the purpose they are trying to achieve.

Finally, I have also designed an icon set for the website, which is as follows:

You can clearly see what each illustration represents. I have created these using Adobe Illustration and the 3D feature that’s offered. Personally, it was rather easy to create these and I enjoyed creating them.  I don’t think I have encountered any challenges with this work, except the Render above, because it was completely out of my comfort zone, and I say this because I am not highly experienced with 3D rendering software, however, making that render particularly has boosted my capabilities significantly because I learned the basics of lighting, shadowing, and modelling. Great start!

———————————————————————————————————————————————————

This ends week 3 and 4, the next post is week 5 and 6, which will be the development of the digital experiences for the broads project and I can’t wait. I’m looking forward to working with my team most certainly.

Bibliography

Brause, C. (2017) The Designer’s Field Guide to Collaboration. NY: Routledge

Citypopulation.de. (2019). [online] Available at: https://www.citypopulation.de/php/uk-wards-eastofengland.php?adm2id=E05007242https://www.citypopulation.de/php/uk-wards-eastofengland.php?adm2id=E05007242 [Accessed 19 Mar. 2019].

UK: market share held mobile browsers 2014-2018, m. (2019). UK: mobile internet browsers market share 2014-2018 | Statistic. [online] Statista. Available at: https://www.statista.com/statistics/489413/uk-market-share-held-by-mobile-online-browsers-by-month/ [Accessed 13 Mar. 2019].

Imaginenext.ingrammicro.com. (2019). 5 Benefits of Collaboration in the Workplace. [online] Available at: https://imaginenext.ingrammicro.com/trends/october-2017/5-benefits-of-collaboration-in-the-workplace [Accessed 9 Mar. 2019].

Harvard Business Review. (2019). Good Bosses Create More Wellness than Wellness Plans Do. [online] Available at: https://hbr.org/2016/04/good-bosses-create-more-wellness-than-wellness-plans-do [Accessed 12 Mar. 2019].

MDN Web Docs. (2019). CSS Scroll Snap. [online] Available at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap [Accessed 13 Mar. 2019].