Columbia University Website Wireframe & Responsive Design M& Homework

M6 Assignment: Website Wireframe & Responsive Design

Marketing managers and decision makers need to possess an understanding of the fundamentals behind responsive design in digital marketing and how it impacts business decision making. Marketers need to be able to comprehend how their creative and messaging will be viewed across different devices through different digital marketing channels. The rapid change velocity in technology innovation has caused a divergence of form factors. This means that because there are countless device and platform options available, we must develop a strategy to address different size configurations, physical characteristics and latency variables. Prior to responsive design, one would try to design for all (or as many as possible) devices and platforms. Not only is this incredibly complex and time consuming to launch, it is also almost impossible to manage. Consequently, digital marketers now are turning to responsive design to allow us to focus our efforts on one design that self-adjusts itself to match the end-user’s device and platform.

The website I chose is I-Qiyi https://www.iqiyi.com

Submission Requirements

***I have many students and need to identify who you are, what section you are in and the date of your assignment. It is critical to name your Word/PDF document with this protocol and include in the header of each page this information. Failure to do so could result in lost points.

• Page Length and Formatting: One-page maximum for each component of the seven components report evaluating responsive design delivered in a Word/PPT document, one and a half to double spaced with minimum 11 pt font.

Goal of Assignment:

• You will individually evaluate your group’s company website and determine if it responsive. This assignment will give you a chance to illustrate knowledge about responsive design and why marketers need to be aware of this and basic website fundamentals. You will apply these questions to each of these seven components:

1. What does this feature look like in its present form?
2. What recommendations would you make for improvement, if any?

Students are asked to deliver a short (1-page maximum for each component) report evaluating responsive design.

• The report is due in Module 6.

• Delivered in a Word/PPT document, double spaced with minimum 11 pt font. Students are to examine the following:

(1) Wireframe

Working out from the mobile version to the desktop version, replicate the wireframe of your website and make recommendations on improvements. You may use a PPT to display this, or any of the following wireframe Tools:

www.axure.com Whether you’re creating diagrams, customer journeys, or wireframes, Axure RP helps you document the issues and get everyone on the same page.

Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer.

Wireframe Tools

With Fluid UI, ideas can be prototyped in minutes and shared instantly. Sharing, feedback and collaboration are all built in. Start with a free account and unlock your creativity. Start designing your wireframe project. Collaborate with colleagues in real-time. Test on your own device. We help you to bring your ideas to market – fast! Design from scratch. From clickable wireframes to completely interactive prototypes. We provide a full range of web interactions and mobile gestures.

HotGloo is a UX, wireframe and prototyping tool designed to build wireframes for web, mobile and wearables. HotGloo helps to visualize planning processes, build and test drive interactions very easily.

A streamlined web app that helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes.

Pidoco is software that lets you quickly create click-through wireframes and fully interactive UX prototypes.
Small and large companies in over 50 countries trust us.

Wireframe.cc offers a clutter-free environment instead of countless toolbars and icons that we all know from other tools and apps. You can now focus on your ideas and easily sketch them before they fade away.

Mock up an application and show what’s important: the idea, the information, the interaction.

(2) Device Friendliness

From mobile to desktop, is your website responsive? Does it adapt to different screen sizes? Think about the viewports and breakpoints and explain why they are important. Make any recommendations for improvement, if necessary.

(3) Content Essentials

Remember, “content is king and linking is queen.” What are the content essentials of your website? What are the main key words? What are the core elements of website brand? Did it capture those from mobile out to desktop? Do the key words appear above breakpoint in screenshot? Evaluate how effectively your website captures the core experience and make recommendations for improvement, if necessary.

(4) Content Hierarchy

Interpret your website and how well it organizes content. Remember, you need define content essentials before content hierarchy.
In the following image below, blue=important and green=least important. Which content is most prominent in your viewport? What recommendations would you make, if any?

(5) Performance

How fast does your website load? Are there a lot of high-resolution images? Consider impact of different browsers on mobile devices. Make any recommendations, if necessary.

(6) Experience Consistency

Is the website consistent? Does it have a consistent experience? Think “style guide.” What kind of recommendations would you make? Use these links to conduct an evaluation of your website:

• https://search.google.com/test/mobile-friendly

• https://developers.google.com/speed/pagespeed/insi… ts/

(7) Integration

Does your website have a call to action? Is it placed above the break point and/or in the viewport? As you scroll down, does it scroll with you? What recommendations would you make for improvement, if any?

Grading Rubric: Website Wireframe & Responsive Design (7% of course grade; Full mark: 7 points)