Hannah Haslem

IXD303

newspal. iPhone App Prototype

Research posts 

IXD304 

Heroes & Villains iPad Prototype - Final

Heroes & Villains Prototype - First Draft

Here is the link to my prototype for newspal. the iPhone app. This prototype shows how my app works so far.

After my last feedback session with my lecturer and discussing the changes I had made since the previous feedback session, it was suggested that I could add progress dots to the sharing screens to show users how many social media platforms they had chosen to share the article on. I liked this idea and I hadn’t thought about including this feature on this screen as I felt it may make it too cluttered. I decided to try this out, as by including this micro interaction, it would make this set of screens more interesting to users. Overall, I am happy with how this looks and feel it works well with my app and branding. I have also limited the choice of social media platforms users can choose to 3, also if they choose a messaging app, they can choose 3 contacts. My lecturer suggested that this would work as the whole app is built around the user choosing three categories and with choosing contacts and social media platforms, no user would want to share one article across 8 different social media platforms and all their contacts on their phone. I like how this fits with my brand and app, it ensures consistency and gives my app an USP.

(before on left and after on right)

After making the changes suggested by my lecturer, I decided to change the menu on my app. Originally I had planned to use icons to navigate through the app to different sections however, I felt this didn’t match the overall look and style of my app. I decided to change it to a hamburger menu in the bottom right corner of the screen. Before making the changes I did a bit of research to see if this would be a good option to place my menu in this area of the screen. From my research I found that this is part of the screen is easily accessible to the user, as people normally use one hand to use their phone and therefore it is easier for them to reach the bottom right and left screen sections as opposed to trying to reach the top right and left screen sections. The image below shows an iPhone screen split into sections that are easy to reach and access and screen areas that are more difficult to access. 

Menu Sketches 

Digital Wireframes 

Final (before on left and after on right)

After being told that our deadline for this module was being moved from May to the first week in April, due to the current Coronavirus situation, I wanted to try to finish my interactive digital publication to the best of my ability. 

At this point I had the majority of the sections designed and completed, the only section left was Measuring Mr Holmes. We were told that if we didn’t have this completed, not to worry about it. However I decided to design a few screens of this section to give my lecturer an idea of how it might look, if we had been given until May to submit it. 

I had a rough idea in mind for the introduction screen of this section, which I had already sketched out. As I had a starting point for Measuring Mr Holmes, I continued to work with this idea by sketching out some layouts for a few of the information screens. Based on my initial sketch, I designed the information in the form of an open book illustration, to show the data I had found.

Once I had sketched out these screens, I began to design them digitally. As I already had the typography, colour scheme and icons chosen, it was just a matter of designing the book illustrations. I found a very helpful article by The Guardian which shows and explains a range of data from the Sherlock Holme novels written by Sir Arthur Conan Doyle. The data I wanted to take from this article was:

How many cases the main characters appeared in

The types of crimes committed 

The most common clues to solve crimes

I therefore used these three areas of data in my Measuring Mr Holmes section.

My lecturer had also suggested that because my app is based on personalising the news to each user, I could possibly include a screen/s to allow the user to choose a colour that they would like to be the main colour of the app instead of using purple the whole way throughout the app, as it is my brand colour. He suggested this because many users may be put off by the use of the colour purple so I took some time to think about this screen and sketched out a rough idea of how this screen could look. Once I was happy with the layout I had sketched out, I created a set of digital wireframes to get a better idea of how potential content could look on this screen. After this, I moved onto adding the colour and content to this screen and I am happy with the overall look of these screens and feel it adds another feature to my app that many news apps don’t include.

Sketches 

Digital Wireframes 

Final 

Heroes & Villains - Updated Navigation 

In a previous post I talked about the new navigation I had designed for my publication, however, after doing some user testing, I realised that the user found navigating back to the main section screens quite confusing as they weren’t sure which screen the arrow would take them to. 

After thinking about this for a while, I decided to take a similar navigation style to my first draft of this prototype, were I had used arrows and the title of each section to let the user know where the arrow would be taking them too. I decided to still include the arrows and also the section titles but present it in a different way. I thought the most interesting and suitable way to show where the navigational arrows would take the user would be by using hover state so that the section title isn’t shown the whole time, only when the arrow is hovered over. 

In my feedback my lecturer had also mentioned that I should add some micro interactions to the screens where users can choose their three favourite news categories. As my brand features dots as one of the main consistent elements, he suggested that I could use dots to show the users progress through choosing one to three topics. I really liked this idea, after editing the onboarding screen, I experimented with adding dots to these screens and am happy with how this turned out when viewing the prototype.

(before on left and after on right)

Before adding a choice for the user to choose their own colour scheme for newspal. I looked at some existing applications/websites that allow users to edit the colour of certain design elements and the overall colour scheme. 

- Tumblr - over the last few days Tumblr has released a new update to their mobile app and website. This update gives users the option to change the entire colour scheme of their dashboard with the click of a button. On Tumblrs website, users get the option to choose from 6 different colour schemes including dark mode, cybernetic, cement, low contrast classic, canary and the original colour scheme true blue. The Tumblr app for mobile devices allows users to choose from 4 colour schemes including dark mode, low contrast classic, the original true blue and system default which uses the devices settings. This is a good feature that Tumblr has added to their website/app as it allows users to choose from a range of colour schemes to make their tumblr dashboard their own. As a user of Tumblr I’ve never really been the biggest fan of their original colour scheme so now that this feature has been introduced I’m currently working in dark mode, to match the settings on my laptop and phone.

  - Apple - If anyone knows Apple at all you know that they released a dark mode feature over the past 2 years on macOS 2018 Mojave update and it became a success. Although before dark mode was released as an option on all their devices, Apple had a feature through System Preferences where users could choose the colour of accent elements and highlights. Originally these elements were a default blue colour but with this feature Apple are allowing users to choose their own colour and make their devices their own. With dark mode introduced, users now have the option to choose between 3 appearance options which are light mode, dark mode and auto. Dark mode darkens the colour scheme so that content the user is viewing and working on stands out while the windows and controls fade into the background. Light mode lightens the windows and controls and blends with with the content on screen. The auto option, when selected, changes the appearance depending on the time throughout the day, for example in the morning until evening time, the display is in light mode and from evening time until night it uses dark mode. Overall these are good features that Apple have introduced over the last few years to give users the option to make their MacBook and iMacs their own. 

- Twitter - Twitter is another application which recently introduced a dark mode feature. Users can select from using the devices settings or dark mode. The dark mode option has two themes; dim and lights out. The dim theme uses a mixture of dark grey and dark blue shades to transforms their UI into a dark mode theme, whilst the lights out theme takes dark mode one step further by using black and dark grey shades to make the UI completely dark and similar to the dark mode available on iPhones. This is a good feature as it is giving users the choice to edit how Twitter looks on mobile devices and has the option to be matched to the users phone settings. Ever since dark mode was released on Twitter, I’ve been using dark mode and the dim theme and I definitely won’t be switching to the light version of Twitter now as I find the white shades they use are too bright and can be difficult to view. 

My lecturer suggested that on the onboarding screen I should centre the dot which can be seen at the bottom on the screen. Originally I had the dot to the left but it didn’t work well with the content on the screen. After speaking to my lecturer I changed this on the onboarding screen and I now feel that it looks much better with the content on the screen working better within the centre of the dot.

(before on left and after on right)

After speaking to my lecturer about my current app newspal. I received some feedback. The feedback and changes will be shown below and in more posts to follow. Before editing and changing some of the screens on my app, I sketched out some new wireframes for specific screens to give me a better idea of how my new screen designs could look.  

Once I had sketched these new screen designs, I made some new low resolution wireframes to get a better idea for these designs. Once I was happy with the low res digital versions I created a quick user flow of how users would now get from the onboarding screen to their news feed to sharing an article. Before adding the colour and content to my new screens, I wanted to make this updated user flow to make sure that the user would be able to clearly navigate through the app even with the addition of new screens.

Now that I was happy with my new screen designs for newspal. I started to create the screens digitally including the content, images, typography and colour. Below you can see the final screen designs for newspal. Overall I am pleased with how these screens look and will wait to get feedback from my lecturer before making any further changes to my app. 

Heroes & Villains - Navigation 

Originally I had been using arrows and section titles to navigate through each section. Although I thought this type of navigation would work and be suitable for the user to use to get from one section to another, after the feedback session, I felt like this wasn’t the easiest way for a user to navigate and was quite confusing as there were two arrows on the left and right of each screen. 

After taking sometime to think about how I wanted to change my navigation, I thought of the idea to use dots for each section, to show users how many screens are in each section and arrows to navigate to different sections. For example, the television section has 5 dots, one dot per tv episode. The active dot is bolder whilst the inactive dots are paler to show the user that the information on those screens can still be viewed. I have included a video of how this navigation now works and the original navigation can be seen in the first draft of my prototype.

The arrow on the left hand side of the screen takes users back to the main section screen, where users can choose which type of Sherlock Holmes adaptations they want to view. This works the same way across the whole publication for sections which have more than one screen. I feel that this type of navigation is clearer than my original and works well with the style I have designed for my digital interaction publication. 

Below is my first version of my user flow for newspal. before getting feedback from my lecturer. This user flow shows how the user will get from the onboarding screen right through to their news feed screens and how to share an article. 

In a previous post (linked here) I talked about the initial wireframes I had created for my news app. Since I created these initial designs, I have changed the layouts of some of the screens to make them easier to use and view on a phone. These new wireframes are shown below. Once I was happy with the new set of screen designs, I created them digitally to get a better idea of how content and images could work in the design. I am happier with these new screen designs as I believe they all match the style I want to achieve with this app, clean, uncluttered UI and easy to use.