The Problem
The Portal is an agency located in Irvine, CA that offers web and mobile development, and content marketing services, at a fraction of standard industry costs.
When I started at The Portal as a UI/UX designer, I was asked what I thought of their website (pictured below) and if I could improve it. After only a few days in the office, I got a great sense of what the Portal is about. It is hungry, humble, energetic, supportive, fun, and collaborative. Yet, I didn’t get any of this from their website nor was I able to easily navigate it. So I set out for a complete redesign using a user-centered approach. I split the redesign project into four phases.
See the redesigned live site at theportal.io
When I started at The Portal as a UI/UX designer, I was asked what I thought of their website (pictured below) and if I could improve it. After only a few days in the office, I got a great sense of what the Portal is about. It is hungry, humble, energetic, supportive, fun, and collaborative. Yet, I didn’t get any of this from their website nor was I able to easily navigate it. So I set out for a complete redesign using a user-centered approach. I split the redesign project into four phases.
See the redesigned live site at theportal.io
Original Website
Phase One
I completed a competitive analysis where I researched other agencies offering both web/app development and marketing services in the OC area in order to identity the most relevant competitors to The Portal. I narrowed in on the most relevant competitors and from that list, selected a small handful of websites to analyze further and include in a detailed report. I looked at a variety of things including:
- Tone and copy of the company
- How quickly and easily I was able to understand what the company is about
- How easy it was for me to navigate and get to desired areas
- Overall design features; how I interacted with them and what I was drawn to
- Common content features between competitors
Phase Two
I conducted a thorough audit of the Portal's website and its interaction flows.
- I created three personas from different target audiences to help better express the functional requirements for the site. I completed cognitive walkthroughs searching for specific information based on these personas.
- I found some problems, including issues with navigation, such as redundant pages, difficulty wading through the lengthy website copy, and hidden dropdown menus that required too many clicks. The gray and transparent call-to-action buttons faded into the background, there was little visual hierarchy, and several violations of Nielsen’s heuristics were sprinkled throughout.
- The visual aesthetic exposed that the Portal had no branding other than the logo, and the experience of navigating the website did not engage prospective clients optimally.
- I conducted informal interviews with local entrepreneurs and startups, who are representative of the Portal's potential clients, and asked them what kinds of things they look for when researching and deciding on development and marketing services. I created personas and scenarios based on this information and used them to drive the creation of user flows and Balsamiq wireframes.
Phase Three
The most laborious (and most fun): design.
- I narrowed in on the bare bones of what the company stood for. I collaborated with members of the Portal team to define the mission, core values, goals, audience, voice, and culture of the company.
- As I was focusing on the structural and navigational design of the website, I asked local entrepreneurs and student developers to complete cognitive walkthroughs to ensure I was utilizing user feedback at every stage of the design process. Hearing their feedback as they navigated the wireframes was invaluable in identifying pain points and design decisions that were working. Examples of these include the need for a distinct section dedicated to application information for aspiring Portal student developers, and the need for a convenient FAQ section.
- I then moved onto the visual design of the website, which first required me to create a visual brand identity for the company. Below I describe some of the reasons behind my visual design decisions.
- After spending time on the website, I wrote a user test plan with formative and summative objectives, metrics, and tasks. I executed these user tests and used the data to make changes. Portal software engineer Evelyn Luu and myself launched an iteration of the new website.
New Website
Visual Design Reasoning:
- I chose blues as the main colors because research shows blue is highly associated with trustworthiness, calmness, serenity, and has positive effects for businesses.
- I chose an orange-coral to go alongside the blues because of the blue and orange complementary relationship and because orange is known to create a sense of haste and impulse.
- I incorporated plenty of white space to create a sense of breathability and spaciousness.
- I created playful, yet professional, flat illustrations to communicate the Portal’s identity. I incorporated arms and hands to show the collaborative nature of the company.
- I chose Raleway as the typeface for the headers on the site and Open Sans as the body text based on legibility research I did.
Phase Four
Analysis and more usability testing.
After presenting the proposed website to the founder of the company and receiving a very positive reaction, we went live with the new website that now captures the fun culture and great offerings of the agency.
- I carefully analyzed (and am still analyzing) user recordings and data from HotJar as well as Google Analytics. I looked at a variety of things including how users are getting to the site, user journeys, drop-offs, heat maps, content of most interest, bounce rates, conversion rates, etc. and I made changes based on this data.
After presenting the proposed website to the founder of the company and receiving a very positive reaction, we went live with the new website that now captures the fun culture and great offerings of the agency.