Beedie

Make SFU Beedie, Segal and Executive Education Responsive

Working as a web developer at SFU Beedie School of Business was my first industry experience and also my first time taking on a technical role as an intern. It was a four months internship with another four months as extension. During the extension, my supervisor and received a major project, which is to completely transform the existing 800 web pages under SFU Beedie and Segal into responsive design within four months of time.

Challenge

2 years ago, Simon Fraser University decided to change its look and feel across all platforms, and changing its web to responsive design. This meant that we had to redesign, and redevelop all the existing webpage that is under the brand of SFU Beedie. Beedie was the most often visited faculty webpage, and also the faculty with most web pages. As we are not using SFU CMS to create all web pages under Beeide, we were given one sample page from SFU IT, and create everything from scratch

Approach + Solution

Web system manager and I had to reverse engineer to see how the site was built and designed. Together, we learnt about responsive web design, and created our own grid system for SFU Beedie. We always begin with wireframes on paper with my supervisor, then it goes to web mockup using Photoshop and illustrator. Then we work closely with the faculty members to produce and publish new content. After meetings, revisions to mock ups, then we would began to build the template page, and revise the design gap.

Result + Achievements

We were the first faculty to transform 375 faculty webpages to reponsive design, and launched only 15 minutes after the main SFU site launch. Many were surprised at our turn-around rate, and how we built all templates for Beedie based off of one sample page with just a team of two.

Exec Ed

The second project we started at the same time was shifting from LSG to Executive Education; Exec Ed team asked us to build 28 web pages and 11 templates for their new brand.

It was a rewarding experience as it provided me with one-on-one client experience, and worked with a team of professional designers and writers. We were able to successfully launch 2 different brands on the same day: Exec Ed and SFU Beedie. Personally received client appricieation letter after website went live.

Swatch

Digital experience design proposal to resolve generation gap in consumer base

We designed a desktop and mobile website to engage fashionista by inspiring them with combinations of fashion and Swatch watch images, allowing them to explore fashion and watch based on location and style. It creates a seamless experience from digital to physical with emphasis on exploration, storytelling and self expression.

Business Problem:

Weak North American Market, Misguided Brand Perception and Failure to Address of Age gap of young 20s-30s.

Why it needs to be solved:

Dependence on Asian/ European markets lead to unstable revenue. Swatch’s popularity in China can also be attributed to the fact that they are one of the only few international companies allowed to operate in the country, making the brand susceptible to major competition if these rules change.

Opening:

Create a stronger connection between Swatch and street fashion people by building the relationship through relevant interest and empower them to express themselves.

Targeted Audience:

Our primary target customers are the 20s to 30s Street Fashionistas who express their identity through fashion, and are provocative about fashion trends and activities. Street fashion encompasses the same average age range as Swatch’s new target audience - a demographic they have failed to target effectively with their product.

Research:

Interview and Field Study:

Insights:

They value stories and images of 'real' people whom they can relate to

Values process that communicates the quality of the product

They care about self expression, exploration and fun

They are more interested in their own local fashion

Gains:

Be able to show their personality/identiy

Connect with like-minded people (creating conversation)

Can be an influce/inpsiration to others

Pains:

Keeping up with current trend/maybe going against trend

Find clothes that suits you

Knowing what they have to know when they shop

Jobs:

Telling something about yourself with your clothes

Reframe:

Can we utlize the microtrends in street fashion world to help spread Swatch's brand identity?

Can we bridge the generation gap through utilizing existing crowdsourcing

How acn we allow self expression while allowing for exploration?

How can we seamlessly blend storytelling with product?

Design Precedent:

View Our Process Book

NFB

Photo Anthology II series - Monthly interactive documentary series

As a junior interaction designer at National Film Board of Canada, my main responsibilities activity revolves around supporting multiple projects that is in their development, design, and prototyping phase. The three main projects that have been assigned me to work closely with are Tangles, Seances, and Anthology.

NFB digital studio is creating a platform called Photo Anthology II series. This platform is catered to Canadian creators, and providing them an opportunity to communicate their stories through the format of interactive photo essays. With three main focuses of writing, photography, and sounds, NFB digital studio will be releasing a series of interactive photo essays on a monthly basis. Baba - a Canadian artist’s story about tracing her father’s past in South Lebanon - will be the first interactive photo essay to release as part of the Photo Anthology II series. These stories will be made available across all platforms in hopes of engage regular and new audiences with a unique cinematic reading experience that delivers diverse Canadian stories.

Baba Design Process:

1. Understanding the what, who, how, and why:

i. Research and understanding the story.

ii. Setting design constraints based on research.

2. Ideation:

i. Content planning

Content planning begins after developing a thorough understanding of the story, and the structure of previous interactive photo essay produced by NFB digital studio. As a junior designer, I first began by coming up with photo, and text pairing, which then needs to be approved by the digital producer. Then we work together to revise the composition, and decide what is necessary in the design to support the beats of the story.

ii. Design research

iii. Wireframes

3. Shaping a concept:

i. Look and feel mood board

ii. Wireframing

iii. Designing for the story layer, aesthetic layer, and complimentary animation layer.

iv. Design explorations

This process begins by a design jam session with the art director, and the digital co-creator. We first identify all the elements that is necessary for the story, then as the junior designer, I will began to produce design compositions, explorations, and mood boards for each elements. I started from typography, colors, story layer design, complimentary layer, and then animation layers.

v. Prototyping.

4. Refining a conept:

i. Design explorations

The story elements that went through most design iterations, and refinement was the animation layer. We had two directions to begin with, either create animation that shows translations of journals, or animation further supports the story. With directions from art director, we went with the second choice since the story focuses more on the present than the past. We discovered that there is a design opportunity to show the contrast between the artist expectation, and reality. Then I began different sets of animation explorations that focuses on the abstract illustration style in the 60s, and pop-up book style animations. From sketching, paper mock ups, static illustrations, and scroll-through animations, I revise weekly based on feedbacks from art director, and digital producer.

ii. Prototyping

5. Final Deliverables:

During this stage, I will producing vector assets, reference moving composition, and communicating with the developer to help the build process.

Full details will be shown after product launch.

SAP

I am currently doing my thrid internship as an user experience designer at SAP. As a User Experience Design intern on BusinessObject Cloud for BI at SAP, my focus is data visualization. My main responsibilities revolves around supporting multiple development teams in terms of creating design specs for new features, mapping out edge case scenarios, validate design and workflow through conducting user testing and design research. Details will only be shown after designed features are public facing, but I am happy to chat in person about my experience at SAP.

Side Projects at SAP:

1. User Flow Kit for my team in Sketch

2. BusinessObejct Cloud Website Redesign