Start-up Company Customer Journey

UX & UI DESIGN

Role

UX Researcher & UI Designer
CX Journey Mapping
Web design and WordPress Developer

Background & Challenge

Companion Matters is a local startup that aims to help seniors and persons with disabilities stay connected with their loved ones. They needed a solution where people could learn how the service works, select a package based on individual needs and desired level of contact, schedule the frequency of the calls, and set up a one-time payment or a recurring payment plan with a subscription.

Target Audience

Senior citizens, baby boomers & persons with disabilities.

Industry

Elderly Care – B2C

6-stage design thinking model

the process

I started by following a 6-stage design thinking model, going through all the stages with a very hands-on approach. 

Along with the stakeholders of the company, we conducted a user research study and interviewed participants based on the user personas created for this project.

I was in charge of conducting a competitor analysis, creating user flows, and designing wireframes, and user interfaces.

Lastly, I got to work on the most challenging aspect project, the the integration of scheduling capabilities. The scheduling process was a multi-step process with several requirements that needed to follow a certain sequence. The last step would be setting up a payment gateway to process payments online. 

Discovery

To kick-start the project, we focused on figuring out a research strategy.
The goal was to identify the users so precisely that the user experience would be familiar and with a minimal learning curve.

We asked family members and caregivers of people over the age of 62 who had a loved one living alone or in a retirement community.

I created an interview guide beforehand in preparation for the usability test. This allowed the team to conduct interviews in a consistent and controlled manner.

Throughout the interview process and research, we defined and refined the user personas, this was a critical task for the process.

  • Who is the target audience and what do they need?
  • What are their habits, culture, their personalities, and their limitations?
  • What are their pain points, and challenges, and how to address them?

By conducting a usability test, and interviewing people who fit the user persona’s profile, we were able to identify any flaws in the initial model.

Personas

Define Phase

At this stage, I analyzed my research findings from the empathize phase. This helped me to determine which user problems were the most important to solve and why.
The goal was to help users find what they needed and start the sign-up process.

Story Boarding

After defining the user’s path, I created high-level mood boards that expressed specific feelings and highlighted attributes. Mood boards gave me the chance to define the design direction. This step is especially helpful to gain momentum during the early stages of a project.
Mood boards are an awesome tool I constantly use to help me sell concepts and ideas.

Mood Board Concept
Mood Board Photo Collage

Wireframes

Wireframes

Design

The homepage was intended to provide a central place for users to be introduced to the service.

A short explainer video on how the process works,  and reinforcing the information we are trying to convey in a more descriptive and engaging way. 

User Interfaces
User Experience mobile

Prototyping

In this stage, an interactive prototype is built to show how the solution works “live” in the browser. Cutting down production time in half for faster delivery and without compromising quality.

The interactive prototype allows time for testing the solution early, and often. One of the first things to look for is the level of detail, making sure it is high fidelity and with adequate resolution on screens.

Then, proceeding to test the functionality, and how the solutions work in real environments.

  • Is the solution fully functional and open to the user?
  • Can users easily navigate through it,  and at the same time, restrict certain areas that require signing or payment to be accessed?
Reader size

Digital prototyping is exciting as the prototype resembles the final product, allowing real-time testing and validation of ideas.

Development

The development stage is a lot faster since there is a functional prototype. At this point, I just make sure everything is plugged in correctly, clean coding, backend environments, plugin integrations, and cross-browser testing.

Usability Test

Performing a usability test allows me to know what users are experiencing, and at the same time compare the interfaces to industry standards. Having an evaluation scale helps to keep things simple, utilizing 3 ratings: “poor, fair, pass.” Usually, I like to ask some people to test drive the interface, as they can identify more issues.

There are sections with some questions for each section in the usability checklist: accessibility, navigation, visual information, and labeling.

Once a “Passed” rating is achieved in all the questions, I can be confident users will find what they need. This process uncovers issues missed and identifies the ones that were addressed successfully.

Deployment

Finally, is time to deploy the solutions to the live server so it can be shown to the whole world.
The process involves several steps, including securing a hosting account, setting up DNS records correctly, implementing SSL certificates, setting up a staging and a production site, and setting up email accounts for users if requested.

Conclusion

The extensive user research and aligned with a comprehensive user-centric design and development for Companion Matters successfully addressed the needs of the organization. Resulting in a user-friendly and accessible platform for seniors and individuals with disabilities.

I was particularly satisfied with the seamless integration of a complex scheduling tool with membership-level options and payment gateways. The solution streamlined the process, significantly enhancing user satisfaction and engagement.

Next Steps

  1. Ongoing User Feedback: Continuously gather and analyze user feedback to identify areas for improvement.
  2. Feature Enhancements: Explore additional features based on user needs, such as more detailed scheduling options and personalized communication.
  3. Marketing and Outreach: Implement targeted marketing campaigns to increase awareness and user adoption.
  4. Regular Updates: Ensure the platform remains up-to-date with the latest technologies and security measures.

For further improvements and support, feel free to reach out for ongoing consultation and development services.

Hemi Hideout

I have created a sample page for you to envision what your website would like. Please feel free to look around and click on available elements to see how they function and display.

Tentative wireframe of the flow of the path users will take on the site. Once we have a discovery session with you, the path will be defined for better functionality and to achieve the goals of the user

Striking Photo Galleries

Below you can see two examples of gallery layouts that we can implement on your site.  The first gallery will open a lightbox for users to see larger images in place.  Versus what you currently have on your site, where the user has to click each image individually.

The second gallery has a hover effect allowing us to show two images at once. plus the automatic scrolling effect.

Video Gallery

This interactive video gallery allows the user to see the videos in place, and at the same time has the option to scroll through the video gallery located at the bottom of the video player.

Houston Space

LOCATION:

1172 Wilpitz Road, Brookshire, TX

Mobile Design

UX & UI DESIGN
MOBILE APP

Role

Visual Designer
UX & UI Designer

Browsing a website on mobile is very different from browsing a website on a desktop. Screen orientations are different, and certain tasks are a lot more cumbersome on smaller screens.

This reflects the importance of having an optimal mobile user experience in all device sizes.

As a designer, I aim to create intrinsic user experiences across different screens by designing mobile-first.

Mobile design presents several challenges and limitations such as screen size and bandwidth. I overcome those challenges by focusing on the essentials and stripping away the extra elements.

Prioritizing is one of the most critical aspects of product design, allowing me to deliver the right user experience to the right device.

The Winter Fancy Food Show SF

keeping it simple, improves content clarity by only using the necessary elements on the mobile site. This helps users focus on the content that matters the most, providing a better user experience while using mobile devices and small screens.

Browsing a website on mobile is very different from browsing a website on a desktop. Screen orientations are different, and certain tasks are a lot more cumbersome on smaller screens.

The Winter Fancy Food Show SF

Companion Matters

Case Study

Startup Company  

Implemented User Experience principals and techniques to streamline the customer journey for signups. 

Role

UX – UI Designer
Visual Designer
Developer

Design tool kit and technology stack

Adobe Photoshop
Adobe Illustrator
WordPress
Acuity
Stripe

Background

Companion Matters is a local startup that aims to help seniors and persons with disabilities stay connected with their loved ones.

They needed a solution where people can learn how the service work, select a package based on individual needs and desired level of contact, schedule the frequency of the calls, and set up a one-time payment or a recurring payment plan with a subscription.

Industry

Seniors citizens, baby boomers & persons with disabilities.

Channel

B2C

6-stage design thinking model

For this project, my role involved performing user research and competitor analysis, creating user flows, interfaces, wireframes, scheduling capabilities, and a payment gateway.   

I utilized a 6-stage design thinking model. The stages of the design thinking process are as follows:

  • Discover
  • Define
  • Design
  • Prototype
  • Test
  • Implement

Discover

First, I focused on figuring out a research strategy.

By conducting a usability test, and interviewing people who fit our user personas profile, I was able to identify any flaws in the initial UX model.

The users were family members or caregivers of people over the age of 62 who had a loved one living alone or in a retirement community.

An interview guide was created in preparation for the usability test. This allowed me to conduct interviews in a consistent and controlled manner.

Through interviews and research, I defined and refined the user persona, a critical task for the design process.

Who is the target audience and what do they need? What are their habits and culture, their personalities, and their limitations? as well as what their pain points and limitations are and how to address them.

The goal is to identify the users so precisely that the user experience will be familiar and with a minimal learning curve.

Define

User flow in a UX design is essential for creating great user experiences that can streamline the user’s path. The problems they may encounter, and how to fix them. Help users find out what they need, and how to start the purchasing or check-out process.

Subscription Flow

Story Boarding

After defining the user’s path, I created high-level mood boards that expressed specific feelings and highlighted attributes.

Well-planned mood boards give me the chance to personally impact the design direction. This is especially helpful to gain momentum during the early stages of a project.

Moodboards are an awesome tool I use constantly to help me sell concepts, and ideas, especially when pitching to high-level executives.

Mood board
Concept board

Wireframe & User Flow 

Wireframes Flowchart

Design

The homepage was intended to provide a central place for users to be introduced to the service.
And included a short video that explains how the whole process works,  reinforcing the information we are trying to convey in a more descriptive and engaging way. 

User Interfaces
User Experience mobile

Prototyping

I like to take a different approach on this one, I brake the mold!

In this stage, I build an interactive prototype to show you how our solution works live in the Browser.

This allows me to cut down production time in half for faster delivery and without compromising quality.

prototype
Reader size

Having an interactive prototype, allows me to test the solution early, and test often. One of the first things I look into is the level of detail, making sure it has high fidelity and adequate resolution on screens.

Then, I test the functionality, and how the solutions work in real environments. Is the solution fully functional and open to the user?  Can users easily navigate through it,  and at the same time, restrict certain areas that require signing or payment to be accessed?

Digital prototyping is exciting as the prototypes resemble the final product, allowing real-time testing and validation of ideas.

 

The development stage is a lot faster since I already have a functional prototype. At this point, I just make sure everything is plugged in correctly, clean coding, backend environments, plugin integrations, and cross-browser testing.

Usability Test

Performing a usability test allows me to know what users are experiencing, and at the same time compare the interfaces to industry standards. 

Having an evaluation scale helps to keep things simple, utilizing 3 ratings: “poor, fair, pass” Usually, I ask some people to test drive the interface, as they can identify more issues. 

There are sections with a number of questions for each section in the usability checklist: Accessibility, Navigation, Visual Information, and Labeling. 

Once a “good” rating is achieved in all the questions, I can be confident users will find what they need. 

This process will uncover issues I have missed, and identify the ones that were addressed successfully.  

 

Reader size Mobile

Deployment

Deploying it to the live server so it can be shown to the whole world.

The process involves several steps such as; securing a hosting account, setting up DNS records, setting up a staging site, setting up a production site, and occasionally setting up email accounts for users.    

Under Armour – Alter Ego

Under Armour - Alter Ego

Academy Sports & Outdoors

Company

Vitamin T Academy Sports & Outdoors

Role

Visual Designer

Team

Academy Sports & Outdoors Marketing Team

Tools

Adobe Photoshop – Adobe Illustrator