via GIPHY
DURING CLASS: Conduct at least 3-4 Usability Tests on your Lo-Fi Prototype and test others
- Copy Usability Test Google Form OR Print the Usability Test PDF in class.
- If copying the Google Form: Click on the three vertical dots on the top right and click on “Make a Copy” and save to your own folder.
- Come up with 3 tasks for someone to complete. Don’t make the tasks too easy, vague, or leading – or what is the point of testing?
- For example, “Update your personal photo and bio” is better than “Go to the Profile Screen.”
- You can always reference your user task flows you previously created.
Also still need to leave feedback on each other’s Product Statements on the #project1 channel on Slack.
DUE THURSDAY
LOOK OVER the Following UI Lectures to prepare for Hi-Fi prototype:
TASKS 14-16 Deliverables
Turn deliverables into Team folders on Google Drive found on Slack #0_classinfo. Label each file accordingly by task number and name.
TASK 14 – USABILITY TEST KEY TAKEAWAYS
Written summary/main takeaways of usability test results. Try to identify the primary things that you can work on and improve during the next iteration of your product redesign prototype based upon the feedback you received.
How to Turn In:
- Written Key Takeaways
- Google Doc or PDF.
TASK 15 – STYLE BOARD
PDF: Style Board Examples
Look in the class Google Drive for your company’s Brand Guidelines.
For this task you will be creating a single style board to demonstrate the look and feel of the brand or rebrand for your product redesign. A style board is similar to a mood board, where it gives the client or stakeholders an idea of the overall look-and-feel of your product design. You can use the provided overall brand guidelines found in the Google Drive to create this style board if you like.
Process of creating a style board
- Start with a few keywords. Include adjectives and emotions that describe the mood/style you are aiming for and what your brand stands for.
- The style board is a collage that usually shows some or all of the following aspects:
- logo
- colors
- typefaces
- image style – such as photography or illustration style.
- texture/pattern
- icons
- any other ui elements
- animation
- tone of voice – a.k.a writing sample text
- If you are keeping the current product’s brand style:
- You could reference the current provided brand style guidelines
- Take screenshots of the current product
- Find an existing Figma or Sketch interface toolkit for your brand (you just have to Google something like “Etsy Figma UI Toolkit” or “Alaska Airlines Sketch UI Toolkit”)
- If you are aiming to update the product’s style:
- Then you will want to show what you intend to change – so show your proposed mood, colors, typefaces, image style… (things listed above)
- Ask yourself what makes it better than the original? Why did it need improvement?
Design Inspiration/Resources
Alaska Airlines Additional Resources:
How to Turn In:
- Single Style Board
- PDF
TASK 16 – START HI-FI PROTOTYPE DESIGN
Each teammate take a stab at applying hi-fi designs to the various screens and we’ll choose a direction in class. No specific number of screens – Just choose a few screens each and try out different looks – color combos, type combos, image styles, and so on.
How to Turn In:
- Hi-Fi Prototype in progress.
- Each teammate take a stab at applying a design to the various screens and we’ll choose a direction in class.
- Figma link on #project1 Slack Channel.
- To clarify, this is just an in-progress check. The full finished hi-fi prototype is due next Tuesday.
How to create a clickable Hi-Fi Prototype
- Reference your Lo-Fi prototype and usability test feedback. You can either try and make a new Figma project file or you can work in the same project file and create new/updated “Pages” and “Frames” to eventually link together.
- How to create it? Watch the same provided demo video to learn how to create a simple interactive prototype and how to export the link to share with your classmates on Slack.
- Double-check that the link you share says “Anyone with the link” can view it.
- Required Design Aspects:
- Have actual text, icons, photos/illustrations, and so on. It should look more refined and more understandable for the user to test.
- Have a consistent color scheme, typography, icon set, and use of hierarchy throughout.
- Choice of Style: The design could be based upon the style guidelines of your existing brand or it can be your own updated design style.
- Optional Free UI Kits: You are allowed to use built-in interface elements from existing Free Figma UI Toolkits, such as the keyboard, tab bar, nav bar, icons. Just make sure it is free and give the the creator credit in your Case Study at the end of the project. Once downloaded and opened, you just copy and paste over the elements you want into your own file. You can visit one of the Free Figma UI Kit websites listed below.
- Human Interface Guidelines: If you don’t use a UI Kit, you will want to reference the lecture on Human Interface Guidelines or visit the Human Interface Guidelines website to look at standards of sizing and placement.
- Next Week: You will be testing people on this hi-fi prototype next week, this will provide you the feedback to make final decisions on your redesign.
Inspiration/Resources for Layout Patterns
Student Hi-Fi Prototype Examples