From here on I shall be writing a reflective journal going over what I have done during the week for my upcoming project. These are going to be short articles that briefly summarise my progress, so here is my reflective journal for Monday 8th to Friday 12th January 2018.

Monday 8th January

Following the web analytics project, I was given the next project to complete. This project will last until May and will involve researching, defining user profiles using user research, wireframing, prototyping, testing, delivering and then further improving (using tools such as analytics) a responsive website for a real client. It is essentially a combination of the ‘Designing for Function’ and ‘Prototyping’ projects that I completed in 2017 as part of the first module of the course with the web analytics part of this module included at the end to review the data. This is not a coding project nor is the goal of this to make money, it’s more about understanding and applying the process of carrying out user research and going through the various stages of the development process to produce a final product.

Finding a client to work with was up to me, however very fortunately the previous night I had been contacted by a local man who had seen online that I was studying this course at university and wanted to talk to me about potential opportunities to work on projects with his charity and company. I replied back and mentioned that I had been given this project to complete and he seemed interested. He suggested that we met a local pub on Thursday 11th to discuss this further.

After this, I created a moodboard (the feature image of this article) which shows some interesting designs that appeal to me. I really like the idea of futuristic, mobile-friendly and beautiful designs for the web hence why my moodboard has many images like this. I’d love to be able to create a website with a futuristic theme, it would be very unique and definitely something for the client to be proud of!

Tuesday 9th January

Researching popular mobile devices to explain statistics collected during my Google Analytics task in the previous project and this project being about creating a responsive website inspired me to use Statista to research some more information on smartphones so I had an idea of which devices are popular and thus would be ideal to target my website at. Using Statista, I found the following data:

The graph from Statista above shows market shared held by leading smartphone operating systems between January 2013 and May 2017. Generally, BlackBerry OS’s (BB OS) market share has been declining since 2013 with a small rise in February 2014, perhaps due to the launch of a new model, but generally it has been on the decline. Prior to January 2013 BlackBerry’s once very high popularity and market share had taken a sharp decline as the company failed to compete with the likes of Apple and Samsung, but in January 2013 several new BlackBerry devices were launched which may have sparked interest again. However, as of 2018 BB OS is no longer supported by BlackBerry and hasn’t been for over a year now and the company has since switched to producing Android devices instead as a result of this declining market share.

Windows Phone has had ups and downs since 2013 but again, it has been generally declining in market share since around August 2015 when Windows 10 came out and wasn’t a massive success on mobile devices due to bugs, limited software support and limited hardware, mainly. In October 2017 Microsoft eventually called it a day on Windows 10 Mobile and Windows Phone in general and the company has no confirmed future mobile platform at this point in time. Microsoft is currently migrating a lot of their apps to Android due to the popularity of the platform and it appears to be the platform that many former Windows Phone users are migrating to due to the range of devices on offer.

Android and iOS have always have much higher market shares, with iOS’s usually being between 30 and 40% (with a high of nearly 50% in December 2016) and Android’s usually being between 50 and 60%, but with a high of just over 60% in May 2017.

Apple is clearly the most popular smartphone brand in the UK with almost half of all smartphones in the country being made by Apple, which is interesting given that iOS has a lower market share than Android. Samsung is the second-most popular smartphone brand in the UK with 34% of all phones being Samsung and the other brands such as Sony, HTC, Nokia, LG, Motroloa, Microsoft and BlackBerry all make up a very small proportion of the market share. The reason why Android has a market share in the UK than iOS despite almost half of all smartphones being iPhones is because Android is available on a massive range of devices: everything from high-end Samsung, Sony, HTC, LG, Motorola and Huawei handsets, to their mid-range and low-end models, to ‘off-brand’ phones and tablets. 2% of the market share is made up of ‘other’, which are likely all Android devices from smaller, often Chinese or Taiwanese, companies.

From this data I can conclude that most smartphone users will be using either iOS or Android devices and so these are the platforms to target. It’s important that the site is compatible with browsers for these platforms. Research from my analytics project concluded that the most popular browser on iOS is Safari and on Android it was Chrome – both of which are the default browsers on these platforms.

Visit from Terika Seaborn-Brown at Foolproof

Terika Seaborn-Brown from Foolproof.

In the evening, Terika Seaborn-Brown from UK-based UX agency, Foolproof, came to NUA and delivered a presentation to my peers and I about user research. Terika is a principal consultant at Foolproof who describes her job as:

I help clients understand how to make it easy for their customers to do business with them. As a Principal Consultant, I’m responsible for understanding our clients’ needs, shaping project and programme briefs, ensuring quality execution, and encouraging the implementation and socialisation of research findings. I’m passionate about weaving together quantitative and qualitative data to offer a complete picture of the user’s experience.

The presentation encompassed researching user personas, journeys and diaries to help start the development process and also how to act upon a project brief sent by a client and what kind of things they should include and the things that they typically forget to include. It was a perfect time to present this information to us because we were all at the beginning of this new project which involves working to customer requirements and making sure that both parties understand what is needed. As part of the project, customer bases will also need to be researched in order to help enable us to create a product that works for its users. Terika’s professional yet down-to-earth and personal approach to business made for a very engaging 3 hour long presentation that had my peers and I hooked. My personal favourite anecdote of hers was giving blunt and irrelevant answers to clients who simply ask her and her team to ‘do what they want’ to improve their product (or similar). Often she should reply with something irrelevant like ‘we’ll make the product for children then?’ when the product is clearly aimed at adults (for example). Although principally her presentation was about research, Terika was happy to answer other questions relating to UX in industry such as how to present to clients, what made certain user interfaces groundbreaking at the time (referring mainly to iPhone OS running on the first iPhone on 2007) and even discussed topics such as women in the industry with Naomi Winter, a peer of mine.

It was an excellent presentation which was highly informative, useful and delivered by a true professional with a great background. Terika is definitely a professional that I would aspire to be like.

Wednesday 10th January

I didn’t do a lot of work on my project because I was waiting to find out about what my potential client wanted, so instead I looked at some navigation options on CodePen.io which is a great site for finding small code snippets for use in projects.

The navigation shown in the video above is done using Flexbox, which was used in my web analytics project as part of the Bulma framework. Being based on Flexbox it looks elegant and rather beautiful and will scale well to mobile devices, however it may not be compatible with older web browsers such as Internet Explorer 11 so depending on the target users that the client has in mind, it may not be the best solution. Terika from Foolproof also said the use of the ‘hamburger’ icon to open a menu on a desktop website doesn’t always make a lot of sense to users who don’t know that clicking on that button will open a collapsed navigation panel and that generally buttons with text in them are best to use as they are the most logical.

The navigation shown above is definitely extremely unique but takes up a lot of room and will require great iconography to make it really obvious to the user what each button does. Perhaps it could be rotated lengthways and be put at the top of a website?

The menu in the video only has social media links on it and is perhaps designed to go at the bottom of the page to hide social links, but I think it could be adapted to work as the only menu on a website. I really like this design, however if I were to use it in a website I would place the button that opens the menu at the top of the page and also put some text on the button that says ‘Menu’ (or similar) to make it obvious to the user that clicking on that button opens the menu and maybe put the page titles on the menu (with an icon) to make it clear to the user where to click.

These are just a few examples of the kind of thing that I’d like to put on the final website. I feel they’re all unique, beautiful and get the job done.

Project with Emma

I started a project with a friend who studies Graphic Communication at my university. We met each other at the university’s coding society where we began to work on creating an ‘Instagram replica’ together, the idea being that it would be a site where users could upload a photo and then be presented with two photos at a time, of which they had to choose one that they liked. Then they would be presented with another two. Up until now we had only produced a non-functioning mock-up of a ‘profile page’ using very basic HTML and CSS, but from this point forward we decided to actually try and create the site.

We called the site ‘Inspix’ (‘ins’ being derived from ‘instant’, with it being a mobile web app and ‘inst’ being a popular prefix in the photography community at the moment: ‘Instagram’, ‘Instax’ camera and so on. ‘Pix’ meaning pictures or ‘pixels’, inferring that it’s a digital application for digital photographs) and set about designing a logo. We spent a lot of time thinking about elements to include in the logo such as hearts or Polaroid photos and also the shape and colours of the logo based on logos for current popular photo apps and in the end we came up with this:

Emma created the logo and came up with the majority of the brand identity, but it was great to do this with her because although I’m not doing it for my own project yet and it is likely that my client already has a brand, brand identity is something that UX designers need to take into consideration when designing interfaces. The use of colours is essential not just in logos but also in interface design so talking to Emma about this and finding out from a graphic communicator about colours, brand identity and logos will definitely help me in the future. It’s also really enjoyable to teach my skills to somebody who is keen to learn about coding and digital design, so I feel that this project is a great collaboration and knowledge-sharing exercise for both of us.

Thursday 11th January

I met with the man who contacted me the week previously to discuss the project. It was a very interesting meeting, I feel that generally I came across well in the meeting (though it did feel a bit like a job interview at first which I wasn’t expecting! But I guess he just wanted to get to know me and find out about what I have done in the past) and came away with a fairly clear understanding of what he wanted. He mentioned in the meeting that he didn’t want the full details of the project initially exposed, so for the time being all I will say is that it will involve creating a website for his charity which is involved in several sectors, including energy, internet and IT support. The project sounds exciting and interests me because it’s charitable and he has a clear vision of what he wants, but there will be a lot of work involved and having such a clear vision can sometimes make showing clients alternative ideas harder.

Friday 12th January

I emailed my course tutor about my thoughts from the meeting the previous evening and he replied saying that he would talk to me about the project on Monday 15th.

I spent the day mainly researching how to upload files to a server on a website, in the end I used a library called Node.js to do this. I researched this because it will be useful to do in the future but also because I wanted to try and make mine and Emma’s project more functional by allowing the user to upload photos to our site and then see the photos that they have uploaded displayed on the website. An article about how I did this and how to put a button on a website that uploads files to a server can be read here.

Since I didn’t commit to completing the project for the client and therefore don’t know exactly what he wants (the requirements he specified may change when he sees what the university is requesting of students completing this project), there is little else beside consider possible interface designs and navigation options that I can do to advance the project. I did however start looking more at UX websites which lead me to write my recent blog post on poor communication in error messages and alerts as well as follow the UX Magazine on LinkedIn who post regular updates on UX in the industry. I should really read more UX sites to learn more about trends in the industry and where my interest is going.