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.
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.
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
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.
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.
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.
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.
After initial usability testing, we developed an affinity diagram to note some of the main features our new design will implement.
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.
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.
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