Introducing the Project3:33 with Hope Armstrong
Compare two mattress websites with different brand personalities and create UX content for a new product page.
- PART 1: Go to the websites for Avocado and Sealy, explore the websites, and fill out a brand personality for each. Note: there is an Adobe XD template in the Project Files.
- PART 2: Open the Adobe XD files for Avocado and Sealy. If you prefer another design tool, feel free to use it. Fill in the product description pages with UX content. Use the text, images, components, and layout as a starting point and take creative liberties wherever you'd like! The goal is to create UX content that aligns with the brand personality to sell a new type of mattress.
- BONUS (optional): For each brand, fill in the contact page with UX content.
Free stock photo sites:
- Personality trait exercise guide Pro tip: Download the Project Files for a handy Adobe XD template.
[MUSIC] 0:00 Hi, I'm Hope Armstrong, and I'm a senior product designer and teacher at Treehouse. 0:09 My pronouns are she/her. 0:15 In this practice session, we'll be creating UX content for 0:18 two mattress companies, Avocado and Sealy. 0:22 Avocado makes eco-conscious mattresses from non-toxic and organic materials. 0:25 Their website goes in-depth to describe the brand's sustainability goals and 0:32 environmental impact. 0:37 The content is transparent, and 0:39 they go to great lengths to describe the carefully chosen materials. 0:41 The blog provides even more environmental insights for their audience. 0:46 Sealy is a conventional mattress company that has been in business since 1881. 0:51 The content emphasizes trust, affordability, and convenience. 0:57 From looking at their product descriptions, 1:02 they're proud of the technical innovations they've made over the years. 1:05 While both of these companies are in the mattress business, 1:10 they have quite different brand personalities. 1:14 For the first part of this practice, articulate 1:17 each company's brand personality using the template found in the project files. 1:20 You will want to browse both companies websites to get a sense of their style. 1:24 Once you have articulated the brand personalities, 1:30 the next phase is to craft the UX content for a product page. 1:34 For Avocado, you'll be creating a product page for 1:38 a new mattress called the Avocado Cloud. 1:42 For Sealy, 1:45 you'll be doing the same thing except the product is called the Sealy Infinity. 1:46 In the project files, there is an Adobe XD file for each brand. 1:52 I've loaded it with a basic page layout and various components. 1:57 I've also included product details. 2:02 Use this as a starting point, and 2:05 rework the copywriting to match the brand personality. 2:07 As for the images, they are from each company's website. 2:11 If you'd prefer to use stock photos, there are resources and the Teacher's Notes. 2:15 Since the companies use fonts that are not available for free, 2:20 I'm simply using Verdana because it's pre-installed on many computers. 2:25 Feel free to change the font if you'd like. 2:30 This template will help you quickly work within the brand style 2:33 while focusing on the UX content. 2:37 Create descriptive, helpful, inspirational, and 2:40 transparent content that aligns with the brand's personality. 2:43 It can be purely text or it can include images, interactive elements, 2:48 and any other ideas you have to show off the new mattress. 2:53 As a bonus, if you'd like to complete another page, try creating a contact page. 2:57 I included a contact page with example text, so 3:03 you can use it as a starting point. 3:06 If you can't complete both pages, no worries, just do the product page. 3:08 As a reminder, these mockups are for practice purposes only. 3:14 The images and branding are property of the companies mentioned. 3:19 So don't include these mockups in your portfolio. 3:23 All right, that covers the project, have fun with it, and 3:26 I'll catch up with you when you have finished. 3:30
You need to sign up for Treehouse in order to download course files.Sign up