My re-design of the iHull app

Overall I have tried to simplify the design of the iHull app, as when reviewing the current iHull app design, I felt that the original version had too many unnecessary sections. It also wasn’t very user friendly and didn’t take into consideration the needs of other users like those with disabilities and international users.

The current iHull app didn’t really have a set colour scheme at all, and instead seemed to have a bright, multi-coloured appearance which I feel was a bit too excessive and didn’t look very uniform. I decided to simplify the colour scheme on my design and I decided to stick to 5 colours which I feel looks really effective. I’m hoping that the colours I have used are appealing to the majority of the users.

Here is the first page that the user would be greeted with when first opening up the app. As well as having the iHull logo on this page, I also decided to include the official University of Hull logo to hopefully show the app is genuine. I decided to keep it fairly simple and self-explanatory and stuck to a basic log-in page look. The user would use their ‘Single Sign-On’ number and password from the university, this is to keep things more straightforward as the app would automatically know what kind of user they are (Student, Lecturer, Other Staff member etc) and it would then tailor the rest of the app to meet their certain requirements. There is also the option to ‘Stay Logged In’ which I felt was really important to have the option to do as this was something definitely lacking in the original iHull app which seemed to log out of every individual section each time the user went out of the app which was really annoying.

This is the main page to my app – I wanted it to be almost like a ‘newsfeed’, where all of the most important parts of the app would be in one place, I have presented this in a scrollable weekly view timeline. I felt that this kind of layout is similar to those used in other forms of social media, so therefore should be more user friendly. On each daily section on the timeline, the important things for that day would be shown – most notably the lectures from the users timetable, then using information from the users ‘Canvas’ account, any announcements and alerts would show up on here too (these would also show as a notification on the users phone if they choose to have that option – see below on the ‘Notifications’ section).

The user can access their university email account from the main page on the app. I tried to keep the email section fairly basic – it is split into an inbox and sent section where the user can then view their emails. The emails in the inbox are also colour coded – the icon will be blue if it is an unread email and grey when it’s been read. The user will also be able to compose their own messages by pressing on the icon in the top right corner.

Here you can see the side menu that appears when the user presses on the button in the top left corner. When designing the app, I really tried to focus on only including the sections that I thought were really essential for the iHull app, and have eliminated quite a lot of unnecessary ones.

Here’s the more detailed timetable section. The user will be able to scroll through the calendar layout to any month and then press on any day, any lectures for that day would then show underneath. I tried to keep this layout as clear as possible.

The ‘Assignments’ section of my app would again use information brought from ‘Canvas’. The main part of it would show a basic overview of the users current assignments. They can then click on each of the individual assignments and get all of the information about them. There would also be an option to submit assignments through the app if the user wishes to do so.

Here’s the ‘Library’ section where again I have tried to narrow down and simplify the options offered compared to the original iHull app. At the top of the page there is a basic search bar where the user can search for books, when they have searched for things they are taken onto another page where their search results will be shown and it will provided more information on where the books are located in the library etc. On the library section the user may also book rooms by pressing onto a day on the calendar which will then take them onto a page where they can select a time and room type. Finally, at the bottom of the page is a small section with the library opening times which I felt is important important to include on the app.

 

Here’s my ‘Accessibility’ section. I felt that this section was crucial to ensure all users of my app have a straightforward experience. On the accessibility section, I’ve included the option for the user to change the text size and spacing. There is also an option for the user to change from the apps current all caps setting to regular, this is because some people with dyslexia may have difficulties reading all caps writing. After doing some research into dyslexia, I also found that they find it much easier to read sans serif fonts, hence why I have used the font ‘Arial’ throughout my app. I also found that they find it easier to read font sizes 12pt-14pt, I opted to do the majority of my app in 12pt, but as I said above, there is an option on the accessibility page for the user to change to a bigger size if they wish. During the research I found that dyslexic people find it easier to read things with dark-coloured text on a light (but not white as this can be dazzling) background, I have tried to stick to this as much as possible throughout my app. Users with audio disabilities shouldn’t have a problem using my app as there isn’t any part of it that includes sound. Users with epilepsy also shouldn’t encounter any problems as my app doesn’t include and seizure-inducing content.

I also decided to include an area on my ‘Accessibility’ section where the user can view disabled access points and disabled parking around the university, again I felt this was important as this was so ensure the inclusion of all users.

I decided to include a ‘Notifications’ section on my app. The user will be able to select whether they would like to receive notifications at all and they can choose how the notifications will appear on their phone and on the app. Personally I feel like receiving notifications for the various alerts you may receive from the university is an important factor to the app, especially regarding short-notice announcements and alerts from the university like room changes or lecture cancellations –  at the moment the only way to view these would be to read an email or to see it on Canvas. By having it sent instantly to your phone would help the user to see these alerts much quicker.

Here’s my ‘Safety’ page which I decided to keep from the original iHull app, but just re-designed it to my aesthetic. I felt like the page was vital because it provides information on various services the user may need in an emergency. I decided to keep the layout of this page very simple, and the user will be able to access the the links and phone numbers provided by clicking on them.

Another factor to the current iHull app was that it didn’t have any options for users who have English as a second language, which again isn’t very inclusive considering there are a lot of international users. Here, I have included a language selection page which has a fairly basic scrollable layout where the most popular language are listed. This would translate the whole of the app into the users selected language, and any notifications from the app that they receive on their phone.

Overall, I am pleased with how my re-design of the iHull app has turned out. I have tried to simplify it quite significantly and have eliminated quite a lot of sections which I felt were unnecessary from my research into the current iHull app and the other university apps and hopefully adding some new sections like ‘Accessibility’ and ‘Language’ will help to make the app much more inclusive.

Additional Design Ideas

An additional design idea I had was the possibility of the user being able to change the apps colour scheme to their own preference. Even though this is quite a simple change and some users may not necessarily be interested in doing so, I personally feel like this would be a fun and quirky way to customise the app for the user.

Here’s an example of the settings page the user would go on to change the colour scheme:

Here’s the current blue colour scheme:

Here’s a few examples on how the app could look using the other colour schemes:

I feel like these colours all work really well with the other graphics used on the app pages. If this possibility of being able to change the colour schemes did ever go ahead on my app, I would have to make sure all the font colours and graphics are still visible, especially in some of the lighter colours which I have shown above like the yellow.

Stakeholder Analysis

The main users of the iHull app would be both Students and Staff at the University of Hull. These general groups can be narrowed down into even more categories – for example students may be full/part-time, international, disabled, commuting students, students living in Hull who are from other towns and cities and students who have placements or a year in industry. As with the students, the staff range is also very wide. The staff at the University of Hull might be lecturers, admin staff, disability carers, cooking staff and cleaning staff.

In general, the general group of Student’s would require general things they need for their day-to-day student life and studies. This would most notably be a timetable and access to student resources (Canvas).

The staff members requirements would vary amongst the different types of staff – lecturers and other teaching staff would need a timetable too and an area where they can organise/view meetings and tutorials. Other members of staff may have other requirements like work rotas.

When re-designing the app I must also take into consideration other stakeholders who may come across more challenges when using the app. These may be users with accessibility problems for example : Sensory impairment (loss of vision/hearing), Physical impairment (loss of function to body) or cognitive problems (learning impairments/loss of memory). International users may also have more difficulties in using the app if English is their second language

Other University Apps

I decided to have a look at some other university apps by searching for some via the app store and having a look at what they offer and how they appear by looking at their screenshots that are shown:

University of Leeds – ‘UniLeeds’
University of Sheffield – ‘iSheffield’
University of Nottingham – ‘MyNottingham’

I researched into these apps and found that they are all made by the same developer as the iHull app – ‘Ex Libris CampusM’. This would explain why all of these apps I have shown all have a similar look – they all have the ’tile’ design for the different pages and the same menu at the bottom of the page where the user can press on the different options (home, settings etc).

Overall, the apps seem to offer similar options – most notably the student timetable which is understandable as it is definitely a key feature required on a university app.

Out of the three apps that I have looked at, the ‘UniLeeds’ app was the one that had the least amount of options on the home screen, personally I feel like this more simplified layout would probably be the right way to go in regards to redesigning the current iHull app as it isn’t too overwhelming.

Both the ‘iSheffield’ and ‘MyNottingham’ were much more similar to the ‘iHull’ app, they all seem to use lots of colours in their designs and they have lots of tiles and things to press onto – again, I feel that this is quite overwhelming for the user and offers things that are quite unnecessary and maybe wouldn’t even be used.

Spellzone Task

https://xd.adobe.com/view/f39500be-a744-4e44-4678-79522a0f45b8-85a4/

I’ve been asked to significantly simplify and redesign the UI/UX for the introductory and on boarding screens for the website spellzone.com.

I decided to do my redesign in an app form, as apposed to the current desktop website. This is mainly because I feel that apps are already simplified versions of websites, and it would help me to stay in a more simplistic design.

I tried to give the overall design a modern, basic aesthetic. I also stuck with the same colour scheme from the current website as I felt that this was already really effective.

Here’s a few examples of some of the pages on my app:

I tried to keep the overall app design fairly simple, this was to stay in keeping with the requirements from the brief and also because I felt that it gives it quite a modern appearance.

The first screen (1) that the user would be greeted with when opening up the app is a basic log-in screen. If the user already has an account, they can log in using either name/password combination or via Facebook, Google or Instagram. I feel that having more options on ways to log in gives the user more ease in that they don’t have to always remember loads of passwords which can be quite annoying. These users would then go onto their own profile screen (4) where they can access all of their individual ‘Spellzone’ courses and services.

If the user doesn’t already have an account and presses on the ‘Don’t have an account? Sign up now!’ button they are then shown a few on boarding screens (2) which explains more what ‘Spellzone’ is. After these, the user is shown some options of the various pricings or a free trial. The user can then go onto sign up for one of these if they wish on a sign up screen (3) which again like the log in screen offers the user a chance to log in through other social media accounts. The accreditations of companies that support ‘Spellzone’ are also shown on here as I felt this was important to show that the company is trustworthy.

Review of current iHull app

The first thing you see when opening the iHull app is a colourful screen displaying various tiles. I feel that this layout isn’t too bad, as it is fairly clear and simple, the main problems with the app seem to be when going onto the various sections. I also feel that the designs and logos of each tile could do with modernising.

Timetable

The timetable section has recently changed. Images 1 and 2 show the old design which really didn’t work. First, the screen size hasn’t been resized for use on an app, it is still the desktop dimensions which isn’t very user friendly at all. After logging in, the user then has to navigate the awkward sized timetable which again like the log in screen, hasn’t been resized for the app and so the user has to move it around and only can view small parts of it at a time.

Images 3 and 4 show the new, updated version of the timetable section, which is definitely much more user friendly. After logging in through the single sign-on service, the timetable is then presented in a much clearer way. The information is displayed in the correct size for an app, and is fairly clear to understand. Previously, the app would log out of these sections after exiting the app but I have found that since the recent update this no longer happens which is much better.

Canvas

As in some of the other sections, you are brought to the single sign-on screen again when pressing on the canvas tile. The canvas section has been resized from the desktop version for use on smartphones which is great. The section seems clear enough and I appeared to stay logged in after going out of the app.

However, there is already a separate canvas app (image 3) which I feel like is probably more popular. You can receive notifications off the canvas app and I feel that the layout is more user friendly.

Locations

On the locations section, the user is able to search for various university buildings and it then shows the location on a map which you could then view a bigger size version. It also provided outside links to other map apps if the user required directions. I did notice that there were a few errors on the larger of the maps – most notable the placement of the popular ‘Spar’ shop which was placed in the wrong building.

I’d also like to note that I feel that most users will use another form of map app to search for buildings and directions as most smartphones come with built-in map apps (for example Google Maps or Apple Maps), therefore I feel that this section on the iHull app may be quite unnecessary.

University Email

The Email section doesn’t use the single sign-on service as in the other sections of the app and instead you have to sign in through your email account which is understandable.

It also seemed to stay logged in after going off the app which is great. However, I feel like most users would already receive their emails to their phones email app, which would almost make this email section unnecessary. I also couldn’t find a section for email notifications which a regular email app has.

There are also some other sections on the app which may be useful like a safety section which had lots of important phone numbers for security, the emergency services and other services. I found that the library and find a PC sections were also quite a good idea – they seemed to work okay and provide the information that was needed.

There were also some other sections on the app which I felt were quite unnecessary for example the online store and review section. I have never personally needed to go on these and probably never will and I feel like other people would feel the same.

I also feel that the bus timetable section is not needed. I think that most people who use public transport to get to and from university use the actual bus company apps, which are generally much more reliable in regards to the bus times etc and you can also buy bus tickets and store passes on there, which I feel most people, myself included already do.

There are also other aspects that I feel the app is missing – for example a language setting for users who don’t speak english. There could also be more information for users with disabilities.

Overall, I feel like the iHull app has too many sections that are unused and quite pointless and probably need removing completely. This would hopefully simplify the app and leave the key sections that users would find really useful.

App Inspiration

Here’s my Pinterest board for UI/UX app designs inspiration: https://www.pinterest.co.uk/hindsuzannah/uiux-app-designs/

I found Pinterest really helpful in gaining both inspiration and ideas for my app re-design. Here’s a few examples of some mood boards I’ve made using my favourite app design ideas:

When looking through the various app interfaces, I personally felt that the ones that seemed to work really well were the ones with quite a simple layout – I feel like this is because having less graphics/things to press onto and not using lots of overwhelming colours is both more visually appealing and user friendly. 

Here’s a couple of my favourite menu ideas for apps. I particularly like the side menu layouts, I feel like they look really professional and are easy to navigate for the user. I also feel like having an actual menu for the various app pages is better than having tiles or links cluttering up the home page. 

 

For my timetable layout for my iHull app, I had a look at some existing calendar and timetable app layouts. These were my favourite ones that I found, I particularly like the simplicity of them in regards to both the layout and colours used – I think that simplicity is very important when it comes to app pages that need to be quite organised and provide information for the user and this is something I’ll take into consideration when designing my iHull app prototype.

Interesting UI/UX articles

Bad Habits of UI/UX Designers:

https://modus.medium.com/three-bad-habits-of-ui-ux-designers-75b9fa0d889a

Overall, I felt that it was interesting that this article focused more on the negative side of UI/UX. This was helpful for future reference on what not to do when designing UI/UX. The bad habits of UI/UX designers from the article were: ‘Creating imaginary personas instead of asking real users’, ‘Brainstorming without regard for budget and technical constrains’, ‘Reducing clutter by rearranging layouts and elements’

Finally, the article ended on a quote: ‘A user interface is like a joke, if you have to explain it, it’s not that good’. I thought this was interesting

How we used UI/UX to confront the climate crisis:

https://blog.prototypr.io/how-we-used-ui-ux-to-confront-an-inconvenient-truth-5b70eb9e3c85

This article explains how a company is creating a microsite aimed at getting people interested and encouraging conversation in the climate crisis. It quotes that ‘Harsh facts and horrific data hasn’t worked so far’ and that they approached this problem by ‘translating complicated data into beautiful, digestible forms.’ Their key points in their design approach were also listed, which were: Horizontal scrolling, Parallax, Geometric and organic shapes, Style and colour and Typography.