code – designing the website part 2

Now I have all the images saved and my colour pallet worked out I started looking into the user journey by mapping this out (as seen below) and working on a basic wireframe design (as below)

 

cof

This image shows the breakdown of the items which are available on the current website, the list was pretty extensive so I tried to develop categories to create some organisation but through this I found that I would have to focus on just one category for this assignment, I chose to focus on shoes as this category contained defined subcategories which was easy to define to use for the query aspect of the brief. cof

I created a basic wireframe design to work from, I designed a very simple layout and navigation thinking back to accessibility, the products would be displayed in a grid as to keep everything neat and organised, I decided I wanted to be aspirational with my code and add drop down boxes containing selections which are available to reduce the about of visual information making only what was required visible to the user when they choose to see it, I also wanted to try and add a shopping basket to my site to complete the e-commerce side of it.cof

My basic user journey started by thinking of who would be using the website and i concluded that there would be two main users; teachers and students/parents, due to this I thought that the overall site should have a log in section to distinguish between the two as certain information may only be accessible to teachers as only they require it, this would just load the home page and the option to sign in would be available through a link or button. From my wireframe design I chose to have a tabbed menu across the top below the initial logo which was to be used as a banner image, each of these tabs was based on the current ones used on the website, for my assignment looking at the selling page the user would be able to select dance wear which would open up the page I have designed which would be the same as the home page apart from the tabs have now changed to the categories I had deciphered from the substantial list of products (for this assignment I have only done the shoes page), this will then bring up all the items available within that category as a grid of photos with the drop down box to the side or under the image (which will depend on what I am able to code), it will then have a search section at the bottom of the page to be able to filter through the products easier, and finally I hope to be able to have an option to add the items to a basket.

User Interface – assignment 2 app development research

While in university I talked to students and tutors about what they thought the perfect college/university app should comprise of , from this I created this basic user journey:IMG_20180319_104341.jpgfrom this information I have found what are the key features which everyone thought we required within the new app, the security level people expect from it and what parts a student can add to and what parts only a tutor can edit or create.

User interface semester 2 – user journey

What is it?

The user journey is used to identify how someone interacts with a current website or how they may interact/benefit from changes.

Why use one?

We use the user journey process to create a vision of the project, understand users behaviour towards the website and the functionality across users.

When should you create one?

It should be created within the discovery phase when you have collected the persona profiles and any other research required.

How would I create one?

They are created to identify specific requirements or navigation through a website, it will show their goal (something they want to find), it will also include their motivation (such as how long they are willing to wait and go through to get to their destination. It will also identify if they have any pain points (struggles) with similar websites, what their character is and what they want to achieve.

What should it contain?

It should contain;

  • the context of what they are doing and why
  • the progression that they will take to get to where they need to be
  • which devices they are most likely going to be viewing the website from
  • the functionality of the website in comparison to their own computer skills
  • what emotional state will they be in when visiting the website (is it for something joyous such as a birthday or something more upsetting such as a funeral)

What should it look like?

It should include;

  • picture relating to the persona
  • summerising titles
  • series of steps taken (using short simple text)
  • illustrations throughout (eg icons)

Each step should also include;

  • the device been used
  • the benefits to both the user and/or buisiness
  • any functionality which is been used

 

 

User interface semester 2 – user journey

This is a User Journey based on our University website which is used to store and deliver information to us, I had to show the user journey from the home page through to the student handbook page.

I choose to use both tutors and students as that is who will be using the website, I specified that most student would be using a mobile device where as tutors are more likely to be accessing it through a desktop while in the college, I have shown the process through these steps including the final options which you can choose from each link off to different resources and PDF files.