Maynooth Animate/Web/Mobile


First of all, my hat off to Dan's wonderful XD course! I've followed the PS and AI, and I can't emphasize too much how much they have helped me. True savior of the day!



190220: Maynooth Web HiFi 

190216: Moodboard, Font & Palette.

190223: Mobile & Animate. Done for now!


Animation x3

1st being the colorful string above. Inspired by strings in furnitures, though I feel it too playful for ihe target market.

2nd: Sign up vs Log in (which I swear does loop forever in my laptop)


3rd: onboarding ffc26a2f



Maynooth Mobile





Sign up:




Maynooth Web HiFi






Category - Living Room



Product Page



What could've been improved:


- MOST HORRIFYINGLY card designs should be unified. instead of having some with a solid-colored ribbon across it with words and some with a stars plus intro words below (and different words, gosh), I should've set a clear standard to them for information architecture and development. Besides the content, the size should be more consistent as well, so that cards could be sorted and resorted and transplanted to mobile page almost directly (with columns reduced).

- The amount of blank space are inconsistent, too.

- Should've thought more about the logic flow behind the star icon. In the context of e-commerce, it might be quite hard to guess that star serves as a shopping cart instead of whatever functions traditionally exclusive to social media.

- Might need to reduce the way I category items in terms of page/site structure. See how in the second top navigation I categorize furniture by their type, and under top navigation for the "Product" page I wrote "Home / Living Room (instead of product type) / [product name]"? I read recently how navigation should only follow single logic, i.e. using room category only and forget about style & type. But multiple categorizations seem user-friendly, and indeed not rare for e-commerce sites. I am sure though that multiple categorization would give IA headache once Maynooth swellllllllls into a furniture giant.

- Why place a button "+ shop" beside when the whole banner is clickable?


Why I didn't modify them: Schedule's tight :( plus I feel being picky helps.





Project 1 - Homepage Wireframe




01. Mission Statements


Maynooth is new to the game, so it is crucial to display brand identity and credibility at the very beginning to let the target audience know what they are looking at. After all, Maynooth is not a brand like IKEA about which readers need no extra intro.

The statements should not be lengthy, though. Better let the products talk, rather than boost ungrounded flourish nobody cares much.


02. Narration & Nav


Story matters! So instead of giving each section one different title, I use one semantically interconnected narration that flows through the whole homepage.

The story goes as: let us reimagine your living room perhaps with our new favorite (e.g. [name/style]), or advice from top curators (e.g. articles)! (With the product we just showed you) We have lighted the home of national celebrities, (and you can be like them as well by) join(ing) our community at a fair price today, or earn(ing) greater discounts by connecting (with us).

This is probably the job of a copywriter, but I feel the importance of an organized narration needs to be addressed at the wireframe stage.


As required, I categorize the products by rooms. The space each category occupies here is roughly in accordance with the size and significance of such a room in real life, e.g. most furnitures are placed & most activities take place in the living room, hence the largest square. This is purely imagined -- Asian life may be quite different from Icelandic. I would love additional information for deciding if "bedroom" should be the biggest one, especially considering Katherine is redecorating four bedrooms.

I add three "circles" besides the squares so that readers might sort the products by different standards. If one clicks "style", the primary style Maynooth promotes goes with the biggest square on the page, and so on. 


03. New-in


Katherine is design- and price- sensitive, so she'd want to check both the product's look and price.

I highlight product's appearance rather than price here. Katherine surely cares about price too, but we don't want her to be daunted back by money talks at this early a shopping stage when we haven't won her trust. Neither would she really favors overwhelmed by additional pricing information when immersed in Maynooth's beautiful designs (as someone earning a good salary). It's thus sound to show her only the price of those she's interested (i.e. those her cursor hovers over).

Katherine loves Pinterest, so I adopt "a button for pin at the right bottom corner", to persuade her into clicking on products she finds desirable. By clicking, she'd add this product to a temporary "pinboard", which actually served as a purchase cart typical of e-commerce website.


04. Inspiration


Inspiration is trickier, though, for the website must be tailored according to how Maynooth curates their inspiration blog, not the contrary. Does the blog consists of interviews or buying guides? What are their formats, video, articles, collage, or a combination of three? These seem business decisions, not web design's. 

I make up my own with Tumblr/Pinterest aesthetics moodboards in my head, but a bit unsatisfied.


05. Praise, Clearance, Newsletter: Persuasion & Trust


Compliments show another attempt to win trust, and hopefully a welcomed variation to the rigid grids above.

I place the clearance at the end for, again, I (unsupportedly) feel although Katherine would like buy cheaper things, she's not that price sensitive. Unlike new-in section where I intentionally hide the price information, for clearance I highlight the price, for obvious reasons.

Finally, people simply don't do business a favor for nothing. So discounts! More discounts after clearance! To convince them of subscription.


06. Footer (probably the last straw for navigation)


Footer harder than the first look to design, for whoever trying to fish out a feature from these small fonts probably haven't find any ready answer despite designer's efforts. 

Here, I try to categorize features by context. By dividing the audience into consumers, business and further breaking down the former by the purchase stage, I hope to provide a micro customer-service-like experience, besides the traditional approach including site map and FAQ. 



Project 2 - Interactivity

In my primary architecture, contact should be placed right below the FAQ, meaningful only when FAQ fails to solve the problem, so I didn't create a separate contact page.

However, I do think a popup explanation of discount policy would be useful when readers hesitate about subscribing newsletter, so here I go.


(There are observable pauses in live preview despite I have turned the transition period to 0 second. Help? :<


Project ... ? Moodboard / Color / Fontstack



I create pastel version of brand color for highlighting certain info in the future. Now i need to figure out how to jump between AI & XD without exhausting my aging laptop ...


If you read to here you're a hero :p. Thanks!


Please sign in or sign up to comment.