Minor Project

24.09.24 - 06.01.25 / Week 1 - Week 4
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Minor Project (PRJ62204) 
INSTRUCTIONS


LECTURES
PRACTICAL

Minor Project

As I am a UI/UX student, I mainly worked on the website alongside the other UI/UX student in our group. When designing the website, we used references from the sites pictured below, some of the brands in particular because the Expedio team mentioned they liked the vibe and aesthetic of some such as IKEA and HermanMiller.


The team first created a moodboard for the website.


However, after receiving feedback, we were told the font was inconsistent, as we were using a mixture of serif and sans-serif fonts. Furthermore, the colour palette could definitely be better. Thus, I tried to keep the feedback in mind when designing the website.

We first created the home landing page for the website. At the top is an automated carousel that plays through several images, though the default image is an image of the board in an environment- we used this picture since it was one that was the most eye catching. To further enhance this effect, I added an attention grabbing tagline on the left using bold text, and highlighted certain words in red that emphasize the functionality of the board (to be used in this way). To make the text stand out more, I also placed a gradient black fade behind the text and adjusted its opacity so the background image could still be visible. Then, I added a brief but concise description about the board, which also was emphasizing the functionality and appeal of the board through wording- and to encourage and aid immediate purchasing or easy navigation, I added two buttons underneath: learn more, and buy. The idea is that when you click on learn more, it brings you down to the product video/preview underneath, and buy navigates to the shop page.

Underneath the image carousel is where a picture of just the board and videos of the product can be viewed, along with a slightly longer but still brief description of what the board is and what it does and who its for. I tried to not make it so long since most visitors on sites don't typically spend lots of time reading, and attention can be lost quick, so shorter explanations are valued in website design since it retains interest as its more immediate.

Then, below that are the key features of the board; this section highlights the main unique selling points and standouts of the board, helping to differentiate it from others in the market. The main features are illustrated with not just text but also logos for a visual indication/association to the viewer to help them envision how the board works in practice.

Then lastly, there is the "designed for you section" which showcases the boards different colours/surfaces the board comes in, and lets the viewer preview these by clicking on each circle colour option, as well as a shop now button to get viewers to visit the shop page again as well.

The footer is filled with the xboard social media so that users may click on them to view posts about the board on those platforms.


Then, we have the about us page- which details the brand values of the board and the team behind the board. We thought to create this page since brand values were emphasized a lot in our project and maintain with them, and people may like to know too who is behind the creation of the board.


Moving onto the services page, which is like the services page on the expedio website- since the board is linked to the brand,  the company may still get traction from the board about the other services they offer.


Next is the shop page. This is where customers can purchase the xboard. The top section is the purchasing section, where users can read the description of the board, toggle through images of the board, preview colours through the colour selection, specify the quantity they'd like to order, and because expedio mentioned that they are able to make customisable sizing for the board, a size text field to input custom sizing if they'd like, then the order now button itself. 


Below that is the product video, which showcases the product itself. Then below the product video is the specifications list that details all the specifics of the board.

Then lastly, there is the contact us page. This is where customers may find multiple ways to contact expedio and inquire about the board through filling up a form.


Other than this, there is a pop up for the website to encourage visitors of the site to subscribe to the xboard email to get news regarding the board.








Project Proposal

Final Project 

REFLECTION

The X-Board project was a valuable experience that emphasised the importance of consistency, feedback, and user-centric design. It was interesting since we got to be so hands on with a real project, and the feedback in general taught me to align every design element with purpose and intention- such as brand values, or to maintain clarity across all pages. The collaborative multidisciplinary element of the project was also a learning experience since everyone had different ideas and approaches to things, so communication became vital. It also was in a way an introduction to the kind of work/work environments we'll be entering in the future since companies are comprised of many different roles and positions, and everyone has to work together in a cohesive way- so the practical aspect of this module was helpful in that way. I hope to apply the new skills I learned in the future towards my future career.

Comments

Post a Comment

Popular posts from this blog

Design Principles / Task 3

Image
0.7.03.24 - 21.03.24  / Week 5 - Week 7 Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017) Bachelor of Design (Hons) in Creative Media Design Principles ( GCD60804 ) / Section 1 INSTRUCTIONS TASK 3 Design For Task 3 of Design Principles, after we have analysed the design of out choice in Task 2, we are to produce a work of design, inspired/influenced by the one we had analysed, or as a reaction to it. We should also apply our knowledge of design principles in our creation and may use any medium and/or materials that are suitable to convey our visual message. We should also include some cited visual references that inspire our own ideas and a rationale, in about 150-200 words, explaining/defending the decisions made in our design, the meaning/purpose of the design and the design principles that are found in the design. Brainstorming First off, I went back on my Task 2 to look at the design I analysed in order to get inspiration and gauge how I should approach this task. When rea...
Read more

Design Principles / Task 2

Image
20.02.24 - 05.03.24  / Week 3 - Week 5 Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017) Bachelor of Design (Hons) in Creative Media Design Principles ( GCD60804 ) / Section 1 INSTRUCTIONS TASK 2 Visual Analysis For Task 2 of Design Principles, we are to assess, investigate, document, and analyze the existing art/design work we selected in Task 1 to further study the design principles found in that work, as well as the size, placement, purpose, effectiveness of the design in relation to the UNSDG goal that we have chosen. The requirements are the following: Write a 300-350 word visual analysis of the selected design. Include reference links where applicable. Firstly, I started by visually observing the image itself and re-reading some of the design principles documented in the lectures to refresh my understanding of them so I could better identify which ones are present in the art work, then noted them down. Fig 1.0 'Guernica' From my observations, these are all the design ...
Read more

Application Design I / Final Project

Image
15.07.24 - 05.08.24 / Week 13 - Week 15 Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017) Bachelor of Design (Hons) in Creative Media Application  Design I  (DST60504)  INSTRUCTIONS    LECTURES Week 14 FINAL PROJECT Completed Mobile Application Design Prototype For the final project of Application Design I, we are required to continue from the Lo-Fi prototype we created and turn it into a High-Fi prototype by refining and creating further visual assets for it as well as include a UI kit. Process As I had completed most of the design and functionality in the previous project, all that was left to do was incorporate my user-testing feedback, colour my prototype, and test it myself with the refined user scenarios + full walkthrough. I first started on recolouring my wireframes....
Read more