FIBER: The Foundation of International Business and Economic Research.          —          UX Engineering, Branding          —          Summer 2018: 7-Week Project     

FIBER UX Redesign

FIBER (the Foundation for International Business and Economic Research) is a business cycle analyst corporation

that indexes global data to provides major businesses and market participants essential economic forecasts.

The Challenge

FIBER’s informational website and online interaction had become outdated. My task as an intern was to optimize FIBER’s online presence and create a modern, fully interactive and responsive interface. Crafting a new, thoughtful user experience would help inspire trust and security between the company and client. I was expected to create a fully functioning solution by the end of my term.

My Role

Over the course of my internship, I worked with Maria, the content editor for FIBER, as well as with one of FIBER's consultants and specialists, Rikard, to research, ideate, discuss, and implement the newly designed and refined user experience.

Front-End Web Programming

As the lead developer, I developed the site’s framework and functioning systems using HTML/CSS/JavaScript. In addition, I worked on the optimization of mobile and tablet screens. I was also involved in back-end implementation that used R Programming and PHP.

 

Prototyping, Usability Testing, Reiterating

I designed all prototypes and iterations of the experience. Worked with potential users of the website to conduct usability tests and further iterating with appropriate changes after user feedback evaluation.

 

Brand Identity

Discussed with business executives FIBER's online identity, the standards of the corporation, and how to design a thoughtful and deliberate online interaction to create a pleasant impression for clients. Designed all icons and graphics. 

Team Members

Rikard

Maria

 

 

Timeframe

7 Weeks

 

Context + Initial Research

Purpose of Online Interaction

Fiber does most of its business off the company's main site and distributes data through a secure, server-based software. After discussion with team members and FIBER executives, we decided that the purpose of the website should be to clearly convey FIBER's identity and the information and products the company has to offer.

Preliminary Usability Test

Before we dove into developing concepts and iterations, we conducted a preliminary usability test to identify potential areas of improvement across the website.

Our findings include:

  • Poor optimization. Site content did not adapt based on browser size; resulted in content pushed into the top left-hand corner.

  • Inconsistent placement of the menu bar. In certain windows there would be an additional menu bar displayed vertically.

  • Graphics were irrelevant and distracting to the message of the company.

  • Users noted the website as operational, but somewhat confusing and not an impactful experience.

Visual Intention

FIBER suggested to proceed with simplicity and ease of navigation in mind. In order for users to understand the content with more clarity, I decided to design all graphics and icons as basic and symbolic as possible. This way, instead of being distracted by elaborate illustrations while users are browsing, the graphical elements act as visual aids to help understand the content at hand.

Improvement Model

 

After initial usability testing, we developed an affinity diagram to note some of the main features our new design will implement.

Low-Fidelity Ideation

We underwent three rounds of low fidelity ideation; two rounds before digitization + initial implementation of the design, and one round after usability testing to make appropriate modifications based on user feedback. Each round of wireframe ideations consisted of three to five convergent ideations, each ideation improving and/or elaborating on the previous ideation's weak points or miscellaneous sitemap flaws.

Usability Testing + Implementation

 

We ran usability tests on three different users after developing and implementing our features to FIBER's online site. Each user mentioned that the text was too small for comfort when the screen was stretched the full length of their monitor. Another issue for each user was that they had to scroll up in order to find the menu to navigate to a different page. Two of the three users mentioned that this discouraged them from further exploring the site. One user also mentioned that there was too much text and no visual aid.

 

 In the second version of the site, we addressed these issues appropriately by implementing adaptive text scaling, a frozen header with hidden side navigation, a prompting concept to encourage user interaction, and lastly, new and relevant graphics. After we finalized these functionalities and aids, we ran a follow-up usability test with the same three users. Our findings include:

  • Card prompts at the bottom of each main page successfully encourages cyclic interaction and increases the user's engagement.

  • Side navigation bar is considered simple to use by the users.

  • Graphics aid the user in making sense of the information presented.

Information Architecture

A sitemap of FIBER's website, illustrating our continuous prompting method developed after evaluating usability tests. By including larger visual prompts at the end of each screen, users were more actively engaged in interaction with multiple pages within the site.

Reflection

FIBER's website went live in August 2018.

Seeing my research, ideations, prototypes, testing, and implementations evolve from the first stages of my internship to becoming a functional and actualized product accessible on the web was an elating and humbling experience. It was an extraordinary challenge for me to immerse myself in a hitherto unfamiliar field, working alongside and learning from leaders of the organization who are experts in the subject. It is gratifying to see the product live and supporting the business functions of the organization, contributing to the improvement of their web presence, and ultimately, their outward-facing identity.

Check out FIBER's website at www.fiber-nyc.com

Final Design

NO REUSING IDEAS!  —

© 2020 — Verliquaoar Chen