Daily Journal :

Bernice has dedicated this page to her personal thoughts regarding her work, she finds the process of documenting her thoughts helpful to think constructively to understand her next move in her work. For the viewer, this can be a place to understand the thought process she goes through to get to the final outcome.

19 - April - 2021 :

UX/UI design :

Last week I finished a branding project for Black Coffee, to continue off this project my plan now is to create a website continuing the decisions that were made in the last stage, keeping everything cohesive as a professional business should be. To create the websites there will be the need to do some study about UX and UI to refresh my memory of what we studied in school.

what is UX design :

From my understanding, UX is the structure of the website; it is where you plan the layout example: where the many are going to be, placing the different buttons, the different sections such as introduction to the product, were are you going to show the animation of the logo and so on.

what is UI design :

On the other hand, UI is how the website is going to look. Example: creating the shape of the button, or the animation that will go in the animation section or using a colour palette or the brand to make them cohesive. Personally, I think that I will mostly like doing the UI section than the UX but one cannot work without the other so I and going to work on both and do my best.

UX research:

my research started by looking at videos on UX design to see the process of other designers and that note on what I need to get before I start sketching.

Notes:

Moodboard (focusing on layout)
Sections for website
- Home page
- Product
- Contact
- Order
- Basket
Sketching prototype
Digital prototype
Wire Frame
Product testing
Changing and Finalizing.

6f85372e07bc5c3a49898e77a3e561b3--sketch

20 - April - 2021 :

Moodboard:

For the mood board, I started looking at different layouts from different websites on Pinterest; to choose the ones that would help me in my sketching I carefully looked at the shapes, layout and placement of the menu bar and so on. I found this section of the project a bit difficult at first because my eyes were more attracted to the colours that were used on the website and I could not focus on the UX. To help my self focus more I took a small break to look at the images with fresh eyes, this helped a lot.

On the right, you may see my mood board, as you can see I was mostly attracted by the modern style websites which are using a lot of curves in this layout and illustrations.

To understand more what I need to put on the website I looked at other coffee sites to see what the competitor is offering and what more I can add to this site.

Pages:

About us
- Animation ( Slides
- Favourite product
- Sales/offers
- Team
- Collection
- Links / Contact
Coffee Shop
- Overall description
- Product/pricing
Brewing Guide / Blog
- Images of the company
- Description

Contact
- Input of
  - Name / Surname
  - Phone number
  - E-mail
  - Comment
Heather
- Logo
- Manu bar
- Search bar
- shopping cart
Footer
- Contact info
- Copyright

22 - April - 2021 :

Sketches :

This would be my first time doing a sketch for UX design, at school we went directly on the program called Adobe XD and experimented with the layouts over there. I wanted to create sketches by hand because I thought it would be faster, little did I know the technique I was using was slowing me down because I was measuring the spaces between to make it look clean and this was taking a lot of my time. The end result of the sketch was still not attractive and if I were to show it to a client I do not think it would work to convince them to use it.

176697575_498053927991178_58451168470104

Because I am not liking the way my sketches are turning about and I think I should do the sketches faster I turned to YouTube to see how other UX designers do their sketches to show the product to their clients. An interesting video I came across showed this artist doing some sketches, what I have noticed was that he did everything freehand and without measuring the spacing, what I have also noticed is that he did the full website in one go unlike me who did the home page in one sheet and going in too many details:

23 - April - 2021 :

Sketches ( Attempt No: 2 ) :

After watching a good amount of videos and did more research on the ideal way to do a UX sketch design and went in with a new mindset and try this new technique and see if it fits my process style. I used an A3 paper to have more space for my hand movements.

This technique was much quicker than the last, and because it was faster I could put down what I was visualizing on paper before I lost the visuals. I am happy what the outcome of the sketch and I think it is perfect for the website I am going for so I am ready to move to the prototype and wireframe.

176444571_1601811326685850_8629953447550

Trying to do the prototype on Adobe was taking me a long time because it was lagging and some of the buttons that I needed to use were not working, instead of trying to see if I can fix the buttons and probably waste more time I am going to learn a new program. Figma is a UX program that I recently started to hear a lot about and is a program that is praised a lot by companies. A quick look at it seems to be fairly easy and similar tools to Adobe which is great because I can jump straight into a prototype with out a tutorial.

26 - April - 2021 :

Prototype :

Doing the prototype I realized that there were some pages missing such as the sales/offer and the collection section, I would have realized this on the sketching stage if I looked carefully at the wireframe but it is better late than never and I realised that prototyping helps add to the product in more details.