Ben Timney UX UI Design Chat
Thanks to Stuart, I was able to talk to Ben Timney who co-created and set up the canvas system that Falmouth University use. Talking through the process that he goes through when he receives a project from a client was fascinating and has really allowed me to structure my project better.
Stage One: Structure
Intranet systems within schools have very different setups. This is something I did not know. This makes my concept very difficult as my original plan was to build an add-on that would work for every school’s intranet system.
An alternative way of doing it would be to build a WordPress plugin that could be added on to the school’s website. This would mean that I would be able to build a basic shell of a plugin and then brand the plugin in accordance to which schools are using it. I would also be able to sell the same plugin over and over again and adapt it to the school’s needs in terms of functionalities etc.
Define what you are going to build, what structure will it be.
Stage Two: User driven design
Start at the user, begin by asking the user what they want. Write a questionnaire and gather information from actual users and find out what they need. Those needs would come out in the functionalities of the website. This would help me define what I need.
Stage three: Demographics
Who’s going to be using the website?
what is their age group?
what is their skill level with computers?
What is their access to computers?
Summerise results into statements and think what are these statements telling you? Does it mean that you need to make the website user friendly and simple?
Stage Four: User stories
User stories, in the simplest form, are creating a story around your website users. You need to create a series of groups and summaries everything that you know so far into user stories e.g. ‘I am a migrant student of 12 years old that is looking to make friends, learn French and integrate into the French education system.’ ‘I am an administrator, I need to add events into the platform to notify the students involved in the program.’
The user stories help you decide on functionalities you are going to have but it also drives testing at the end of the project. You can also map out all the different options as they are using the. You could make the structure a bit like an app. When you open the website, one button that says ‘begin’ and it takes you on a journey. A bit like TickTock or Pinterest.
Social Media Structure
Similar to Pinterest or TickTock, when you enter the App, it asks you to select photos of things that you are interested in, then from your responses, it tailors your pictures even more and asks again to select things you want to see. it uses images and you ticking boxes to learn about you and the more you click the smarter it gets. This could also work on a website. You would as the children to select pictures of things they like e.g. sport, chess, science etc. If they select sport then they would receive notifications about school sporting events and clubs. If the clicked chess, then they would receive the chess tournaments club. if the child doesn’t select chess, they won’t get the notifications for chess. It could be a website that runs as an app and can be used on any device and looks the same on any device. If an administrator wants to add an event but only whats the children interested in this event to see it, then they could check the box for this group only so not everyone on the program receives it.
Data accessibility statement/ terms and conditions
Make sure you write one of these for your site
Stage Five: Wire Frames
Now you should really be shaping an idea of what your user group needs in terms of functionalities and the way your plugin is going to appear to your target user groups. Then you can move on to creating wireframes. A wireframe is just a sketch of what the page would look like.
Process Flow diagram
This is the journey the user goes on when using the website. e.g. if a user clicks that they yes, they do like football, which page does that take them too? If the user clicks no they don’t like football, where does it take them? Reference the wireframe in this diagram so the developer can refer back to it.
Site Navigation Map
This does not show process or any decisions, it is just showing how your website is laid out. Mine will not work like a regular website because of the fact that it will guide the user through questions and won’t be like a traditional website. It will be more like an app/plugin. I would have a login page, admin and user. the user will be a single page feed, ref process one. The admin will be easier e.g. settings, blog, news, users etc etc.
Everything feeds into each other: Your user research feeds into your user stories, you user stories feeds into the process diagram and how they will go through the site, the process diagram feeds into the navigation map because you have to understand what you are going to present to your user. The process and the navigation map both feed into the wire frame and you can reference the different process diagrams etc within the wireframe.
UML Design: Look into this
Make sure you carefully look into this when creating the structure.
Stage Five: Branding
Thinking about logos, colours, fonts. Create a branding document. make sure you work out what you are going to build before you brand it. Design each page from the wireframes. You can design the interactivity. You can wrap the school branding around the plugin depending on requirements and branding guidelines. Around 5 pages usage, font colour scheme, colour pallet, logos etc. you could create graphic icons that could be put in the branding document eg. home page icon ,a begin icon.
Stage Six: Mock-up
You could use Flash, Flow, Powerpoint or Adobe XD to mockup the process and design. This way you can demo how the actual interaction would happen.
Design for your market, in some countries red is a warning colour but in China red is a patriotic colour. Think about the culture and physiology of who you are designing for.