PERSONA

Conducting research of the current website by using SWOT Analysis, followed by Competitive Analysis and User Interviews allowed me to have a better picture to create reliable and realistic representation of the key audience.

Catherine is a frequent customer at her dry cleaners, visiting three times a week. The way she dresses is important to her due to her busy professional and social life of always being in front of the people. Frustration arises when her clothes aren't ready, requiring an additional trip to the store.

PRIORITIZATION

Having gained a comprehensive understanding of user wants and needs, I developed a priority table to establish a timeline for the implementation of features. This strategic approach ensures that the most crucial features are addressed first, aligning with user preferences and enhancing the overall user experience.

One particularly insightful feature that users expressed was to track their orders. To better conceptualize its design, I have formulated both a task flow and a user flow, providing a visual roadmap for how this tracking feature will be seamlessly integrated into the overall user experience.

TASK FLOW

Task: User checks for order status

USER FLOW

After completing task flow, I looked at what the user’s path of “Tracking the Order” would be.

RESPONSIVE WIREFRAMES

From the user research I was able to

• Identify areas of improvement within the current design

• Identify what the users are looking for

• Understand the competition

• Map out user’s task flow for adding a feature of tracking the order online

After comprehending the users' needs, I started sketching conceptual designs for the enhanced website. Drawing inspiration from my competitive analysis, I strategically adopted popular industry layouts.

Desktop Version - Low Fidelity Wireframe

DESIGN

One of the main goal for this project is to modernize the website. After competitive analysis and researching current industry practice, I realized that the logo needs a refreshing update along with the color palette for the website. These two updates would be crucial components in ensuring a contemporary and visually appealing online presence.

STYLE GUIDE

THINKING PROCESS

I chose main colors to be black and blue. The logo color is black because the color black traditionally is seen as a symbol of professionalism and seriousness. The primary color is blue because it represents - Professionalism, Trust, Authority, Power and Loyalty. I wanted the users to feel sense of security when visiting the website.

Based on my research, fonts such as Helvetica, Arial, Georgia, Tahoma, and Roboto are considered optimal for informative websites. However, for my main headings, I opted for a distinctive choice – Kaiti SC. This font was selected to impart an upscale and sophisticated ambiance. Characterized by its elegant "serif" style, Kaiti SC exhibits smooth, flowing contrasts between thick and thin strokes, evoking the impression of being meticulously crafted with a brush. This choice aims to elevate the visual aesthetic and convey a sense of refinement to the audience.

Then for the body text, I used Open Sans which is more familiar to any users. Open Sans has open forms and a neutral, yet friendly appearance which I want the users to feel when visiting the website.

HI-FI WIREFRAMES

Now that foundations were developed, I decided to combine research and style guide to build a simple prototype to first test the vibe of the website.

Desktop version of the website:

Full view of the desktop design:

PROTOTYPE

A simple prototype was built to test the order status:

USABILITY TESTING RESULTS

Once the prototype was built, I tested the feature to the users. I had a total of 8 users participate in the test. From the testing, I found that:

• 75% of the users felt that the website overall represented the business well.

• 100% of the users successfully competed the task of checking your order

• 100% of the users said navigation is what they expect to see

What needs to be improved:

• 50% of the users recommended to place Check Order call to action button be placed inside of the hero for faster access

These findings were organized in an affinity map.

AFFINITY MAP

One of the greatest accomplishment is successfully transforming current website design to become a modern up-to-date design. This revamped design instills confidence in users, assuring them that their clothing will be handled with trust and professionalism. However, the user test also identified some areas of improvement.

ITERATION

The first thing that needed to be updated is placing Check Order Status in the main hero page. Since 50% of the users recommended this feature to be more easily accessible, that needed to be changed. Secondly, within the status check features, there needs to be a feature where the users can leave a comment if needed.

CHECK ORDER STATUS BEFORE & AFTER ITERATION

LEAVE A COMMENT BEFORE & AFTER ITERATION

KEY TAKEAWAY

It's essential for businesses to adapt to changing trends and user preferences. I hope redesigning an older website to be more modern will bring

• Improved user experience

• Better representation of the brand

• Increased visibility in the online community

From this project I also learned to effectively collaborate with stakeholders. It is a valuable skill that can greatly influence the success of a project.

NEXT STEPS

1. Conduct more usability testing - The new website still needs to be tested more to refine the user process. Conduct more testing and evaluate the feedback

2. Explore option of adding a payment feature - The payment feature will allow the users to make the payment online instead of at the physical store

3. Research the benefits of Sign Up feature - There should be clear goal when a user signs up to a website. Make sure there are benefits when a user signs up (i.e., rewards program, order history, newsletter, coupons, etc.)