PoolUp is a city-to-city ride-share app that is created for college students to do long distance traveling at a fraction of the cost of Amtrak and other forms of transportation.

I spent the 3 months of my winter 2023 quarter not only on school work but also on an internship at PoolUp, focusing on creating designs for the MVP website, more specifically the home page. Out of all the projects I worked on, this was one of the most impactful and rewarding experience as I was able to see through the engineering handoff all the way to the final live website being published.

I led the design of the website and was specifically responsible for the mobile and desktop design of the Home Page. Throughout the process, I worked diligently with our design lead Alex Gloe to refine each iteration of the prototype as well as with our CPO and CEO to convey business strategy and website copy. Initially, my role was to create responsive (desktop and mobile) designs for the home page and eventually hand it off to the developers. However, I ended up taking up a lead role in ensuring the coherence of the designs across all designers and enduring a smooth handoff process through detailed documentation and style guide.

Essentially, this project was handed to us by the product team to quickly ship out a website. The entire design to launch process needed to be concluded in 2 months.

During the 2 months, we held bi-weekly meetings with the design team and the rest of the team (PoolUp team runs lean) to review our design progress and discuss business goals that we want to achieve through this website redesign. Since this internship was during the school year, we had a more relaxed timeline with 2-4 days each week spent on critiques and designing.

We had been working to ship our mobile app when potential investors had commented on the issue. We had to rapidly work together to come up with an MVP website and it's functionalities. Designing the new website became our priority at the time.

Before the PoolUp app was to be shipped, the PoolUp website served primarily as a testing site where users can book rides as a way to validate the product concept. As PoolUp was preparing to ship out the mobile app, we needed a place where investors and users can easily find information on PoolUp as a company and product.

At a high level, the new website needs to serve as a hub where investors and end users can easily learn about PoolUp's mobile app and be able to download the app from the site. Which means that there needs to be:

1. Clear CTAs throughout the website
2. Clear and concise copy
3. Friendly language

This was not a typical UX design project. Since the website was needed in a short amount of time, we conducted mostly internal stakeholder interviews and gathered website requirements such as its functionalities (as mentioned in the objective section) and copies from the CEO and CPO. We also refined the requirements from the stakeholders during each design review session.

After collecting the requirements from stakeholders, I audited the old website to figure out any significant issues that needed to be addressed in addition to what was assigned.

At first glance, some of the main issues of the old home page were:

1. Lack of enough CTAs
2. Awkward testimonial placement
3. Unscannable list of routes
4. Misaligned elements
5. Incohesive branding (across all pages within the PoolUp domain)

Thankfully, many of these issues align with what the stakeholders want to update as well.

Before starting the designs, I reviewed some other rideshare companies' websites to gain some more insight as to what elements and information might be needed in our own website. I looked at rideshare services such as Uber, Lyft, Ryde Carpool, and Ridehitch (now redesigned).

From these companies' websites, I gathered the following element inspirations from a UX perspective:

Looking Uber's website, I decided to use a clean and simple style to convey PoolUp's pages on the navigation bar. Besides the background color which changed along with the rest of the hero iterations, I focused on how the nav links are presented alongside the CTA.  

The requirements also included adding 8 testimonials to the page. Instead of having one testimonial span across the width, I opted to have a scrollable section to save space while still effectively presenting all testimonials. Users can read more if they choose to but can still see at least three on the desktop site without further action.

Again using Uber as a reference, I wanted to highlight the "Drive with PoolUp" and "Ride with PoolUp" sections, so I used more vibrant colors here while keeping the layout relatively similar to the old website. I also used two different color themes to differentiate between the two sub-products (Drive and Ride). The biggest feedback across the below 3 iterations were that the first iteration did not adhere to the branding of the mobile app enough as I was focusing more on making the website look cleaner and more modern, similar to what Uber has by using a image. So in the second iteration I incorporated the feedback and used a gradient of the PoolUp colors and illustrations that are referenced in the app itself to achieve a "friendlier branding" (Michael, PoolUp CEO).

‍

One challenge I faced here was advocating for better (mainly deeper) colors for these cards for the sake of accessibility. The "PoolUp blue" is very bright and would have been straining to the eyes under text. Although I faced some push back initially, I was able to persuade the stakeholders in using a darker blue under the text while still including the PoolUp blue in the background as part of the gradient.

‍

Note: the screenshots shown below only consists of the "Drive" section as both the "Drive..." and "Ride..." sections are similar in terms of their style and design process of each iteration.

While we were each designing our respective pages, I noticed that there were a lot of style inconsistencies across each of our designs during our design critiques since we worked independently. I decided to take the lead on creating a set of reusable components and design system to ensure that the final design style and branding is cohesive across the entire website. This also ended up being crucial in the design hand off process. The developers were able to use this guide as a reference to understand the structure and design of the website as a whole better which made the hand-off process much smooter.

The process for the mobile responsive page was relatively straightforward as the desktop design set the tone for the branding and all the designs for all the sections. I restructured the sections to be aligned accordingly made sure to adjust the spacing and font sizes for the designs to make sense on a smaller screen width.

The developers that worked on the website were hired externally by PoolUp, which made the communication a bit more challenging. We had to be very clear on how the website should look like because they had no previous experience in knowing what the expectations were design-wise.

The entire process included a continuous communication between the developers, PoolUp stakeholders, and us, the designers. With the design system that I created, I was able to lessen the friction during the handoff and development process.

Although I had thought of it previously, I did not have clear guidelines for breakpoints between desktop and mobile (such as a tablet breakpoint). The problem became evident when I was inspecting the first couple versions of the developed website and realized that at a size smaller than my laptop, the spacing and sizings were inconsistent and some were even unreadable. To resolve the issue, I conducted a separate meeting to verbally advise them on how the components should be aligned and spaced out in those breakpoints since I did not have the bandwidth at the time to create another design system for a tablet breakpoint.

The developers shipped out 1-2 versions every week for about 2 months, which meant that we had to continuously monitor the progress and check on areas of improvement to provide feedback.

‍

One of the biggest issues we faced were the vector images being downloaded as png instead of svg, which meant that they would not be scalable and would be pixelated when enlarged. This was one of the situations where we had to educate the developers on best practices of reading the Figma prototype (especially font sizes and spacings) and best ways to download the files from the Figma file. We also ended up using a shared document to inspect and take notes on aspects of the website that were not developed to the specifications we provided by putting the screenshots of the developed website and our Figma designs side by side to point out major differences.

Although our CPO had communicated up front that built-in contact forms would be a required feature in the final website, the developers were not able to deliver it. They would quote a higher price than previously agreed upon for the additional development of dynamic features which would require a database management. There were also similar issues that occurred with the careers page application features. In the end, we were only able to ship out static aspects of the designed website.