‹ Back to Projects

Redesigning an e-commerce platform for a business that aspires to be one of the driving forces behind the empowerment of the stylish nurse.

Driven Gym

Role:

  • Creative Direction
  • User Research
  • UX/UI
  • Branding
  • Front End Dev

Client:

Driven Gym

View Live Site

The Challenge

Walking into a Mixed Martial Arts gym as a beginner can quickly become a crippling and intimidating endeavor. Many people yearn to train MMA yet never act on it because of its media interpretation as well as personal preconceived misconceptions. I wanted to ensure that the theme of the website's theme was welcoming.

This picture for example....would not work.

To encourage potential students to book a free trial class online, the website must be highly informative and engaging. The design needs to be easy to use and appealing enough to navigate and inviting enough to entice users to fill out the online booking form. The theme must be both friendly and earnest in order to reassure motivate the user. The deadline was short, but I was granted complete creative freedom in order to meet it. The concept had to be consistent with the brand in terms of aesthetics

The Process

01

Empathize

  • Interviews

02

Define

  • Personas
  • storyboard
  • User Stories

03

Ideate

  • Competitor Analysis
  • Brainstorm
  • User Flow

04

Prototype

  • Sitemap
  • Sketches
  • Wireframe
  • Visual UI Design

05

Evaluate

  • Usability Test
Jump To Prototype

Interviews

I conducted a total of 8 semi-structured remote interviews with Driven Gym's current members using the Zoom app in order to better understand their needs and prepare the development of a better experience.

Synthesizing my results using affinity mapping helped me gain some helpful insights.
The users need:

  • Reassurance of a friendly and safe environment to train in
  • A concise introduction of the coaches
  • A direct way to book a consultation/class
  • A detailed description of each martial art offered
  • A price breakdown as well as a list of equipment needed
  • An easily accessible class schedule to properly plan their week.
Click picture to enlarge

Storyboard

I wanted to establish a visual link between the product and the user. It's critical to anticipate the type of product engagement that will motivate the customer to overcome their insecurities by making an appointment and showing up on time.

User Personas

I synthesized the results based on the research and produced two personas that best reflected the core current members.

Click picture to enlarge

User Stories

I felt it would be helpful to get some insight into the key experiences the persona would have with the product in addition to the story board. The key concerns of the users will be seeking valuable and empowering details about the gym, as well as the ability to schedule an appointment.

As a prospective member, I want to be able to easily find a description of each program offered so that I can confidently pick a style that fulfill my needs and help me reach my goals.

As a prospective member, I want to be learn about the coaches accomplishments and story so that I can be relieved that my tutelage will come from a reputable person.

As a prospective member, I want to be able to find prices so that I may be sure that the program of my choice is within my budget.

As a prospective member, I want to learn about the gym's culture so that I can see if it fits my lifestyle.

As a prospective member, I want to easily find the location so that I know if I'd be willing to travel the distance

As a prospective member, I want to know the schedule so that I can see if it fits with my my own personal schedule.

As a prospective member, I want to easily schedule an appointment so that I don't waste any time on the website.

Click picture to enlarge

Brainstorm

I had a few concepts and keywords (mostly brands) that needed to be portrayed visually. I needed some written direction to ensure I didn't stray from the main objective, and I believe the Mind Map did an excellent job of that. Throughout the ideation process, as well as some of the sketching, I kept this Mind Map close at hand.

Competitor Analysis

At this point, I felt it was critical to classify the local competition in order to determine which strengths I should associate with the client and which weaknesses I should avoid. I gathered some of the competitors I'd come up with during my brainstorming process, as well as more local brands I discovered through a quick Google search. Discovering what the competition had to offer would provide me with a benchmark to aim for in order to establish Driven Gym as a community leader in their field. The majority of the brands listed are direct competitors, but I also found two indirect competitors to see if they could inspire me in a different way.

Click picture to enlarge
Click picture to enlarge

User Flow

With the personas in mind, I thought it was essential to understand the usual flow a new customer might take while visiting the website. The two personas have very distinct personalities, and tailoring a flow to fit their personalities went a long way toward improving Sitemap's structure's reliability.

Sketches

I started the Wireframing process by sketching out many different versions of the website homepage, among other things. To ensure the users' satisfaction, I considered the structure of the layout and content. The sketches were a rough representation of what would eventually become my mid-fidelity wireframes.

Wireframes

I created a cleaner and more definite wireframe in Adobe XD to outline the features and elements I wanted to include in the design. I also had to consider how the website would look on a mobile device. I discovered that the majority of users access the website via desktop and mobile devices using analytics. A responsive design was necessary.

mood board

The mood board was created in an attempt to adhere to the design principles by keeping the design colors fresh and emotionally linked to the consumer. The colors I was going for were the same ones that were used in the actual facility's decor. I looked at the psychology of each color to see if it was a good match for the site's vision. RED, according to my study, is linked to strength, power and energy. Gray was associated with trustworthiness and stability. Finally, the green accent color symbolizes growth. The black was used to establish a sense of power and order, while the white was used to keep the composition clean. Since MMA has a more modern stance than older conventional martial arts, the fonts required to be edgy.

UI Design

You don't have to be a fighter, to train like one!

Test

With current participants, I conducted a series of moderated usability testing sessions. I put them through some "Think Aloud" exercises, which mostly revolved around the website's ease of navigation and overall emotional feelings elicited by its aesthetic. My primary aim was to ensure that users could complete any task with ease and with the fewest number of clicks possible.

Takeaway

The development stage took a little longer than planned due to some outside factors beyond my control, but fortunately, the design phase was completed well ahead of time, so I was still able to meet my deadline. I definitely think I should have given myself more time to find a more diverse group of people to interview (despite a pretty tight deadline). My questions were focused on a new prospect's experiences. Many of the people interviewed, however, were already current active members. Even though they were asked to remember their first encounter with the website, I was able to glean some extremely useful knowledge. The usability test went off without a hitch. As a result, I made a point of following Nielsen's Heuristics to ensure that my user interface was appropriate.The website was carefully designed to convey a sense of security and friendliness while maintaining its competitive edge. The key issue was maintaining the brand's authenticity.

Other projects: 
Nate C Photography
Driven Gym
Natty Nurses
JeanClervois
LinkedinBehanceDribbblePowered by JClervois

Let's work together

jclervois@gmail.com
‹ Back to Projects

Redesigning an e-commerce platform for a business that aspires to be one of the driving forces behind the empowerment of the stylish nurse.

Natty Nurses

Role:

  • Creative Direction
  • User Research
  • UX/UI
  • Branding
  • Front End Dev

Client:

Natty Nurses

View Site

The Challenge

Nurses need stylish essentials because it gives them a boost of confidence while allowing them to aesthetically express themselves. That mission was made pretty clear. Unfortunately, it was previously poorly executed on the digital end, mainly because of a lack of functionality, and oversight of UI heuristics on their previous website.

The owner of Natty Nurses contacted us in hope that I would be able to help replicate the essence that some of the leaders in her industry were able to display online.

My objective was to re-create a fun and colorful website that would fit the theme of their developing brand. The website would be a blend of E-commerce and Blog all rolled into one easy-to-navigate platform. I was to make the backend accessible to the staff so that they would be able to make small changes on their own. Full access to the blog was also discussed.

Deadline - I was given ample time to create, iterate and publish the website.

The Process

01

Empathize

  • Usability Testing/Think Aloud

02

Define

  • Personas
  • User Stories

03

Ideate

  • Brainstorm
  • Competitor Analysis

04

Prototype

  • Sitemap
  • Sketches
  • Wireframe
  • Mood Board
  • Visual UI Design
Jump To Prototype

Usability testing

I audited the old website and noticed several functional inadequacies that made the website pretty difficult to navigate. I decided to conduct some usability testing with 5 habitual online consumers who are currently employed in the medical field. I wanted to see if additional issues would emerge. Here are some of the main issues found:

  • "Each page looks like a different website" - The layout and styling were inconsistent on most pages.
  • "This button doesn't work" - Several broken links.
  • "This website seems to be poorly constructe; I wouldn't trust it to input my credit card info to make a purchase." - The use of low-resolution product images gives the impression of being DIY.
  • "Those links are confusing" - the interviewee was perplexed by the vague labels for the navigations.

There were also no calls to action on the homepage, the blog was randomly placed and not properly labeled. There were some other concerns, so we collectively agreed that attempting to repair the website would be a waste of time and resources, so we decided on a complete redesign.

User Personas

Those personas were developed by combining the perspectives of our usability testing participants. The findings aided me in reflecting on the user's needs and pain points in order to create solutions, and facilitated in the creation of user stories.

Introducing:
- Sandra Soberano "The experienced Nurse"
- Natasha Rodgers "The medical resident".

User Stories

I compiled a list of short, goal-oriented statements to better understand the user's viewpoint, the majority of which were previously gathered by the stakeholder through social media surveys.



As a prospective buyer, I want to be able to find some information about returns and refunds so that I'm not worried about getting stuck with a product I ultimately didn't really want.

As a prospective buyer, I want to be able to make my purchase in as little steps as possible so that I can go through the buying process as fast as possible.
‍
As a prospective buyer, I want to be able to read about the owner of Natty Nurse so that I may know more about her and see if I can relate to her as a woman of color myself.

As a prospective buyer, I want to be able to have a good experience going through the website so that I do not get bored while browsing through it.

As a prospective buyer, I want to be able to contact the business easily so that I can reach them if I have an issue that requires attention.

As a prospective buyer, I want to be able to be able to read about other people in my field and other relatable subject so that I may have some entertainment in my downtime. As a prospective buyer, I want to be able to find clear descriptions for each product so that I don't make a mistake and purchase the wrong item.

Brainstorm

I saved a list of websites that were related to Natty Nurse, both directly and indirectly. They served as inspirations for the design's theme or setting. I had to make a checklist of self-administered guidelines that I could refer to in the process. I also wanted to keep a couple of keywords in mind that would characterize the company's vibe.

Competitor
Analysis

This form was created to highlight what I thought Natty Nurses' rivals were doing well with their websites. I have discovered some flaws that I should be aware of. I had been drawing inspiration from a variety of brands, but these were the closest competitors I could find in the market.

Sketches

I drew multiple iterations of the homepage initially. Those options were presented to the client, and after some deliberation, we chose the last one. The client was enthralled with the idea of a slideshow in the hero segment.

Wireframes

While the homepage was built and approved in a previous stage ( sketches), I decided to create the remaining pages as wireframes. This allowed me to get a better understanding of where each item should go on each list.

mood board

The client already had a sizable social media following. The brand was well-defined, with two colors (Hot pink and Lime green) used consistently to highlight their posts on all platforms. The client was adamant about the website's colors matching those on their social media accounts. It wasn't a problem, though, because I was given the option of selecting additional colors that I felt would complement the original two. I was able to make it suit their vision by using a lot of white space and some cool complementary colors.

UI Design

For The Stylish Nurse

Takeaway

Despite the fact that I was given plenty of time to complete this project, I feel it should have been completed much sooner than it was. The key problem, I believe, was the difficulty in organizing our schedules. I'll do a better job of setting better expectations from the start next time.
‍
I'm pleased to report that changes were kept to a bare minimum for this project. The client was dissatisfied with the previous website because it had several technical and aesthetic problems.

Their budget had shrunk, and there were some concerns about some costs that they hadn't expected halfway through the project. In retrospect, I should have communicated those estimates better, such as hosting and photography. I'm happy to report that those minor problems were quickly resolved.

Testimonial

" Jean is patient, he listened to what I needed and delivered beautifully. He created an amazing website for me. He clearly understood my vision and the final design was of high quality and very creative. He had the experience required to take my website to another level. I had a great experience collaborating with Jean and I highly recommend him."
‍
- Natasha CEO of Natty Nurses.

Other projects: 
Nate C Photography
Driven Gym
Natty Nurses
JeanClervois
LinkedinBehanceDribbblePowered by JClervois

Let's work together

jclervois@gmail.com
‹ Back to Projects

Redesigning an e-commerce platform for a business that aspires to be one of the driving forces behind the empowerment of the stylish nurse.

Driven Gym

Role:

  • Creative Direction
  • User Research
  • UX/UI
  • Branding
  • Front End Dev

Client:

Driven Gym

Project Summary:

The Driven Gym redesign project will establish a more trustworthy brand presence with a feel of empowerment and empathy for potential members who may have otherwise been too apprehensive about taking part in a sport that may be seen as extremely intimidating.

View Site

The Challenge

Walking into a Mixed Martial Arts gym as a beginner can quickly become a crippling and intimidating endeavor. Many people yearn to train MMA yet never act on it because of its media interpretation as well as personal preconceived misconceptions. To encourage prospect members to book a free trial class online, the website is required to be highly informative and engaging. The design needs to be easy to navigate and inviting enough to entice users to fill out the online booking form to facilitate the onboarding process. The theme has to be friendly enough not to reassure, and earnest enough to motivate.The deadline was brief, but I was given full creative freedom to reach the goal. Aesthetically, the design had to maintain an alignment with the brand.

The Process

01

Empathize

  • Interviews

02

Define

  • Personas
  • storyboard
  • User Stories

03

Ideate

  • Competitor Analysis
  • Brainstorm
  • User Flow

04

Prototype

  • Sitemaps
  • Sketches
  • Wireframe
  • Prototype

05

Empathy

  • Usability Test

Interviews

In an attempt to better understand the needs of the core users, and in order to adequately plan the creation of a better experience, I conducted a total of 8 semi-structured remote interviews with Driven Gym's current members using the Zoom app. By asking them to recall their initial interaction with the website, I hoped to be able to construct a framework that would facilitate and enhance the experience of new prospects.

Synthesizing my results using affinity mapping helped me gain some helpful insights.
The users need:

  • Reassurance of a friendly and safe environment to train in
  • A concise introduction of the coaches
  • A direct way to book a consultation/class
  • A detailed description of each martial art offered
  • A price breakdown as well as a list of equipment needed
  • An easily accessible class schedule to properly plan their week.

Storyboard

I wanted to create a visual connection between the user and the product. It's important to predict the type of product interaction that would motivate the user to get over any insecurities by booking an appointment and following through with showing up to the appointment.

User Personas

Based on the research that were gathered, I synthesized the findings and created 2 personas that ideally represented the core current members.

User Stories

In addition to the story board, I thought that it would be useful to get some insight into the main interactions the persona will be having with the product. The users main interests would revolve around finding useful and motivating information about the gym as well as the opportunity to book an appointment.

< Brainstorm

I had some ideas and keywords (mostly brands) that needed to be visually represented. I needed some documented guidance to make sure I didn't veer away from the main goal and I believe the Mind Map served that purpose very well. I kept this Mind Map handy through the ideate process and some of the sketching process as well.

Competitor
Analysis >

At this point, I thought it was important to identify the local competition to uncover the strong points I could align the client with, as well as the weak points to stay away from. I grabbed some of the competitors I had previously come with during my brainstorming phase, and added more local brands I found with a simple Google search. Discovering what the competition had to offer would give me a bar to raise in order to place Driven Gym as a leader in their field within their community. Most of the brands named are direct competition, however I also identified 2 indirect competitors to find out if they could inspire me in a more ambiguous way.

< User Flow

Keeping the personas in mind, I believed that it was important to explore the typical flow a new customer would follow when entering the website. The two persona have very distinct differences between them, and tailoring a flow to suit their respective character went a long way to help raise the reliability of Sitemap's structure.

Sitemap >

Great usability was a huge objective during the design of this project. I wanted to make sure that every piece of information was available within 1 or 2 clicks.

Sketches

I began the Wireframing process by creating sketches of variations of the website homepage as well as several others. I took the  structure of the layout and content into consideration to ensure the users satisfaction. The sketches offered a lose interpretation of what ended up being my mid fidelity wireframes.

Wireframes

I used Adobe XD to create a cleaner and more definite wireframe that would outline the features and elements I wanted to integrate into the design. I had to also keep in mind how the website would present into a mobile format. Using analytics I discovered that most users view the website on the Desktop and Mobile. A responsive layout was a must.

Stylescape

I crafted the stylescape in an effort to conform to the design principles by keeping the design colors fresh and the colors emotionally connected to the user. The colors I was aiming for were the same colors used in the décor of the actual facility. I researched the psychology behind each color to see if it was a good fit the vision of the site. According to my research, RED is associated with strength, power and energy. Gray was linked to reliability and security. Finally, the Green accent color represents growth. The white was used to keep a clean layout and the black was meant to create a sense of control and discipline. The fonts needed an edgy look to it since MMA has a more contemporary stance compared to older traditional martial arts.

UI Design

Keeping the personas in mind, I believed that it was important to explore the typical flow a new customer would follow when entering the website. The two persona have very distinct differences between them, and tailoring a flow to suit their respective character went a long way to help raise the reliability of Sitemap's structure.

We are driven

Test

I conducted a series moderated usability testing sessions with current members. I ran them through some "Talk Aloud" tasks which mainly circled around ease of navigation and overall emotional feelings felt through the website's aesthetic. My main goal was to make sure the users were able to complete any task with no confusion, and with the minimum amount of clicks as possible.

Takeaway

Due to some outside factors beyond my control the development stage took a little bit longer than expected but luckily, the design process had been completed well ahead of schedule so I was able to still meet my deadline.
I definitely believe I should have allotted more time to search for a more diverse set of individuals to interview (despite a pretty tight deadline). My questions were based on the experiences of a new prospect. However; all of the people interviewed were already current members. They were asked to recall their first interaction with the website so I still managed to gain some very valuable information. The usability test went very well. Subsequently, I took special care to follow Nielsen's Heuristics to make sure my UI was adequate. A lot of attention was put toward assuring that the website displayed a sense of safety and friendliness while keeping the competitive aspect. The main concern was to make sure the brand kept its authenticity.

Other projects: 
Nate C Photography
Driven Gym
Natty Nurses
JeanClervois
LinkedinBehanceDribbblePowered by JClervois

Let's work together

jclervois@gmail.com
‹ Back to Projects

Redesigning an e-commerce platform for a business that aspires to be one of the driving forces behind the empowerment of the stylish nurse.

Natty Nurses

Role:

  • Creative Direction
  • User Research
  • UX/UI
  • Branding
  • Front End Dev

Client:

Nate Cox

View Site

The Challenge

Landscape photographers, both newbies and veterans, abound on the internet. Nate wants to share his photography with the world, but would he be able to stand out in such a saturated market? What should he do to make an impression?

His current website was in need of a redesign, and I was contacted to help. The aim was addressed at the kickoff meeting: to create a website that showcased his portfolio online in a slick and vibrant manner, while also making it simple for users to purchase his photography to display on their walls. The previous website had a very generic feel to it and was lacking in usability, so I had to ensure that the redesign was both creative and user-friendly. We planned to make sure the design would not distract user away from the actual products.  

Deadline - About two months after negotiations began, the client's work was to be shown at a prestigious art gallery. By then, the aim was to get it ready. With this project, I was given complete creative control.

The following were some of the specific problems with the previous website:

  • A generic logo
  • Redundant and Useless items on the Navigation bar
  • Lack of a slogan to catch the users attention
  • Lack of a hierarchy in the navigation
  • Very barebone design, lack of aesthetic

The Process

01

Empathize

  • Usability Testing/Think Aloud

02

Define

  • Personas
  • User Stories

03

Ideate

  • Competitor Analysis
  • Brainstorm

04

Prototype

  • Sitemaps
  • Sketches
  • Mood Board
  • Prototype
Jump To Prototype

usability testing

I found a few usability issues when browsing the previous website; however, I decided to put my prejudices aside and enlisted the support of 5 online consumers to permit me to take notes as they navigated through the old website, and the results were interesting. Basically...

  • "It lacks character" - Old website was created from a template
  • "I have to squint to make out the thumbnails" - Thumbnails of photographs were way too small
  • "This is very basic" - The layout of the website lacked originality
  • "The navigation is slightly confusing and overwhelming" - Navigation was too populated.

solution

  • A clear navigation, easy to use.
  • Bigger thumbnails
  • A modern, attractive but minimalist design
  • More payment options (Besides Paypal)
  • More enticing descriptions on the product page
Click picture to enlarge
Click picture to enlarge

user personas

In an effort to build empathy towards the users, I had to get a clear understanding of the problem before I could come up with a solution. I created two profiles based on user research to match the ideal customers.

Introducing:
- Donna Blackwell the "Corporate Hippie"
- Chris Yee the "Nostalgic Traveler"

User Stories

I wanted to clearly define how the product would benefit the user. The answers were based on some of the comments I gathered from research.

As a prospective buyer, I want to be able to view all of the photographed in an organized fashion so that I can easily pick my favorite photo to purchase.

As a prospective buyer, I want to be able to find out more about the photographer so that I may feel confident that I am purchasing for a professional.  

As a prospective buyer, I want to be able to have a way to contact the photographer so that I can feel relief knowing that I can reach him if I ever have any questions or concern.  

As a prospective buyer, I want to be able to find out a more information about the photos so that I may build a deeper understanding of the origin of the picture. 

As a prospective buyer, I want to be able to clearly see the prices of each photo so that I may tell if it fits my current budget. 

As a prospective buyer, I want to be able to clearly see the specs of each photo so that I can tell if it will be a good fit on my wall.

As a prospective buyer, I want to be able to easily navigate through the website so that I do not waste my time trying to figure out how to get from one page to another. 

As a prospective buyer, I want to be able to get automatically electronically (via email)updated of new products so that I do not have to keep going on the website to check if new photos have been posted.

Competitor
Analysis

I decided to get some strategic insights into systems, aesthetics, and functions from some of the industry's top executives. The lack of a Call To Action on the majority of the website was one of the most obvious flaws I found.

Click picture to enlarge
Click picture to enlarge

Brainstorm

I needed a visual guide to unravel some functionalities I needed on the website.

Click picture to enlarge

Sitemap

I built this sitemap to illustrate some of the functionality in individual pages before diving into the visual design. We kept the blog concealed, because the client had no content to display, nor was he planning on populating it anytime soon.

Sketches

We knew the photo gallery had to be on the homepage because it was going to be the most crucial part of the website. I drew up a couple of screens. The client and I worked collaboratively to choose the template that better suited our objectives.

Mood board

After some deliberation, we chose to go with a color scheme that evoked an earthy feel. I also chose colors that would complement the photos' rich hues rather than contrast with them. The photographs were to stand out on their own, with no other elements on the website to divert the user's attention away from their objectives.

Click picture to enlarge

UI Design

We wanted to go for a more minimalistic look. Attempting to avoid introducing any distractions and ensuring that the Client's photograph was shown in its finest.

Give you wall a makeover

Takeaway

My intention was to build a simple design. I wanted to make sure that no element of the design detracted from my goal, which was to avoid making any unnecessarily flashy interactions that would divert the prospect's attention away from the photographs. I was granted complete creative control. As a result, the design was completed on schedule and with very little supervision. Transitioning from sketches to prototyping (without going through the wireframe) saved me a lot of time, but I ended up spending more time prototyping than I normally would. In the next project, I'll get back to wireframing.

Other projects: 
Nate C Photography
Driven Gym
Natty Nurses
JeanClervois
LinkedinBehanceDribbblePowered by JClervois

Let's work together

jclervois@gmail.com