stepup UI
project overview
From the testing in the step up UX project, it was clear that:-
The information has to be clear.
Instructions have to be clear.
Users had a problem remembering passwords.
Users did not have an email address.
Users were willing to learn.
I needed to therefore try and find another solution for login purposes. I was going to allow the user to enter the site without a login and the app would just allow them to use it by using an IP address or something, however, to record the progress more information was required. It was then decided that if you asked them for a telephone number to log in instead it could record their process as well as recognise them each time they used the app.
The text on the app needs to be very clear, concise and easy to read. Instructions are vital and need to be easily accessible. Icons and their uses need to be explained clearly and a video as well as written content needed to be available (this was to give users the options to either read and/or watch/listen to the instructions) to suit various abilities. The instructions need to be available on every page, just in case.
design inception
Design Inception worksheet, finding images to display the visual language you want for the app, including fonts. You can then pick out colours from each Mood Board and decide which suit your app.
style definition
-
Mood Board
-
Style tile
I had to define the mood and style that I wanted for the app. I wanted the app to be everything explained in the design inception sheet. I found images and fonts that I felt represented the app. That process in itself I found was iterative, I created 6 mood boards from the same Design Inception worksheet, but with each mood board itself having a different feel. Some of the mood boards didn’t contain as much colour as others and lacked a little of the “fun” aspect. I found it was quite interesting that from the same sheet, so many different mood boards were created with a different feel to each. This will be useful when creating for a client, giving them options on the same idea.
typography
When choosing fonts I initially chose Comfortaa because it was clear and very easy to read, however, the letter “a”, when in a paragraph could be mistaken for an “o” and decided to change to Montserrat and Raleway for ease of the user.
illustrations
I kept the illustrations as simple as possible to limit any confusion when viewing the image.
design system
While creating the wireframes I also created a Design System. This is when you create a component for every element contained in your app. Once the design system is created and the components are there it makes it very simple to add the components to the frames.
micro interactions & animation
I added a few micro interactions to the app, together with some animation and gamification to try enhance the users experience and entice them to come back for more.
INFORMATION ARCHITECTURE
This is a basic Information Architecture for the Step Up app.
This app is designed to help people learn to use the internet.
Its purpose is to teach them to confidently and safely use the internet and enable them to use online facilities.
They have the choice to read, watch or interact with the app through AI technology.
prototype
testing
Whist testing I found out that the phone number requirement then caused more questioning. The user wanted to know why she should put in her phone number, was someone going to call? This is a perfectly justified question. The reason for everything needs to be obvious to the user.
I found during testing that sometimes the user would not read the heading and would just look at the illustration to decide what that section was about. This made me realise, even more, the importance of the images and the power they convey.
SUMMARY
I take away from this process the fact that testing is vital at each stage in the UI process, whether that be how the users react to colours or the accessibility factor with backgrounds and text. Each stage of the process has different problems and if you don’t check/test you may come to what you think is the end of the project and have to start again as the colours, images or fonts do not perform on your particular user as you assumed it would.