You’ve been asked to design a campaign to advertise a specific product: keto bars.
The purpose of the campaign is to get Instagram followers to click on the link on the Instagram account, view a specially designed product page and purchase the product. You’ve been tasked with designing 3 graphics for Instagram posts. Use your creativity and the images on the website to get started.
This lesson task has two questions about the course assignment you are currently working on. Include the answers to this lesson task in your report for the course assignment as part of your research.
Consider how API integration can boost the efficiency of the website you are creating for your course assignment. List at least three ways that you can incorporate API integration and explain why you’ve chosen them. Also expand on how you went about integrating them, for example did you use a plugin, widget, or outside source?
When your website is published, inspect the load time of your site. You can do this by using a developer tool like Google PageSpeed Insights or Web Page Test. Write down how long it takes to load the full page initially. Are there any elements that you can identify that is slowing down the load time of the page? If so, try to optimize at least one file. Redo the load time and write about the success you have achieved in improving the load time.
Post your answers and changes to your website to your WordPress blog and share screenshots where possible to better illustrate what you have learned
Will answer this LT when the website is published.
The homepage has a good header where you can choose between gender and age categories, as well as a search bar, favourites, cart and a customer page you can log into. It has big pictures with links that’s displays the latest trends etc.
Choose two eCommerce websites from different retail fields. Create a diagram illustration of their category trees. Your diagram should clearly indicate the different levels of categories, as well as product attributes.
For this lesson task you must review three eCommerce websites, preferably small businesses (not in the category of Amazon or Walmart). Give star ratings out of five for the following categories:
Along with the star rating for each category, name three reasons for your rating and one suggestion on how to improve the rating.
Combine the star ratings and reasons for each website in a creative and visual way and post it to your WordPress blog.
EllenKvam is a norwegian small business that sells jewellery.
First impression: ****
Trust / credibility established: ****
Loading time: *****
The website looks clean and is pretty easy to navigate, the items is displayed in a good way. The main thing that gave me a not so good first impression is that the logo looks very «home-made». It has a grey box around it that should be transparent and the quality is bad, so that’s the first thing I would change. I can’t see any contact page either, but they have a live chat so that’s good.
First impression: *****
Trust / credibility established: ****
Loading time: *****
This website has a very good and creative visual design, I love the landing page, and the items is displayed in a cool way I haven’t seen before. It made me want to explore the whole page. When you click «shop» it sends you to a new page with info about shipping and prices but no items to shop, I had to click around the page to actually find the items, so that’s something that could have been done better.
First impression: ***
Trust / credibility established: *****
Loading time: *****
This website looks like any other online clothing store, nothing exciting about it but it looks professional enough and is easy to navigate. I personally don’t like the logo so that’s one of the things that didn’t give me a perfect first impression. There is no contact or about us page, but there is some contact info in the footer. I would change the header and add some more exiting elements to the website.
There are many bad forms out there! Now that you know all about forms, it will be easy for you to spot bad form design. For this task, you will be redesigning a form used to make appointments at a vet.
Apply what you’ve learnt as you critically analyse this form from the Paw Paws Vet Clinic and list out what you think is wrong with it. You only need to look at the first two steps:
Online booking 1/3
Online booking 2/3
Use the software of your choice for this part e.g., Figma. Screenshot the website and then redesign the form section (both steps 1 and 2). To help guide you, here is the list of tips we covered in today’s lesson:
Keep it simple
Mark optional or required fields
Use visual design strategically
Use persistent labels
Consider the context within the user flow
Use verbs for the submission button text
Programmatically set the right keyboard for touchscreens
Make use of inline form validation when possible
Choose three components anywhere in the form that will show error states i.e., what happens if the user submits the form and there is a problem? Remember that a good designer will try to help users with the use of error messages. Error messages are not there to make users feel bad if they’ve made a mistake filling out the form.
The form looks confusing and overwhelming due to the amount of questions and the way they are asked. It also feels weird to start the form with these questions, instead of asking about personal information first. The form looks much longer and more advanced than it need to be.
Let’s practise what you’ve learnt today within the context of a very basic brief. Imagine you have been contacted by a local bakery called Crust & Crumb that opened in your neighbourhood. They would like you to help them with their website design. Your task is to create a low-fidelity prototype to show them how the header and menu could look and work.
Design a logo for the brand to use on the website header.
Consider which type of menu you might need for the bakery and create this in your choice of prototyping software (i.e., think about the website scope and information architecture as well as which content is most important).
Add the links, at least one type of menu and other necessary interactive elements to your header wireframe.
Make the required elements interactive using component states.
This is the logo I made for the bakery, very simple and modern.
Part 2, 3 and 4
I decided to go for a classic menu with all links visible, since the website only require a few sites. The links changes color to brown when hovered over. The search bar is only visible with an icon, and opens up ready to type when pressed.
Choose one template that you like from the above lists and demo it. Sketch out the structure of the website template as a low fidelity wireframe to understand the different sections or building blocks of the template.
Take screenshots of the template and publish this with the wireframe sketches to your blog.
An individual hosting service will be needed throughout the rest of your studies, and this Lesson Task is therefore mandatory. We recommend one.com, but you are free to choose any hosting service.
If you choose one.com, the monthly fee is low. The beginner plan is sufficient, and there are step-by-step guides showing you how to set up an account, create e-mail addresses, connect via FTP etc.
Consider your domain name very carefully. This cannot be altered. You can of course sign up for other domain names and delete the one you have, but it has unnecessary cost implications and transferring the website and domain at a later stage involves effort. Also note that it can take 24 hours for the hosting provider to complete the registration.
After completing the domain registration, you can write a short paragraph about the process, the hosting package you chose, and how you went about choosing a domain name. You can include screenshots of the process to illustrate it more graphically
I went to SquareSpace and found a template that I really enjoyed looking at, called Meriden.
Then I opened up Adobe XD and made a low fidelity sketch of the template:
Part two of this learning assignment was to choose one of the plans from one.com and buy your own domain. I went for the «Enthusiast» plan instead of «Beginner» because then you get five websites instead of one, and wordpress is included. You also get a lot more storage, which might come in handy.
I chose «byahv.com» as my domain name. I wanted something simple and «open to interpretation» since I am not 100% sure what I am gonna use the websites for yet, apart from the next Course Assignment.