- Case Study - Website Redesign

eScience & Technology Solutions Website Redesign

(eSTS) is a leading provider of high-quality programmatic, engineering, and technical services.

Professionals in the Command and Control (C2) and Information Technology (IT) domains within the Department of Defense and Federal sectors. Founded in 2006, eSTS has built an excellent reputation for providing top-notch support to its customers across various complex programs and core competencies.

CHALLENGE

The existing eSTS website was outdated and lacked user-friendly features, making it difficult for potential customers to find the information they needed. eSTS approached to redesign their website with the goal of creating a modern, user-friendly website that reflects the company's professionalism and high-quality services.

APPROACH

We began the project by conducting a thorough analysis of eSTS's target audience and competitors. We used this information to develop a comprehensive user experience (UX) strategy that focused on creating a user-centric website that is easy to navigate and visually appealing.

Tools

  • Sketch

  • Adobe Suite

  • HTML5, CSS and JavaScript

Team

  • 1 UX researcher

  • 1 UI designer

  • 1 developer

  • 1 project manager

My Role

  • UX research

  • UX design

  • UI design

  • Web Development

Timeline

  • Overall: 6+ weeks

  • Discovery & Research: 2+ weeks

  • Design & testing: 4 weeks

My Design Process

RESEARCH : Interviews

During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design. Together with the team, we prepared an interview script with 32 open-ended questions, focusing on our target audiences’ values, motivations, and daily routines. In 4 days, I recruited and interviewed 7 users remotely. We referenced the user interview findings throughout the entire design process.

  • What objectives influenced our questions?
    Our main objective was to understand the user's pain points and needs in order to inform the design of our new product. We crafted our interview questions with this objective in mind, ensuring that we were asking open-ended questions that would allow us to gather valuable insights from our users.

  • How many users did we interview?
    We interviewed a total of 7 users for this project. We chose a diverse group of participants that represented our target audience, ensuring that we were able to gather a broad range of perspectives and insights.

  • What were the main insights from the interviews?
    One of the main insights we gathered from the interviews was that our users were looking for a more streamlined and intuitive interface. They found our current product to be confusing and difficult to navigate. Additionally, we discovered that our users were interested in new features that we had not previously considered, such as the ability to connect in real time.

  • How did we use our findings?
    We used our findings to inform the design of our new product, making changes to the user interface and adding new features based on the insights we gathered from our users. Additionally, we used our findings to prioritize the most important features to include in our MVP, ensuring that we were addressing our user's most pressing needs first.

Website Redesign

eSTS Capabilities Page

UX Strategy

After the project kickoff, we defined our research strategy and objectives. Understanding the target audience and their challenges were our priority. First, we built an online survey and shared it in various relevant communities. In just a few days, we received 18 submissions. Based on these, we identified 5 common pain points, which lead us to the next step.

  • What type of surveys did we use?
    We used an online survey that consisted of both open-ended and multiple-choice questions. The open-ended questions allowed us to gather qualitative data and insights, while the multiple-choice questions provided us with more structured, quantitative data.

  • How many people have filled out the survey?
    We received 18 submissions for our survey.

  • What conclusions did we draw from the answers?
    From the answers we received, we were able to identify 5 common pain points that our target audience was experiencing. These pain points informed the direction of our design and helped us to prioritize the most important features to include in our list of services.

  • How did you apply your findings throughout the project?
    We used our survey findings to inform the design of our product, ensuring that we were addressing the most pressing needs of our target audience. We also used the insights we gathered from the survey to prioritize our feature roadmap and ensure that we were focusing on the features that were most important to our users. Overall, our survey helped us to stay user-focused and make data-driven decisions throughout the project.

Website Redesign

UX Strategy

Personas

We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 4 personas for each of our user segments. They were based on user interviews and surveys, and we kept updating them throughout the project as we gathered more data. We used these personas whenever we wanted to step out of ourselves and reconsider our initial ideas.

  • Why did we decide we needed personas?
    We decided to create personas to better understand our users and their needs. Personas help to visualize and empathize with the user, enabling us to design products that better meet their requirements.

  • What data did we use to build your personas?
    We used data collected from user interviews and surveys to build our personas. We also gathered information about users' goals, behaviors, and preferences to make the personas as accurate as possible.

  • What information did we specify for each persona?
    We specified information such as the persona's name, age, job title, education, and goals. We also included details about their personality traits, pain points, challenges, motivations, and behaviors. This helped us to understand their needs and expectations and design products that better met their requirements.

  • How did the personas affect the design process?
    The personas helped us to stay focused on the needs of our users throughout the design process. By referring to the personas, we were able to make more informed design decisions that better reflected the needs and preferences of our users.

  • At which stages of the design process did we reflect back on the personas?
    We reflected back on the personas at each stage of the design process, from ideation to prototyping and testing. We used the personas as a reference to ensure that our designs were meeting the needs of our users, and we updated them as we gathered more data to ensure that they remained accurate and relevant.

User Journey

To ensure a seamless user experience for our customers, we created a user journey map for our software installation process. We started by analyzing the existing process and identified several areas for improvement. We found that the installation process was complicated and confusing for our users, resulting in high drop-off rates. We decided to simplify the process by eliminating unnecessary steps and providing clear instructions at each stage.

We tested and validated the new user journey map by conducting usability testing sessions with a group of users. The testing revealed that the new design was much more intuitive and user-friendly than the previous version.

The user journey mapping revealed that our customers were facing several pain points during the installation process, including unclear instructions, confusing interface, and a lack of guidance on next steps.

By simplifying the installation process and providing clear instructions at each stage, we were able to address the pain points and create a more seamless user experience. The new design resulted in a significant increase in successful installations and customer satisfaction.

  • How and why did we choose which path to map?
    We chose the checkout path because it is a crucial part of the user's journey and directly related to the business goal of increasing conversion rates. We wanted to ensure that users could easily and quickly complete their purchases without any obstacles.

  • How did we test and validate the map?
    We conducted usability tests with a group of users to see if they encountered any difficulties while following the checkout path. We also tracked user behavior and analyzed metrics such as drop-off rates and time to complete the process.

  • What did the journey mapping reveal?
    The journey mapping revealed two unnecessary steps in the checkout process that were causing frustration and confusion for users. We also found that some users were abandoning their purchases at specific points in the process.

  • What were the main pain points of the user?
    The main pain points for users were the two unnecessary steps in the checkout process and unclear messaging at specific points in the process.

  • What changed in the design due to user journey mapping?
    Based on the insights from the journey mapping and usability tests, we streamlined the checkout process by removing the unnecessary steps and improving the messaging. This resulted in a faster and smoother checkout experience for users, which contributed to an increase in conversion rates.

Website Redesign

eSTS Contracts Page

Customer Journey

We created a customer journey map to build a better understanding of how customers find and interact with the service and to discover opportunities for improvement. The map revealed many user problems and opportunities at the consideration and comprehension stages of the customer journey. Therefore, we paid special attention to these stages during the design process.

  • What did we want to find out with customer journey mapping?
    We wanted to build a better understanding of how customers find and interact with the service and discover opportunities for improvement in the customer experience.

  • What stages in the journey did we examine?
    We examined the consideration and comprehension stages of the customer journey.

  • What were the main touchpoints at each step?
    At the consideration stage, the main touchpoints were the website, social media, and customer reviews. At the loyalty stage, the main touchpoints were the customer support team, loyalty programs, and referral incentives.

  • What did we suggest to resolve these pain points?
    To resolve pain points at the consideration stage, we suggested improving the website's user experience, creating targeted social media content, and encouraging satisfied customers to leave reviews. For the loyalty stage, we suggested enhancing the customer support team's responsiveness, offering personalized loyalty rewards, and providing incentives for customer referrals.

  • What new features or design changes came from mapping the customer journey?
    Mapping the customer journey led to new features and design changes that improved the overall customer experience, such as a revamped website, a more responsive customer support team, and personalized response when inquiring.

Website Redesign

eSTS Contact Page

Website Redesign

Wireframes

Using Sketch, I translated my first sketches into low-fidelity wireframes. Then, I improved them by adding a few relevant stock images and copies provided by the marketing team. At this stage, the wireframes were defined enough for some user testing. Based on 4 tests, I’ve made a few alterations and moved on to creating high-fidelity prototypes.

  • Did we create high- or low-fidelity wireframes?
    Both

  • What tools did we use for wireframing?
    Adobe Photoshop, Balsamiq, Sketch

  • Did we test with the wireframes? What were our findings?
    Testing revealed usability challenges such as confusing navigation or unclear labeling. These issues were addressed through adjustments to the layout, wording, and design of the wireframes. It provided valuable insights into the needs, preferences, and pain points of the target audience. The feedback helped to make informed design decisions and helped create a more user-centered product. It also uncovered technical limitations and constraints that needed to be addressed in the wireframes. For example, certain features were difficult to implement and required more resources than initially anticipated. Additional testing revealed areas for design improvement, such as inconsistent branding or poor color contrast. These improvements were made to enhance the overall user experience and aesthetic appeal of the wireframes.

  • How many iterations did we make?
    After careful analysis and updates, only 2 iterations were needed.

Usability Testing

I created a fully-functional, high-fidelity prototype of the new flows using Sketch. At the same time, we started recruiting subjects for the test who fit our criteria. We did 4 usability tests in the first round and 2 after iterating on the issues that we’ve identified:

Issues

  • confusing navigation and unclear labeling

  • technical limitations and constraints

  • inconsistent branding or poor color contrast

What issue did you uncover through usability testing? How many times did this issue come up throughout the tests? How did the test subjects react to/describe this issue? 

Solutions

Design improvements were implemented to ensure proper branding and enhanced color contrast. These improvements were made to enhance the overall user experience and aesthetic appeal.

During usability testing, I presented the participants with the proposed design solution for the identified problem. The solution involved simplifying the navigation and restructuring the content to better align with the user's mental model. I arrived at this solution by analyzing the user feedback from the earlier rounds of testing and incorporating design best practices.

I iterated on the design two times, incorporating feedback from each round of testing. In each iteration, I made changes to the layout, typography, and color scheme to make the interface more intuitive and visually appealing.

Validation

To validate the solution, I conducted a final round of testing with a new group of users. The participants were given tasks to complete using the redesigned interface, and I observed their interactions and noted any issues or areas for improvement. The results of the testing confirmed that the solution was effective in addressing the user's pain points and improving the overall usability of the interface.

Website Redesign

e

Website Redesign

eSTS Mobile Version

UI Design

Once the usability issues were resolved, I moved on to design the final screens in Sketch. My goal was to create a visual identity that’s aligned with the brand’s values and message, which is:

Customer first - exceed customer satisfaction and expectations

Also, in checking similar companies I took a deep dive into my catalog of references for inspiration.

  • What kind of visual style did we follow and why?
    Light theme with business blue supporting colors

  • Did we follow any popular guidelines?
    Yes, we utilized Bootstrap framework and FontAwesome icons

  • What platforms and devices did you design for?
    Responsive design was used to cover all bases

  • How does your final design reflect your learnings about your users?
    Our final design was heavily influenced by the learnings we gained from our user research. Through various research methods like interviews, surveys, and usability testing, we gained a deeper understanding of our users' goals, needs, and pain points. This allowed us to create a design that addressed their specific needs and provided solutions to their pain points. We also incorporated feedback and suggestions from users during testing to refine the design. Overall, our final design reflected a user-centered approach that aimed to improve the user experience and meet the needs of our target audience.

Next steps

What next...

01

How would we continue for the next phase of this project?

To continue the project, it's essential to analyze the feedback and insights gathered from the previous stages of the project and use them to refine the design. This includes using the data gathered from user testing and feedback to improve the design and make necessary changes.

02

Was there something that we would’ve loved to do but didn’t have the time or resources?

It's common to have ideas that didn't make it into the final design due to constraints such as time and resources. In this case, it was useful to make notes of ideas, share and explore them further in future iterations of the project.

03

What advice would we give to the team or the designer following me?

As for advice, it's important to prioritize the user experience and consider the needs and goals of the target audience at every stage of the design process. Collaboration and communication with the team and stakeholders are also essential to ensure everyone is aligned.

The Takeaway

I learned how to use Sketch's functionality on a deeper level and improved my collaboration skills with team members. We incorporated design sprints, which helped us accelerate our decision-making process. This project contributed to my growth as a designer by allowing me to work on a complex project and work closely with cross-functional teams. This project crushed my preconception that a project can be completed in a linear and straightforward manner. I learned that iteration is a crucial part of the design process, and it is essential to involve users at every step. This project influenced me to prioritize user research and validation in my design process.

Website Redesign

eSTS Home Page

Thank you for reading my case study!

Want to work with me? Feel free to contact me!
...or just say hello :)

https://www.bradlawson.com
bradlawson@gmail.com
843.886.0411

Drop me a message
Let's share ideas & discuss ways to collaborate!