Bounteous Services page

UX/UI | Creative Direction

Creating a refreshed digital experience to build a stronger connection with users.

Problem: Refreshing Bounteous’s service page to help improve the experience for the users

Role: Senior Visual Designer

Timeline: 2 months

Success Metrics: Increase user interaction/visits for Services page and motivate users
to connect & sign-up with Bounteous for potential work.

Phase One

In phase 1, we started with reviewing the sitemap to understand the updated user flow based on the new additional intellectual property and vertical pages. During this phase, I conducted a research which included market research on other competitors, user research based on what users were struggling with or looked for in a services page. Finally ensuring designs were visually appealing, accessible, and easily usable for all users. Following that, I performed a competitive analysis to determine the current market trends and modern designs, both to see what was being used and to guarantee that our designs stand out in the industry.

Phase Two

Research / Competitive Analysis

Low Fidelity Designs / Wireframes

In phase 2, we began to start designing the wireframes to showcase the intended layout in a low fidelity presentation which allowed us to plan the user flow & information architecture. Our goal was to create a user experience with a logical sequence of information. Low fidelity wireframes were easy to modify based on external feedback. Once we had client approval, we were able to move onto the high fidelity phase.

Our designs needed to support a wide variety of devices including the 3 main breakpoints which are for desktop (1440 px), tablet (1024 px), and mobile (375 px).

Sitemap Design introducing new user flow for verticals and intellectual property pages.

Moodboard images of what other competitors are doing and inspirations or reusable components that currently exist on our page. Here we look at what are the best designs to use that will create make a more enjoyable user experience but also make improve the usability.

Phase Three

In phase 3, we started designing for the high fidelity layouts which consisted of visual styling including color schemes, character styles, UI elements, content, and more. While designing, we made sure designs were ADA compliant and could be useable for a wide range of users. Once completed, clients will have a chance to review content within the layout and provide final feedback and approval before starting development.

High Fidelity Designs

The Challenge

The challenge for this project involved rebranding the services page into the expertise page which introduced a stronger, equitable, and more enjoyable user experience. We noticed the current services page had the least interaction from users. This page left users feeling ambiguous and lost. There was no story to guide them through the experience and our goal was to design a more coherent user experience to tell a story. Upon the initial state of our designs we found that any design files for the original website was lost or non-existent which was a huge roadblock. In response to this, we needed to develop a design library to ensure any future designers and developers would not encounter the same issue.

The Solution

Introducing the Expertise page created new opportunities where we could take old designs and rebrand using new and old components to create a more consistent design experience. From this, we were able to tell a story about who Bounteous is and what they do through immersive visual designs while providing a better user experience by helping users easily navigate around the site. Difficulties from this project lead us to establishing the start of a UI design library to simplify this process in the future.

Success Measured: Users interacting/visiting Services page have increased significantly (compared to before which used to be the least interacted page on Bounteous)

Mobile (375 px breakpoint)

Desktop (1440 px breakpoint)

Introducing the start to our UI design library which currently exists on Sketch but will be integrated onto Figma soon. Here is an example of how a designer would use one of the reusable components. We’ve created the components to speed up the design process time where the designer is able to substitute the character styles and UI elements without starting from scratch.