_edited.jpg)
.png)
.png)
Project Overview
First impressions in business matter. And even though we have seconds to make a lasting impression on potential clients, how do we maintain those impressions?
​
Our Objectives:
​
-
Redesigning the interface to help users to easily navigate the website to find all the information they might be looking for, while also creating a consistent & pleasing user experience.
-
Meet business objectives for the artist.
The Solution:
An organized web layout with keywords for SEO & separate web pages for each art service offered.
My Role
UX Researcher
UI/UX Designer
Tools
Figma
Miro
Google Forms
Duration
4 weeks
Design Process
Challenge
Finding a way to engage our users with the beauty of the artwork along with the information regarding each service was a challenge in the development of this redesign.​
​
Few Factors in Play:
- How do we capture a users attention & retain it?
- Once we have their attention, how do we keep them engaged?
- How do we gain & retain potential customers & followers?
User Research
On a mission to answer some of these challenging questions,
I interviewed & surveyed a variety of art enthusiasts, recent clients of the artist herself, along with some aesthetes. We also gathered insights by taking a look at the competition.
The goal was to get an idea of the thoughts, feelings, & pain points users might have while going through the website.
Goals
-
Determine what our users expect when searching up an artist's website
-
Understand how the redesign can help engage & retain more potential clients & followers
Methods
-
50 participants
-
Surveys via Google Forms
-
Conducted in-person interviews
-
A/B Testing
Affinity Mapping
Sticky notes were created to keep track of data points provided by the in-person interviews. This information was sorted into categories that would be focused on when redesigning.
Research Data
The questions were asked based on the user's experience with navigating the website, reading through the provided information, & answering based on a 1-5 scale (from 'not at all satisfied' to 'extremely satisfied'), some A/B testing questions, & checking all the boxes that applied.
For this redesign, we focus primarily on the details that our users pointed out that we could improve on & make appear more professional.
Competitive Analysis
In evaluating & researching the right way to promote services such as 'Portrait & Commission Paintings', 'Live Wedding Painting', 'Painting Parties', etc, I found most of the answers to be on the competitor's website.
By looking up other Houston-based artists I was able to find key insights that would help move my redesign in the right direction.
Main takeaways from the competition:
- Keywords for optimization
- Layout patterns found on many sites
- All services available to view on nav bar
- Clear theme
- Clear design elements & principles applied
Examples:
Goal:
HMW gradually increase the amount of satisfied users who might consider becoming clients in the possible future?
Discovery
Feedback from interviewees, surveys, & additional research helped me identify the main concerns to focus on when creating a purposeful & effective redesign for this particular project.
​
Common Concerns:
- Does it provide enough information?
- Separate pages for each service
- Accessibility, layout, & organization
- Clear style & theme with appropriate design elements
​
​
​
User Personas
With the information gathered from interviews, surveys, & tests, we made our user personas whom we would refer to during the rest of the process of creating the redesign.
Core Needs
-
Needs to find entertainment for her wedding soon.
-
Be able to book straight from the internet.
-
Find all the information she is looking for online.
.png)
Pam Smith, 32
Houston, TX
Pam is a busy full-time business owner. She is getting married next year & has recently seen live painting videos pop up on her social media feed. She is interested in looking more into this kind of entertainment to book for her wedding.
Frustrations
-
Does not want to book last minute.
-
Lacking knowledge on how live painting works.
-
Not finding enough information on an artist's site.
-
Slow response times.
Core Needs
-
Needs to find a local portrait artist they can contact.
-
Be able to find all the information easily.
-
To feel connected to the process.
John & Tammy Jameson, 71, 65
Houston, TX
The Jameson's are both retired. They live very exciting lives full of travel & adventure. They are looking for a local portrait artist who can capture their essence and livelihood in a personalized work of art for them.
Frustrations
-
Lack of experience with technology.
-
Not finding reading material in large enough fonts.
-
Being left out of the loop informatively.
-
Not having enough information to make a decision.
Goals:​
-
HMW gradually improve the layout of the site for easier navigation?
-
HMW make it easier for the user to find the information they are looking for specifically?
Architectural Sitemapping
The original sitemap was practically inexistent because it was meant to be a one-pager website. Eventually an art gallery page was added, but as for all the other items on the nav bar, they all led to a different spot on the same page.
​
The new sitemap has an emphasis on each individual art service having its own page to provide more thorough information.
This simplifies the navigation process, creating the most easy user flow we could possibly make for users of all ages. All other questions not answered by the respective pages will redirect to the contact page which is ultimately where every potential client will go to inquire about rates & such.
​
Sketches of how the informational architecture was to be implemented:
Sketches
I created sketches that had possible solutions to our web redesign for both desktop & mobile.
​
Both had options, either A or B, as far as what users would prefer to see on the redesign.
Art Gallery Options
Desktop
Optimized for mobile
Art Gallery Options
Wireframes
Mid-fidelity wireframes were created based on the user feedback we got from A/B testing.
75%
75% of users preferred to be able to contact the artist directly from both the homepage & the contact page.
68%
68% of users would rather be able to access all the art styles on the same page, rather than being directed to other pages.
Style Guide
To finalize our high-fidelity models, the style guide was created. Fonts were chosen to give the website a more modern & futuristic approach, while still keeping it professional.
The color palette for this project represents the values the artist wanted to convey through the redesign.
​
-Black hue: conveys a sense of sophistication & mystery in a design. Since we are building in a space theme, this fit perfectly.
​
-Blue-Violet: This bright blue-violet color provides a feeling of energizing & refreshing. Ultimately what we're looking to accomplish with the redesign. The purple tone in this color is also associated with creativity & imagination.
​
-Gray: This color is used for text to help with contrast & usability concerns.
Typography
Syne
H1, H2, H3, H4, H5 ,H6
Questrial
Paragraphs 1, 2, 3
Colors
#6038FB
#C7C7C7
#080319
_edited.jpg)
_edited.jpg)
_edited.jpg)
.png)
.png){kind=small}
.png)
.png)
SEO was improved by adding keywords that were found to be more attractive to website traffic regarding artists in Houston.
Changing up the title & description metadata, and even repeating keyword phrases throughout the webpages several times, would give the redesigned website a much higher chance of being found.
​
Also added:
-web accessible alt tags to images
-descriptive links versus "click here" buttons
Before
Nav bar blends into background, making it a usability concern
4 different styles, color combos, fonts
4 different sections, all led to contact portion on the same page
Nav bar is clear & visible at the top
After
Style & theme are clear
Each subject has its own page with more info
Art page has no order
Art gallery is separated by category
Usability Testing
I brought back 5 of our original interviewees to test the final product. Their job was to navigate all the webpages thoroughly & evaluate the effectiveness of the redesign.
" It's so easy to navigate! "
" Visually appealing, while also explaining everything you need to know about every service. Great update. "
" I love the animations & space theme, really speaks to the artist's personality. "
" This redesign really went out of its way to remove as much inconvenience to the user as possible. "
" The website's new wording & layout of information makes the artist look reliable & credible. Way more professional than the last version of the website. "
" Very transparent with the artistic process. "
" The navigability is just as smooth on mobile. Very impressed. "
" Really great job of showing off the abilities & diversity of the artist's work. "
" This answers virtually any questions I have about the process. "
" Addresses many general concerns that a new site visitor may have. "
Next Steps
I plan to continue validating the new design by observing traffic and behavior overviews along with the amount of form submissions received.
Another way of measuring the website's success with its users will be to routinely A/B test & survey the artist's repeat clients & followers to ensure everything is still working up to par.
Takeaways
I learned throughout the research process that screening participants to get ideal users to interview & test with was one of the most essential parts of this redesign. I also learned about the importance of SEO & how it can make or break your web design.
​
Overall, I was incredibly happy with the work put into this. I believe I was able to marry the visual aesthetics of design to the proper SEO approach to produce an effective redesign.
Other Projects
Making it easy to take care of your health
Mississippi Dept. of Employment Security
.png)
.png)