Week 3 - User Interface
Hello again! As I wrote last week, on my week 2 overview, I'm in the middle of a project to improve the website of “El refugio”, a non-profit organization for animals rescue and protection.
This week was dedicated to the user interface. After defining targets, users and a path to be followed, it's time to put in a paper the structure and functionalities of the future web.
Follow the steps of this journey and see my prototype at the end! :)
Day 1 - Information Arquitecture
The first thing to do was learning and listing all the categories and functionalities the web will have. Think as your user entering your home and think of the flow that is necessary to accomplish the expected task you want him to.
Day 2 - Sketching & Wireframes
With the flows in mind, I started to sketch the first screens of the web. This step is important to define everything that should be in each page: buttons, filters, images, menus…
The point is not to design already — this is why it's recommended to sketch in paper and with one colour only. It's all about thinking of what should be there and what is not necessary.
For my project, at this point, I made some wireframes to the pet page, considering a slider for photos, a video player, some icons classifying pet's personality, age and gender and, the most relevant feature: an online schedule tool to choose date and hour to visit the pet you want to adopt.
Day 3 - Patterns
Today was all about references! The more you look and research, the more you learn and get inspired.
A good user interface requires universality and standards, so users don't have to learn how to use your features: they simply enter your web and instantly understand what to do.
Those standards can be found in a plenty of guidelines sets to choose from. Jakob Nielsen has probably the most known principles for interaction design:
Day 4 - Prototyping and Testing
At this point, we're almost good to go and test if the ideas make sense and have the expected reaction on users.
For that, I used InVision to build a basic prototype, based on my wireframes and ask 5 different people to test it.
This is my prototype. Remember those are mid-fidelity wireframes, what means that there's no design in there, so colours, pictures and styles will be add later.
You can also try it if you want. Not every link nor interaction is available, but you can go on the adoption process and simulate a schedule for visiting the chosen pet. Feel free to explore the available interactions! :)
I got very useful feedbacks, like buttons would be nice to add, a notification of e-mail send at the confirmation page as well as an "add to calendar" feature and some other insights.
Now it's time to iterate and begin the process again to update the features based on the feedback received!
Day 5 - Presenting the project
Friday was presentation day! It was great to show to the class my progress and also take a look on my colleagues projects as well.
Besides the opportunity to have more feedback and some great new insights with this exchange, it was also a good chance to practice my presentation skills. Preparing some slides, writing a script, controlling the time of my speech and talking in front of an audience.
What a great week!
Next week the project goes on with Visual Design.
See you there!
