Phase Final: Final Presentation

It has been a great 5 weeks working with our 2 awesome mentors! I definitely would sign up again. What I liked the best from this experience was that both mentors were really willing to guide (not art direct) us through the process.

Before going into critiques.

Today was the day we bring our hard work to everybody. We presented to the digital strategists, digital designers, and the Design team at Engine Digital. Cynthia and I collected the past 5 weeks of research and struggles, design mockups and user experience animation for the presentation. We only had 10 mins to pitch to the crowd, as if they were potential clients and persuade them to purchase this product. Our presentation went smoothly, which was great. Jaden’s group started with their brand story and the personal stories about mental health issues then eased into the design. Whereas we logically laid out our progress and revealed the solution at the end. There are strengths in both methods but as a Digital strategist pointed out it’s better to put a one line summary at the beginning of the presentation.

All of our audience were onboard with the web browser extension concept but we also realize we need to work on the design elements a bit more. “the design needs massaging” was one of the audience said. An other good point that was broad up was how the animated logo didn’t really served it’s purpose, and probably over spent time of perfecting the letter form. As a digital product, the most important aspect is how it looks as a favicon. Any lockup beyond that is less important than designing the interface. I am glad I presented with Cynthia, we were able to understand what each other were going to say next and finish each other’s unfinished sentences.

If you were to download Herma on Google Chrome store (Mock Up)

Through out the 5 weeks, I realize how important it is to be on top of schedule and communicate with team members. Over all the process went really well. I think I would sign up again for this project because it wasn’t like other interactive class where it was less open ended. I am very grateful both Simone and Matthew took the time to come to CapU for critiques (even when it was pouring rain outside, and they were smashed with projects.)

Here is some eye candy:

We brought Cartems to the presentation. The pistachio was popular.

At the middle of Jaden and Rihan’s presentation, the office guardian (office dog), Jesse came into the room looking for donuts. He (?) caused a bit of commotion but unfortunately he left emptied pawed.

 

Advertisements

Phase 4: Review Presentation

The last week before our formal presentation. This review presentation incorporates the research we’ve done in the past few weeks and how that would turn into designs.

Here is a link to our presentation.  Herma

We recapped a little about our art direction and strategy. We also presented 3 logo direction and the identity of the brand. While we were researching we found out very interesting case studies on how to design for people with disabilities especially people with colour blindness.

Some good tips includes:

Avoid lesser-known bad color combinations: green & brown, blue & purple, green & blue, light green & yellow, blue & grey, green & grey, green & black;

Don’t use color combinations at all, but work with different shades of the same color. In other words make your figures monochrome;

Use a high enough contrast. Contrast is something that most color blind people still can perceive very well;

Use textures instead of colors;

If you want to signal emotions with color (red = bad, green = good), consider adding another symbol or graphical element with the same meaning (might be even text).
If you use Adobe Photoshop or Adobe Illustrator you can simulate color blindness by creating a proof. Just go to View > Proof Setup > Color Blindness.

So at the end, our colour palette for the brand is blue and white. Not only paying homage to the handicap icon, but also enabling people with colour blindness to perceive the interface through contrast.

This is the favicon of our web browser extension 

The second round of presentation went smoother and we finished right on time! Although at this stage we only had a rough sketch of the interface that we were planing to render, Matthew and Simone had really good insights of how the interactivity could be more accessible to a wider range of audience.

I feel like we put a lot more time into crafting the identity of the browser extension, and I think there could be more time dedicated to the actual designs of the interface. With the knowledge and expertise Matthew and Simone brings, there could be a lot more things that we can fix early on in the process. I would grade this phase : 70%.

Phase 3: Informal 1 Review at Engine

This week we focused on the kinds of design that are specifically done for people with disabilities and the branding of the browser extension.

Our mentors made a Slack channel for us to communicate our ideas, share research, and have Q&A across our channel. I think the slack channel made for Cynthia and I was great. We share and keep a record of our research on their, talk about random insights, and fire gifs. For example:

Cynthia and I were working at a cafe and working away on a rainy day.

I also really liked how our mentors would be able to comment on our the research and pull from their inspirational boards what might be useful to us. This type of communication is really helpful and I am very grateful Mat and Simone always take the time to look through our slack channel to point out interesting case studies.

So while I was looking at what to name our browser extension, I found an very interesting story. In ancient Greece, travellers will cary with them a statuary that serves as guidance and protection, called a Herma. These statues were stone columns that corresponded to the stature of the human body, and were topped by the head of Hermes, one of the Olympian gods.

(We also went through a list of very bad options:
FLAG – Flag it! Fits like a glove
Accxi – Added accessibility for your browser
Accsy – Accommodation in destination
Accsi – Browse accessible suites in Vancouver with this browser extension
Accsi Bot – An extension for greater accessibility
Herma – Brings greater accessibility with one extension
Hermy- The browser extension for disability
Herm – Browse suited suites for your needs)

British Rail’s Railfreight “moving brand” celebrated in new exhibition

When Cynthia and I discussed these names on our slack channel, Matthew saw  FLAG and immediately replied back with a case study about the British Rail Flag design case study. I really like how we exchange ideas in this form and truly felt how a team can bounce ideas off of each other. Although at the end we didn’t go with the name Flag. We still had inspiration on how to make a design system exist in its environment.

For this phase I would like to give myself 85% for stumbling upon a great name that represents the message of the brand, and grounds the personality of the brand.

Phase 2: Elevator Pitch

Today is the elevator pitch for our mentors, we had 5 mins to explain the research we did last week and set a direction for the remaining five weeks. Our formal presentation unfortunately exceeded the 5 min because we have so much to share!

Let me share some of the key slides we talked about in the elevator pitch.

Our elevator pitch was praised for it’s beauty.

We explained the key take always from our research:

• 1 in 8 people worldwide are living with a disability.
• Our observation from friends includes they try hard to overcome self-doubt, their objective is to redefine themselves and to build self-confidence.
• “Disability is a usability amplifier” — Deborah Edwards-Onoro

We came to the question: How might technology assist disabled travellers decided which accommodation is best suited for them in Vancouver?

We looked at travel sites such as Airbnb, tripadvisor, kayak, and expedia. We analyze the usability and information specifically for travellers with disabilities. We also looked at websites and apps for people with disabilities including chi safe path, axs map, access earth. Realizing airbnb’s strength for designing for everyone, they did a very good job at adding filters for more accessible options. Whereas all the apps and websites designed for people with disability didn’t focus on travelling and was only suited for people with mobility disability.

I also found out that Chester is the most accessible city in Europe!

At the end the of elevator pitch we proposed an app that would help people with disability look for accommodation in Vancouver. There were lots of information on the web and we took the time to synthesize and summarize the key information that would derive our app idea. However, Matthew suggested that our browser extension (plan B) was actually more user friendly for many reasons. The browser extension is an add on to any website where the user would not need a lot of learning in order to learn new interactions, it could also expand into various platform and become widgets for developers, and lastly, it could open up to more cities as the data and research broaden.

At this stage I put in a lot of time for research, and I was glad Cynthia took the initiative to come up with a template for our presentation which at the end made our presentation more polished and professional. I would grant myself 75% at this stage and work on the designing aspect as well as the research.

 

Phase 1 : Project Kickoff

Engine Digital’s monument at the entrance.

This is the second week into the project, Cynthia and I joined forces to tackle Better Living Through Digital. After the briefing meeting with our mentors, Matthew and Simone, from Engine Digital, Cynthia and I were in a dilemma. Should we use technologies to reveal hidden dangers in the form of electromagnetic waves, or should we assist people living with micro-disabilities to better enjoy living in Vancouver? Since both of us have personal experience with each topic, we decided to further research both topics at the same time. I was more drawn to micro-disabilities because of a friend.

The story is, my friend is a minor colour blind. He is not able to perceive between colour of lighter tonal values. He would look at pastel pink and see it as pastel blue. He is unsecured when he goes to buy clothing. His case inspired me to look further into how technology can enhance his experience in shopping, and how other people with disabilities are interacting with the world with the help of technology.

I started my research by viewing TED talks. Neil Harbisson is a color-blind cyborg who gave a really interesting talk about how the chip in his brain allows him to perceive color through audible frequencies. David Eagleman proposed ways for human to expand our senses with technology, such as a vest that receives sound ways where people with hearing impairment could feel words through a set of vibration. A Japanese inventor, Chieko Asakawa, developed a rudimentary artificial intelligence that helped her navigate through her daily life. Lastly, I found a speech made by Chris Downey, an architect who went suddenly blind, he contrasts life in San Francisco before and after.

This is Neil Harbisson “looking” (more like hearing) the colours of the sneakerEnter a caption

Using google docs, Cynthia and I shared our research with each other and she had some very useful insight about the movie experience for people with hearing impairments at Cineplex. As a former employee of Silvercity Cineplex, Cynthia noticed how limited the resource was at movie theaters. With a close captioning device, the audience would have to constantly shift from looking at the big screen to the small screen which had the captions. Therefore, our discussion and research found the potential in helping people with disabilities through digital.

The main take away in this research phase was 2 people doing research is way more efficient than one. It’s always beneficial to bounce ideas of the teammate and keeping each other in the loop are good practises.

My self-assessed grade would be 80%. I know with the amount of time I had, I could’ve done in depth research. Lastly, Cynthia and I work really well as a team because we are able to communicate before research and keeping each other updated to provide the be quality of useful research.

 

 

 

360: Editorial Design

Opening Spread

Deck and Pull quotes

Sidebar and Callouts (“Post” will also be animated in the style of the opening spread)

Layout Sketches

This article was designed for Wired Mag’s Digital App Version. The article explained the phenomenon of the internet is filled with “fake new sources” and how social media is the culprit of spreading unreliable information. The concept behind the layout of the article plays on the feeling of uncertainty. The reader’s uncertainty about the media and uncertainty of the influence of technology – whether it’s beneficial, or devastating. Therefore, a glitch effect animation is used as the opening page of the article, attracting the audience’s attention to motion and deliver a dystopic feel. The color palette is also based on sci-fi comic colors with a modern twist. The article is viewed on digital screens for iPads and other digital reading devices and would only be in portrait mode.

This project is a 9/10. I pushed myself to use an unconventional medium for the assignment, and an unconventional medium for delivering the feature spread. This project was definitely a great learning experience and exploration of what other things I’m able to do. From knowing minimal Adobe After Effects to knowing a little bit more:P,  putting aside all the rules and settings that apply to print layouts, and stumble in the process of trial and error to find a legible typeface, a type size, and leading etc, to make to layout work.

IDES 360: Editorial Design

Through the publication survey exercise, I learned:

• The format of the digital magazine is structured differently than printed magazines but they convey the same brand essence.
• The use of typography, layout, photography, and interactive components successfully reaches the target audience.
• The strength of digital magazine is that its photography and illustration is in high res, the editor can really tell a story from front to end because people can rarely start from the back.
• The app forbids viewers to rotate their screen, therefore, limits the different format the magazine needs to be in.

I would give our team an 8/10. I think all three of us did a thorough presentation surveying 3 different styles of magazines. We followed the brief closely and explained our observations clearly. I think I could buy a few more issues of the digital magazine to find more pattern, and techniques commonly used in digital magazines that are different than print magazines.

 

Indigenizing IDEA

This project is a collaboration between Jaden, Lillian and I.

We decided to tackle the feminism in the Indigenous issue. Our challenge was to communicate the struggles of Aboriginal mothers.

Our design processed started with mind mapping and general research.

This is the Image of our mind map

Then used the basic research for more concept development. We created an event for non-Indigenous mothers to learn about the indigenous culture. We overcome the design challenge by creating a promotional booklet for this mother’s day event. Within in the booklet, we have researched many indigenous culture/ceremonies and presented it as if an indigenous mother was telling her stories. The events such as potlatches are explained in detail for non-indigenous mothers to read about.

The booklet was typeset in a friendly Maiola and Cronos. A selection of soft pastel colors was used to resonate with the typeface to provoke empathy and gentleness.

The following spreads contain the research and design that I was responsible for.

I would rate this project 7 / 10 because of its well-researched content. I would like to improve the delivery of the message so it is more direct.

Project 4: COLLABORATIVE CONCEPTUAL DESIGN

For Jenny and VHB:

These are the inspirations for HoneyBee Map:

Map rationale

The challenge for small businesses like Jenny’s Vancouver HoneyBees is to build trust with her clients through limited web presence and physical advertising platform. The solution to increasing the likelihood of clients trusting in her brand is to showcase heritage and success through multiple platforms. After analyzing the current website, we found that the lack of history on the site is a threat to instant trust and interest in the brand.

I took on this challenge to engage potential clients in discovering the brand history and success. Jenny has reached out to various communities in the lower mainland and even some outside of BC, but she was modest about it and didn’t have any records available on-line for her potential clients to discover. Therefore, the strategy was to create an interface for an interactive map which will allow her to share the brand’s foot prints in Lower Mainland. After consulting with her, I found potential threats of having specific locations on the map would lead to the potential thief of hives on roof tops.

The solution to this problem was to point out main cities where hives are installed and have a snippet of what the brand had established in that city, for example, what companies the brand partnered with or the brand’s impact on the number of people they’ve educated.

The interface adopted the brand color and typeface to adhere to the brand identity. The icon is a custom icon where the honeycomb shape is used with in the directory sign. People who go on the website would be able to click on individual cities and find out about the brand’s impact.

This map will be placed on the home page on our redesigned website where potential clients are able to engage right away.

Branding Guideline rationale

The branding guideline was less ideation and more of deciding what parameters should VHB exist in. The brand guideline shapes the look and feel of the brand and continues to guide the brand for expansion and other collaterals. While examining some existing corporation branding guidelines, such as Coca-Cola and Starbucks, we decided VHB will have much application where the logo should be key in keeping the brand recognizable and consistent so the document explains the details of the space, shape, color, and size the logo should exist in.

Reflections on the project

This group project was a very valuable learning experience in that the design process is very applicable to the actual environment in design firms. Although I was disappointed that I didn’t push myself for a more conceptual outcome in the designing stage, rather I was responsible for creating presentations files since the early stages of the design process. I would love to have more time to talk as a group to push our ideas at the later (designing) stage. We might have had more time than we needed in the research stage, although I do believe an in-depth enriched the outcome, nevertheless, we had many brains that could have work harder in the earlier stages to yield time for the actual designing stage.

I would rate my conceptual/ideation contribution to this project 6 out of 10. For the next project, I would definitely want to focus more on the what I’m train to do – the designing portion.

 

 

Project 3 : Editorial Spread

National Geographic had always been one of the top sellers in the market. The publication targets 35-65 years old educated audience who appreciate science, photography and culture. The following mood board records the parameters of the magazine.

Along with the research, I have also jot down a sires of thumbnail sketches for the open spread concept as well as the inner spread layout. The main focus was to push through the boring layout of National Geographic and somewhat challenge the reader while maintaining the balanced layout and some graphic elements.

 

The concept that was hammered out was to show the relationship between Wonder Women’s outfit and comments made to criticize her outer appearance. The comments are contained in a graphic shape to point to the headline of the article. The target audience are use to the large amount of information National Geographic provides each issue, therefore will resonate with large quantity of information displayed in a bold. The // is a derivative of National Geographic’s horizontal black rule giving this spread a more playful contemporary take and also connecting both spreads. The type treatment of the opening spread is also carried through to the pull quote of the second spread to maintain consistency and build audience recognition. The sidebar also challenges the reader due to its tilt on the baseline. The spreads from National Geographic are usually minimal in colour, so this spread also uses only the signature colours from Wonder Women’s costume.

This project allowed me to demonstrate skills in layout design as well as practice working within parameters. If I were to rate how successful I managed to play within the parameters it would be a 9/10. The side bar has some trapped and awkward space that I would like to tackle.

Below are the references to the research and material used in the spread layout.

Who is the target audience?

http://ngm.nationalgeographic.com/ngm/advertising.html

http://www.nationalgeographic.com/mediakit/ng_magazine.html

https://en.wikipedia.org/wiki/National_Geographic_(magazine)

http://press.nationalgeographic.com/2012/09/24/national-geographic-shows-30-9-million-worldwide-audience-via-consolidated-media-report/

http://www.srds.com/publishersresearch/natgeographic.pdf

https://prezi.com/3o0epaq4prj2/national-geographic-is-the-official-monthly-magazine-of-the/

 

What’s the controversy?

https://www.un.org/apps/news/story.asp?NewsID=55367#.WKiziRLytE4

http://www.slate.com/blogs/xx_factor/2016/12/13/the_united_nations_is_done_with_wonder_woman_as_an_honorary_ambassador.html

http://variety.com/2016/biz/news/united-nations-drops-wonder-woman-ambassador-1201941260/

http://www.cnn.com/2016/12/13/health/wonder-woman-un-ambassador-trnd/

http://www.theverge.com/2016/12/13/13934892/wonder-woman-fired-ambassador-un-petition

https://www.thestar.com/entertainment/2016/12/13/wonder-woman-no-longer-a-special-un-ambassador-after-uproar.html

http://www.cbc.ca/news/entertainment/wonder-woman-un-ambassador-over-1.3893625

http://foreignpolicy.com/2016/12/13/wonder-woman-just-got-fired-from-the-united-nations-international-women-gender-issues/

http://fortune.com/2016/12/13/un-wonder-woman-gender-equality/