CFE Development Blog: Statement of Intent

Topic

The topic I’ve chosen for my CFE project is to produce UI focused website design. It will be published in web platform. The coming brief is to produce an artefact within 40 hours. Therefore I pitch an idea of producing 6 quality UIs of webpages and also a workable website within 40 hours. I am proposing to take part in this website design competition because my ambition is to be a UI/UX designer. A UI/UX designer needs portfolios which are based on UI and UX designs. My other portfolios are also UI/UX focused: Rhythmic Strategy game (Final year project), Foodice a mobile application which helps user to decide where to eat, W.O.L.F a paintball club website which promote to students to help them to recruit members and Halloween Town a flash game which allows people to enjoy and explore the world of Halloween. However, I would like to further improve my skills on UI/UX therefore I decided to produce an artefact based on the brief of this Horizon Interactive Awards.

The topic of artefact I will be producing is focusing animal welfare. The reason is to create an awareness to help the animals which reflect back to my life principle, doing good. Horizon Interactive Awards have the advocate category which allows me to apply my life principle into the artefact. Besides that, from a UI/UX designer perspective, I can do good in terms of creating a good UI/UX for the website which helps people to navigate the website easily.

Problem

The problem I’ve faced is animal extinction. A lot of animals are at the edge of extinction due to human’s doings; producing products such as bags, scarf, wallet and etc using animal’s parts. Some of the animals are mass killed to have them as foods and some of their habitat has been taken over by human causing them to lose their place to live.

Objective

My objective of creating this website is to create an awareness which able to help the endangered animals. The awareness is also to tell people to appreciate animals which are going to extinct soon.

Design Language

The website is inspired by Japanese origami. It will be executed using basic shapes (tangrams) to form the shapes of animals and product produced by the animal. The shape of the product will change into the shape of the animal when user mouse over it. There will be fixed shape on the first webpage, when the user scrolls the website different shapes from the other webpage will merge with the fixed shape and form different type of animals. The website will have a smooth transition of the merging of different shapes, using CSS 3.

Project Scope

My objective for my final project is to present a workable website which consists of 6 good UIs of the webpage within 40 hours. The webpages will be focused on UIs rather than the experience because of the limitation of time.

Genre
Horizon Interactive Awards do not have any specific briefs. However, they do have different categories to take part in. The project I decided to focus on is advocate website. It is a non-profit website which helps on raising awareness and creating social movement.

Form
The website will be developed by using either Adobe Dreamweaver or Adobe Muse. It will be run on web platform. The web will be designed on UI focused and some simple transition will be applied on the website.

Target Audience

My target audience is for peoples who are unaware of the situation of the animal which is at the edge of extinction. It is for both genders, male and female and targeted on them who are the consumers of product made by using animal’s parts. The age group of target audience is between 20 years old to 30 years old.

Technical Specification

Platform: Computer, N/A on mobile & tablet
Browser: Google Chrome
Resolution: 1366 x 768

Existing Skill & Knowledge

Software
In terms of software, the skills that I need to have in order to develop the mobile game that I’ve proposed is Adobe Illustrator and Adobe Dreamweaver.

Adobe Illustrator, I have been learning it since my Foundation year in Degree. This software will be useful as it helps me to generate graphics as assets which I needed it for the website. For the website I might be using graphics rather than images due to the limitation of time.

As for Adobe Dreamweaver, I’ve learnt it since Level 4 of my Degree year. However, I did not utilize the software much as I use Adobe Flash more often. But, the skills I have for Adobe Dreamweaver are still sufficient for me to complete this artefact.

Skill set

I have some knowledge that benefits my artefact which is the consideration of UI and UX for the user. I’ve learnt building UIs for the in level 5 by making web, game and application. All of the projects require good UI and UX.

New Skills and Learning

The new skill that I will have to learn is Adobe Muse, a new software. This software will ease me on creating the website which I can put more focus on designing the UI. Adobe Muse can easily create the website without needing much knowledge about coding. It can ease me in terms of creating a better UX in a short amount of time compared to Adobe Dreamweaver.

Working Timeline [40hours]

10 hours - Researching

15 hours – UI designs

10 hours – coding in Dreamweaver

5 hours – troubleshooting and refine bugs

Competitor Research

www.dadaabstories.org

www.noonedeservestodie.org

Both of these websites are the past winners for Horizon Interactive Awards – the competition which I’m taking part in. Dadaab Stories is the winner of 2013, the website tells great story using short video for each webpage, and there are explanations written on the video. The compositions of the texts are well organized according to the video. As for Noonedeservestodie, they have great UX such as the transition when user scrolls down. Besides that, they also have great content which able to bring out the impact of the awareness.

Both of the websites are great in terms of UI and UX. However I have restriction in terms of execution time: 40 hours. I will not be able to finish both UI and UX in time. Therefore I planned to focus on the UI and the contents of the website.

Benchmark

These two are advertisement about animal welfare which sends out great messages to the society. However these two are digital advertisements which are still. Using website I can explore different interaction to create a better outcome in terms of UI. I will be using minimalism and big picture web concept to apply on the project I am to produce.

Wireframes [Look & Feel]