Dreamersive
Watch this video to see Dreamersive's landing page and the main task
What is Dreamersive?
Dreamersive is a developing brand created by Wesrom Corporation. Their goal is to sell custom and non-custom paintings.
Design problem
How to sell custom and non-custom paintings online that users will want to buy and enjoy.
Summary of the solution
Custom Painting
Users are taken through a step-by-step process to help them purchase custom paintings.
They can decide if they want their paintings to be created digitally or by hand.
Next, they will provide a hired Dreamersive artist with either:
1. an existing photo
2. or a few photos that will be combined to create an image that does not exist (their dream moment).
2. or a few photos that will be combined to create an image that does not exist (their dream moment).
Next, users are taken through a 5 step process to help them personalize their painting
1. Upload photos and add descriptions
2. Pick a Medium
Users have an option to skip to step 5
3. Select a Size
4. Select a Frame
5. Order Estimate
Art Shop
Those who want non-custom art can visit the art shop.
At the shop, you can find pre-made art painted by Dreamersive Artists
My role in the project
As a UX designer intern for Wesrom, I was given this project to work on alongside my mentor (who owned Wesrom).
I conducted the various stages of the UX design process, from the research phase to the design phase.
Once a week, I would meet with my mentor (who was also the client) to present and discuss the current designs.
Summary of my UX roles:
• User Research
• Market Research
• Wire Frames
• Prototypes
• Presenting Deliverables
• Market Research
• Wire Frames
• Prototypes
• Presenting Deliverables
................................................
Let's step into the Design Process
Research phase
The first step to creating any site, brand, or product is understanding the users and the current market.
Building Personas
To achieve this understanding, I investigated the competitors' analytics posted on Semrush and determined that the user base for Dreamersive is millennials.
Because of this finding and the fact that this website is an e-commerce application, I researched the needs and expectations of millennials and their e-commerce behaviors.
Since Dreamersive is an art-based website, I analyzed the art industry to determine who would benefit from this website and what these users expect when purchasing art.
After conducting my research, I came up with three possible user groups for this website: Artists, Art buyers, and Gift buyers.
1) Artists- Individuals who will be painting the custom paintings and creating the art for the art shop.
2) Art Buyer- Individuals purchasing art for a practical reason. For example, as a gift or for wall décor.
3) Gift Buyer- Individuals looking to purchase a meaningful gift
Personas
These three user segments were used to create Dreamersive’s three personas: John Smith, Heather Watson, and Matthew Parks.
1. The first user persona presents John Smith (the artist), whose primary goal is to earn an income to support his family by doing something he loves.
How I created this persona:
• The persona was developed after receiving information from my mentor’s interview with an artist
• I conducted additional research on the art market.
• The persona was developed after receiving information from my mentor’s interview with an artist
• I conducted additional research on the art market.
2. The second user persona presents Heather Watson (Art Buyer), whose main goal for this site is to find a painting that will help her have a beautifully decorated wall.
How I created this persona:
• The persona was developed after conducting extensive research on the art industry. This included scholarly and non-scholarly articles. The research helped me eliminate art collectors (those who collect more expensive art) from this user segment.
3. The third user persona presents Matthew Parks (Gift Buyer), whose main goal for this site is to find a meaningful gift that will bring his wife joy.
How I created this persona:
• The persona was developed after conducting extensive research on the gift industry. This includes scholarly and non-scholarly articles.
• The majority of gift buyers are Millennials, so research on millennials was also conducted.
• The majority of gift buyers are Millennials, so research on millennials was also conducted.
................................
Competitive Analysis
Once I understood my users, I conducted two separate competitive analyses to get a general feel for the market and learn from the competition.
The brands analyzed for both analyses were brands on the top of the market (to give insight into what they did well) and those who were not as successful (to learn from what they are doing wrong).
Tools Used
Both analyses utilized two separate tools to conduct the analyses:
1. Google Sheets- 2 Sheets
• 1st sheet: displays SEMrush Analytics
• 2nd sheet: displays criteria based on user research
2. Google slides
• Visual of how well each site implemented the user needs (based on the Google sheets mentioned above).
1. Google Sheets- 2 Sheets
• 1st sheet: displays SEMrush Analytics
• 2nd sheet: displays criteria based on user research
2. Google slides
• Visual of how well each site implemented the user needs (based on the Google sheets mentioned above).
......................................
Competitive Analysis #1 - Photo -> painting
1. The first analysis was conducted on the photo to painting industry. This was done to inform the personalized painting feature of the site.
Competitors
This Analysis analyzed both direct and indirect competition.
Direct Competitors:
• Paintyourlife.com
• Instapainting.com
• Bookmypainting.com
• Instapainting.com
• Bookmypainting.com
Indirect Competitors:
• Crownandpaw.com
The criteria used to complete the analysis reflect the research conducted for the gift and E-commerce industries. As a result, it strongly considers the goals and frustrations of the gift buyer persona Matthew Parks.
................................................
Competitive Analysis #2 - Art Shop
2. The second analysis was conducted on the art industry. This was done to inform the art shop
Competitors
Direct Competitors:
• Fineartamerica.com
• Art.com
• Allposters.com
• Icanvas.com
• Art.com
• Allposters.com
• Icanvas.com
The criteria used to complete the analysis reflect the research conducted for the painting and E-commerce industries. As a result, it strongly considers the goals and frustrations of the art buyer persona Heather Watson.
...................................................
3. SWOT Analysis
Lastly, a Swot Analysis was conducted to summarize internal strengths and weaknesses and external threats and opportunities.
.............................
Main Takeaways from the Competitive Analysis
Photo to painting
Ensure that users trust the website
• Include trust labels
• Include a meet our team section
• Include trust labels
• Include a meet our team section
Help users know if their order will arrive on time
• Include a time estimate early on
• Include an IOU feature
Make the process simple
• Use progressive disclosure
• Clear progress bars
• Use images and icons
• Use short explanatory videos
• Use progressive disclosure
• Clear progress bars
• Use images and icons
• Use short explanatory videos
Art Shop
Limit the users’ fear of the painting not looking good in their home:
• Include a wall color feature
• Augmented reality
• Augmented reality
• Include many clear images from multiple angles and settings
Help users connect to the painting and artist:
• Include a description of the art piece under each page including information about the artist
Help users find what they are looking for quickly
• Incorporate findable and relevant filters
For Both
Eliminate users’ fear of investing in the products
• Flexible payment options- such as affirm
• Chat- so users can ask questions
• Clear return policy
• Transparent pricing – list pricing as soon as possible and include shipping information as well
....................................
Branding
Once I had an understanding of the market and the users, I established a brand personality for Dreamersive.
Factors I considered when choosing the brand personality :
• The majority of users will be visiting the site to buy a gift.
• The majority of users will be millennials
• The pricing and nature of the personalized paintings indicate that this would be a more significant gift and somewhat luxurious.
• My client wanted the website to have a dreamlike feel.
• The majority of users will be visiting the site to buy a gift.
• The majority of users will be millennials
• The pricing and nature of the personalized paintings indicate that this would be a more significant gift and somewhat luxurious.
• My client wanted the website to have a dreamlike feel.
Because of these factors, I incorporated these aspects into Dreamersive:
1. Personalized and Communicative
More luxurious items tend to have excellent and personalized customer service.
More luxurious items tend to have excellent and personalized customer service.
Examples of how I did this ↓
2. Happy and Dreamlike
When people buy gifts, something that will bring joy is a consideration.
When people buy gifts, something that will bring joy is a consideration.
Examples of how I did this ↓
3. Trustworthy and non-complex
Noncomplex websites help mitigate mistrust. This is especially important if your product is expensive.
Noncomplex websites help mitigate mistrust. This is especially important if your product is expensive.
Examples of how I did this ↓
.............................
Design phase
Now that I understood the users, the market and established a brand personality, I started sketching wireframes.
The wireframes went through 3 iterations before moving on to the prototype.
The changes made to the wireframes and prototypes were brought about after meeting with my client and receiving feedback (for example additional features to include or if a design was confusing).
How the Wireframes Evolved
Landing page
Above the fold
• The copy was changed in each iteration to match the brand’s personality. It went from simple to dreamlike and personal.
• Added in a trust pilot rating
• Added in a trust pilot rating
• Changed Navigation: bottom Nav + hamburger menu
Below the fold
The process
• Process steps evolved to best communicate the process.
• Added sub descriptions
• Added a video
• Added sub descriptions
• Added a video
Meet our artists
• More detail added to section- brief description and photo
Art shop CTA
• Copy evolved to match users mental models
• Simplified the section to prevent cognitive overload
• Simplified the section to prevent cognitive overload
Art Creation Process
• Went from a 1 step non-guided process to a 7-step guided process.
This evolution allowed the business and users’ goals to be met. It helps the user personalize their paintings in a non-confusing manner.
• Different pages were removed or combined to allow for a better user flow
• Went from a non-conversational process to a conversational process to match the brand's personality
• Different guides were added in – medium guides, size guides, etc.
..............................................................
Prototypes
Once I had a design concept I was satisfied with, I moved on to creating prototypes. These prototypes were revised a few times to ensure that the interaction design was optimal.
Below are the main concepts focused on to satisfy the user and business needs:
Progressive Disclosure
• The main task is a step-by-step process
• Accordion dropdowns on detail pages
• "Show more" buttons and links
• The main task is a step-by-step process
• Accordion dropdowns on detail pages
• "Show more" buttons and links
Visuals
• Use of icons, images, and videos to guide the process
• Samples of work
• Use of icons, images, and videos to guide the process
• Samples of work
Transparent Pricing and shipping
• Price range listed on the home page and on the first step of the process
• Free shipping listed on home page
• Shipping insurance is mentioned on home page
• Price range listed on the home page and on the first step of the process
• Free shipping listed on home page
• Shipping insurance is mentioned on home page
Flexible payments
• We offer Affirm (monthly payments)
• We offer Affirm (monthly payments)
Build trust
• Secure checkout symbol
• Trust pilot rating on the landing page
• Customer reviews with rating
• Meet our artist section
• Secure checkout symbol
• Trust pilot rating on the landing page
• Customer reviews with rating
• Meet our artist section
Customer service
• Chat feature
• Ability to do communicate directly with Dreamersive to create your painting
• Chat feature
• Ability to do communicate directly with Dreamersive to create your painting
Below is a video of our landing page and the main process based on the above criteria.
This video strongly considers our gift buyer persona Matthew Parks and how he might go about creating a custom painting. Turn up your volume 😊
(This video is on the top of the page as well so feel free to skip it.)
I also focused on creating the art shop (less of a focus for this site).
I had only sketched rough wireframes of this feature initially and built them out more after creating my custom painting feature. I wanted to ensure that the two features of the site are consistent with each other.
I had only sketched rough wireframes of this feature initially and built them out more after creating my custom painting feature. I wanted to ensure that the two features of the site are consistent with each other.
Below are the main concepts focused on, to satisfy the user and business needs for the art shop:
Helping users connect to the painting and artist
• Story behind the painting by the product’s details page
• Meet our artists’ section
• Story behind the painting by the product’s details page
• Meet our artists’ section
Free shipping and returns
• Mentioned on the landing, results, and products page.
• Mentioned on the landing, results, and products page.
Help users envision what the painting will look like at home
• Wall color feature
• Many photos from different angles and in different settings
• Wall color feature
• Many photos from different angles and in different settings
Help users find what they want quickly
• Sorting and filters on the results page
• The most commonly used filters will be out on the results page
• Categories on the landing page
• Search bar with auto correct and auto-fill
• Sorting and filters on the results page
• The most commonly used filters will be out on the results page
• Categories on the landing page
• Search bar with auto correct and auto-fill
Below is a video of our art shop based on the above criteria
This video strongly considers our art buyer persona Heather Watson and how she might go about purchasing a non-custom painting. Turn up your volume 😊
I also added guides and smaller processes that I did not focus on in the wireframes.
For example, below is a video of the estimate process I created.
..........................................................
Now it is time to reflect...
What I learned
1. I learned how to work with business limitations
• This project had a small budget, and as a result, I could not implement the virtual reality feature that would have made it stand out against the competition.
• Next time, I need to encourage the business to do user testing early on (we did not). It pays back in the future.
• This project had a small budget, and as a result, I could not implement the virtual reality feature that would have made it stand out against the competition.
• Next time, I need to encourage the business to do user testing early on (we did not). It pays back in the future.
2. Your first idea is not always the best
My original idea (something I liked in the beginning) evolved into something totally different
3. There is so much to learn from others
Over the course of the creation of Dreamersive, I learned so much from my mentor and others that I had spoken with.
Over the course of the creation of Dreamersive, I learned so much from my mentor and others that I had spoken with.
That is all for now. Thanks for coming along on my journey :)
If you want to collaborate click the button below to contact me
