LT 8.1 Rate and review

LT 8.1 Rate and review

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:

  • First impression
  • Trust/credibility established
  • Loading time
  • Professionalism
  • Creativity

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.


https://www.no.ellenkvam.com

EllenKvam is a norwegian small business that sells jewellery.

First impression: ****

Trust / credibility established: ****

Loading time: *****

Professionalism: ****

Creativity: **

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.

https://www.christinaledang.com
https://www.christinaledang.com

First impression: *****

Trust / credibility established: ****

Loading time: *****

Professionalism: ****

Creativity: *****

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.

https://abbyboutique.no

First impression: ***

Trust / credibility established: *****

Loading time: *****

Professionalism: ****

Creativity: **

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.

LT 7.4 Creating email newsletter

LT 7.4 Creating email newsletter

For this task, you will be creating your own email newsletter using MailChimp. Once you’ve completed the newsletter design, you’ll be sending a test email to a classmate or friend.

Part 1

Take your time as you populate the template with meaningful images and content. For this task you can create an email for any brand you like, it can even be your own invention.

Here are a few business ideas:

  • A florist
  • A pet accessories shop
  • A tree nursery
  • A shoe or clothing shop
  • A bakery

Part 2

When your email newsletter is complete, preview it and make the required changes (if any).

Part 3

Finally, send a test email to a classmate or friend. Discuss the email you sent with your classmate or friend. If you used a classmate, you can also discuss the mail they sent to you.


I decided to use Crust and Crumb from the previous LT as the business. I made a very simple newsletter, just to understand how Mailchimp works. This is how it looks on a phone screen:

LT 7.2 Designing a form

LT 7.2 Designing a form

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.

Part 1

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

Part 2

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

Part 3

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.


Part 1

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.

Part 2

Part 3

LT 7.1 Designing interactive headers and menus

LT 7.1 Designing interactive headers and menus

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. 

Part 1

Design a logo for the brand to use on the website header.

Part 2

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).

Part 3

Add the links, at least one type of menu and other necessary interactive elements to your header wireframe.

Part 4

Make the required elements interactive using component states.


Part 1

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.

This is how the website looks without hovering.
The links changes colors when hovered.
The search bar pops up.
LT 6.1 Understanding basics

LT 6.1 Understanding basics

Part 1

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.

Part 2

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


Part 1

I went to SquareSpace and found a template that I really enjoyed looking at, called Meriden.

https://meriden-demo.squarespace.com/?nochrome=true

Then I opened up Adobe XD and made a low fidelity sketch of the template:

Part 2

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.

LT 5.3 Judge and box their personalities

LT 5.3 Judge and box their personalities

Part 1

Create your own table with details about the archetypes we discussed today:

Part 2

If you were creating a brand for your own portfolio, to represent your personality, which archetype would you choose? How would this archetype be presented with the:

  • Overall visual style (use three descriptive words) 
  • Fonts (choose two fonts) 
  • Colour (create a colour palette) 
  • Layout (use three descriptive words to define this) 
  • Photography style (use three descriptive words to define this)

Part 1

Part 2

Overall visual style: Minimalistic, interesting, clean

Fonts: Butler, Aleo, Woodland

Color: White, Black, Cream/beige, Green, Red

Layout: Clean, easy to navigate, with interesting twists

Photography style: high quality, black and white, creative

LT 5.4 Create a brand archetype

LT 5.4 Create a brand archetype

You have been asked to design the brand and website for an eco-friendly zero-waste soap brand called: eKo. Think about which brand archetype you would choose and choose one or more website design trends that would work well for their website. Then, bring your ideas together by creating a mood board first. 

Proceed to create a high-fidelity prototype of the landing page, using Adobe XD or Figma. 


I chose to go for the Traditionalist archetype as it fits with the brand well because the archetype values nature, freedom and individuality, and are idealistic. Also very likeable and non threatening, all of these things represents with eKo.

I feel like I kept the design minimalistic and clean, to fit the archetype but still interesting to look at. I chose a cream coloured background, black text and a forest green accent color. I used high quality pictures I sourced on AdobeStock, this is what I feel like the soaps looked like after reading the brief.

Here is a screenshot of the prototype I made, and the link is posted below:

https://xd.adobe.com/view/4fa5d6b8-d794-4a25-a565-43452f821701-1af6/?fullscreen

LT 5.2 Facelift the image

LT 5.2 Facelift the image

Part 1

You’ve been tasked to update the Click and Collect section of the Joe’s and Bros website. Use the prototype software of your choice to mock up one idea.

Part 2

Based on the website examples we have seen today, make a list of which other changes you would make to the Joe’s and Bros website?


Part 1:

I used Adobe XD to update the page. I decided to collect most of the information on one page rather than multiple pages as in the original website, and used links to navigate trough the different products. The user can choose to scroll down and see every meal, or use the navigation to skip trough them.

Part 2:

If I could make more changes to the whole website the first thing I would do is to redesign the header on the first page. Its very messy, unorganised and hard to navigate.

It also took way too long before I actually understood what the website was for and what they were trying to sell. I had to scroll around on the website before I understood that Joes and Broes was a cafe/ restaurant. Therefore I would add a title or some text under the header to clarify this, or even a appropriate header image.

LT 5.1 Read the visual clues

LT 5.1 Read the visual clues

Ask two friends or family members to pick a nice-looking website at random. Study the website and answer these questions:

  • What type of website are we looking at?
  • Which industry is this website in?
  • What is its purpose?
  • Which different types of content are used?
  • How is the content presented?

Pay attention to how the website looks visually and try to identify if there are any common design trends you might pick up on. Ask yourself if these design trends are common to a certain industry or type of brand? It’s also likely that certain designed trends are common to specific target audiences. 


Friend #1 chose https://730.no

What type of website are we looking at?

730.no is a website for popculture news.

Which industry is this website in?

Online newspaper, mostly fashion and music industry.


What is its purpose?

The purpose for this website is to keep young adults updatet on the latest news in pop culture, celebrities, fashion, music, movies etc.


Which different types of content are used?

A lot of pictures and big titles for the most part, which serves as links for the actual articles.


How is the content presented?

The content is presented like most online newspapers, with the logo, search bar and links for different content at the top of the page, and titles and pictures leading to different articles. The biggest and newest articles at the top with bigger pictures than the rest.

Friend #2 chose https://www.ymeuniverse.com

What type of website are we looking at?

Yme is an e-commerce website which sells clothing and accessories from different brands. They also have a physical shop.


Which industry is this website in?

This website is operating in the fashion industry.


What is its purpose?

The purpose of the website is to sell their products and inform about new launches and collections.


Which different types of content are used?

The website consists mostly of pictures, since they are selling products. It contains very little text.


How is the content presented?

The content is presented very nicely and clear. They have links for the different content at the top, and big nice pictures that showcases their products in a good way.