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.

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——————————————————————————————-

Bibliography

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].