Exercise 1

25 September 2025 - 2025 ( Week  - Week  )

Hsu Myat Wati | 0381660 | Bachelor of Design (Hons) in Creative Media
Interactive Design | Taylor's University

Table of contents


EXERCISE 1

Website 1: Transform-AI (transform-ai.saramoen.com) 


1. Purpose & Goals


Transform-AI is to provide a platform for the final-year students to display their work in design and media. Those accessing the site can scan through each student's portfolio and view it. It seems to present creative activity in a collective environment. But it is not immediately clear whether this is a "Senior Show" or a gallery. The core intent is present but not effectively communicated. 


2. Design and Layout


It is very minimalist and typographical in design. The homepage is almost devoid of visuals, mainly featuring huge typeset headings, accompanied by a lengthy list of names that each link to external resources. This simplicity in structure means that the site is fast and clean.




3. Usability and Navigation


Just click on the name, and it will transfer to that student's external portfolio. It's straightforward with no menu. Users who want to group by or filter by type of project or theme must scroll through the whole list.





4. Content 


The user would not know what this show is about, how these works are selected, or what themes are dealt with. It is minimal and purely functional content, but not engaging or informative enough.



5. Performance and  Compatibility


Because the site is virtually entirely text, it performs brilliantly. It loads fast and has a very small asset footprint. Adapting to the layout for mobile should be easy, but font sizes and link spacing need to be checked for taps.


6. Strengths & Weaknesses


Strong points: Very fast, minimalist, direct links to live portfolios. The simple design ensures no clutter.


Weaknesses: No visualizing, unclear first impression, and no navigation beyond the listing of names.


7. Recommendations


Add a prominent section explaining what this website is about. Use some form of navigation or filters to help guide visitors. Have an "About / Introduction" page to explain the show. 


Website 2: Sisterhood (https://sisterhood.tokyo/)


1. Purpose & Goals


This provides details of a Japanese movie called ‘Sisterhood’. The aim is to enable users to know about the plot, cast, trailer, and venues where it's on show. It is to promote and convey essential information about the movie.


2. Design & Layout


The design is dramatic, with monochrome photos that suit a serious film. It uses black, white, greys, and cinematic real people shots. The sections are vertically stacked, and each has an anchor up top for navigation. The visual style reinforces the atmosphere of the movie.




3. Usability & Navigation


The menu on top offers users ways to jump between sections (Trailer, Story, Cast, etc.). This avoids long scrolling for users who are seeking specific information. However, certain sections are lengthy, so not having a "back to top" link makes navigating among long pages tiresome.


4. Content


The content is well-focused for a movie site: trailer, story synopsis, cast, director profile, news, and theaters. It gives users the core information they are looking for. However, some text sections are lacking in detail. The user might want more in-depth background or behind-the-scenes content.



5. Performance & Compatibility


The site introduces videos and large images, which act to slow down browsing on weak connections. In the mobile version with big pictures or video embeds, the user might face slower loading. The top menu would help those on small screens to navigate around.


6. Strengths & Weaknesses


Strengths: Well-structured movie sections; strong visual flavor in line with the mood of the film; good section navigation via anchor menu. 


Weaknesses: Long scrolls with no quick return trigger make following content harder; media could potentially slow down performance. 


7. Recommendations: 


Insert "back to top" links on long pages. Improve media for quicker performance. Place a primary please action (e.g., "Watch Trailer," "Find Theater") up front.


Website 3: Bateau (bateau.jp)


1. Purpose & Goals


Bateau is a company for buying, valuing, and reselling luxury goods. Its goal is to unfold the service provider's self-contained series of products and to create a brand image of a high-end, trustworthy business center. The homepage should attract clients who wish to appraise or sell high-end products, but its style also makes it hard to follow. 


2. Design & Layout


The visual design is classical and a full-width design, with blank images and overlapping pictures. Typography is such that the aesthetics of avoidance over background is very beautiful. Although the layout is immersive and powerful in tone, sometimes reading or clicking where to go next is a guessing game for the user.



3. Usability & Navigation


Navigation is in the form of a top menu: Company, Service, Contact, etc, which is quite ordinary and easy to use. However, call-to-actions are soft (eg, MORE), which may confuse users. Some buttons or links might be made more prominent. It is not clear to users where key actions are applicable.



4. Content


The site offers substantial content: specific service descriptions, corporate facts, and procedures. But the poetical style occasionally gets in the way of communicating some quite simple messages. And because it is almost all shown visually, some could lie hidden behind scrolls or transition effects, making it easy for users to overlook important details.


5. Performance & Compatibility


The use of many large images may slow data transfer on slow networks. On mobile devices, overlapping images or complex layouts will reduce usability and legibility somewhat. 


6. Strengths & Weaknesses


Strengths: Luxurious visual presentation; detailed service content and elements of trust; clear navigation structure.


Weaknesses: Homepage messaging is indirect and poetic, confusing; text tends to get lost among the graphics. Call-to-actions are hard to pick out; performance is at risk from heavy image use.


7. Recommendations


Rephrase the homepage with direct wording. Improve text contrast. Make clearer call-to-actions. Test mobile layouts to ensure all options are comfortable to read and tap.


Website 4: Cue Wigs (cuewigs.com) 


1. Purpose & Goals


The target of Cue Wigs is to provide clients with customized consultancy and handcrafted wigs of luxury quality. The site’s tone and layout support this luxury branding.


2. Design & Layout


The website has a strong visual identity and branding using bold visuals, striking imagery, and compelling typography.



3. Usability and Navigation


Call-to-action buttons like “Book Consultation” are pretty clear and repeated throughout, making it easier to turn visitors into customers. However, a browsable gallery or catalogue of products is nowhere in sight. The viewer can’t quickly see what sorts of wig style and color combinations are possible in this case. 



4. Content


The content emphasizes brand narrative, craftsmanship, hair quality, and process, all ingredients for a trusting disposition. However, there is a lack of depth of description on a few pages where more detail would not be amiss.




5. Performance and  Compatibility


There are many full-screen images on this website, so it might have an impact on a slower network or mobile device


6. Strengths & Weaknesses


Strengths: Strong visual branding; Good narrative content for craftsmanship; Concise call-to-actions to consultation.


Problems: No easy product browsing; heavy images could impact performance; sometimes call-to-actions are a bit vague.


7. Recommendations


Add a section to the product brochure or catalog, complete with style, color, material choices, and a filter function for browsing variety straight away. It would be better if it had a responsive design and lazy-load images. This way, the user will never end up with delays or a non-interactive scroll bar. Make the call-to-action buttons more descriptive.


Website 5: JIII Atelier (jiii-atelier.com)


1. Purpose & Goals


JIII Atelier is a studio that offers web design, UI/UX, development, and planning. The website shows off its design uniqueness and service quality, and attracts clients. Its goal is to illustrate the reliability.


2. Design & Layout


With clean and restrained design, the site uses muted colors, clear typography, and a modular structure. The home page is quiet and organized. However, a rather unnecessary repetition in decorative elements, possibly drawing some attention away from the main points, and even makes the layout more confusing.




3. Usability & Navigation


The navigation is simple: About, Works, Services, Contact, which addresses user needs. However, the home page does not give much information about client work, thereby requiring users to get into the Gallery first for concrete examples and first-hand looks at what they can do.


4. Content


The content efficiently presents the studio’s philosophy, services, and method of working. The site also contains a note of recent updates demonstrating it is active and maintained. 


5. Performance & Compatibility


Because the design does not use large images, the website has good performance. Pages load quickly, and navigation is smooth. The layout will most likely be well-scaled for mobile.


6. Strengths & Weaknesses + Recommendations


Strengths: Readily apparent professional, neat design; clear and easy service positioning; smooth navigation that is both basic and effective; active content. 


Weaknesses: First look at home lacks literal examples of portfolio work; multiple decorative references; low level of detail in project pages.


7. Recommendations


On the homepage, display some thumbnails of past projects in order to immediately show people the studio’s work. Get rid of such repetitive decoration. Add some longer text explaining various challenges, measures taken, and final consequences found in each actual case study.


Exercise 1

Comments

Popular posts from this blog

Advanced Typography - Final Compilation & Reflection

Advanced Typography - Task 3: Type Exploration and Application

Advanced Typography - Task 2: Key Artwork & Collateral