Arrive Outdoors (currently known as Arrive) is a start up that continues to grow in its web based e-commerce rental platform that helps third party companies resale used products. As the company grows, it desired to establish a centralized Help Center page as a catch all page for information regarding finding orders, FAQs and contact information.
I created updated responsive website designs for the Help Center page with new Find Order component and redesigned existing FAQ topic modules. With a new page flow and mockup design that would streamline important help resources when visitors are searching to contact Arrive Outdoors with an inquiry about their order or the company.
UX/UI Designer
1 month
Project Manager
- Current experience audit
- Mapping the user flow
- Conducted competitive market analysis
- Designed wireframes and mockups
- Advocated the value of user-centric design approach to project manager
Arrive Outdoors's help resources were spread across multiple pages so the stakeholders desired to collect all relevant resources onto one centralized page. The only requirements were for the new Help Center page to:
The problem: How can we achieve business objectives, support UI requirements, yet craft a better support experience that places user interests at the center of the project?
The FAQ section, Help and Contact Us pages were three separate sections across the Arrive Outdoors webpage.To understand how the pages were related to each other, I went through each page to understand each page’s content structure and function. Here’s what I discovered:
Arrive Outdoors’ landing page had a long scroll depth, so users would miss the FAQ section at the bottom of the page especially after the long sections above and below. Closed accordions, while compact in design and give users control over the content they want to read or ignore, require users more effort and time to click through multiple questions that they need answered.
The existing Help page allowed users to quickly search and select important topics through jump links instead of scrolling through a list of content for their questions. However, the buttons are not easily identifiable as clickable to the user with the button outline and regular typeface.
The current Contact Us page contained the essentials, a dedicated phone number, live chat and email address for users to contact Arrive Outdoors in case they had questions. Underneath, the page contains a CTA button that jump links the user back to the landing page, creating a jarring user flow between the two pages.
To find out where users had trouble finding relevant help content on the pages, I mapped out the user flow to understand the entire experience that users faced looking for help information. While the user flow seemed simple, I discovered that there were two separate FAQ pages with different content and an overly lengthy contact us pages not linking to each other. The fragmented flow of finding helpful resources would take a user more time to find relevant information browsing through the current three pages instead of browsing through a condensed Help hub page.
In the user flow for a centralized Help page, the steps a user takes browsing for help would diminish with the collapse of three pages into one. Synthesizng insights from looking at direct competitors, I discovered that having a hub page with multiple help resources would allow for users to easily find cross linked information in addition to a catch-all in case a user struggled with finding relevant information.
Additionally, I found the Find your Order functionality to be an important feature that would give users more control of their order processing time, transit and delivery. This service would complete the user journey from virtual online purchase to physical delivery, decreasing package uncertainty or anxiety.
After identifying common patterns for a help center page and find order feature from our competitors, we organized our content similarly onto the wireframes in the order of highest priority features such as the search and FAQ topics at the top of the page. The main goal of this page is to provide users with multiple help resources on one page, linking them off to other pages that dive deeper into FAQ topics, company contact information or package status updates to resolve their problems or concerns.
After a few iterations, we were able to identify the best design for a streamlined help center page. Using the visual design guidelines provided by Arrive Outdoors, I designed a modular component for the FAQ topics for consistent visual access to content, kept the existing contact us icon text stacks, and created a Find your Order banner that highlights the important feature.
The most difficult part of creating these mockups was heavily user interface focused, as the initial mockups by the previous designer did not include responsive grids or consistent margins, spacing, and buttons. Thus, I reformatted the desktop design to fit a responsive 1440px frame with 12 grids, which fit MacBook Pro15” screens and most PC laptop screens. With this, I reformatted the rest of the UI components to adhere to the new grid and page size which was a tedious but necessary step to make sure that the designs would be accessible for users with the most common desktop screen sizes.
Throughout this project, I worked very closely with the project manager to make sure that business goals were translated well into interaction design elements. After each mockup iteration, the project manager would then go to the developer to discuss feasibility for execution, so I often ran into the struggle of fixing small UI components on a back and forth basis with the project manager as the middleman. Allowing for more open collaboration with the developers could have trimmed down the iteration time to quickly figure out what designs were feasible.
With financial constraints, we opted to focus on competitive market research to inform the design decisions. The design process was quick - we decided to collapse three pages into one following similar design patterns demonstrated by our competitors while preserving existing contact us UI components. Easily during the mockup phase of our design process, we could have done quick usability testing with users to see whether our new Help page was functional and visually pleasing.
