Working professionals are spending majority of time growing in their career and are seeking a place to relax, escape, feel inspired, and to reset after working many hours during the week.Emerson House is a place for these working professionals to connect with nature, community, and immerse through thoughtfully curated and inspired events. It is a 7 bedroom retreat situated on 30 acres of rolling prairie land in Northwest Indiana, just an hour away from Chicago.
My team of UI designers worked with the founders of Emerson House to design a marketing website. Our client wanted a welcoming, mysterious, and luxurious community that reflected the possibilities that Emerson House could give. The design of the website had to appeal to users who has the income to rent out Emerson house for a retreat. Our client provided us some background information and the website wireframes. The wireframes weren’t the final product so my team made some UX decisions. In three weeks, we designed an interface that engages the users to dive deeper into exploring Emerson House community while establishing our client's goals.
Photos of the actual house for use in the mockups were not given. It was difficult to find photos of people in the forest doing the specific activities that Emerson house would provide.
The clients didn’t provide a logo; since logos are the center of brand systems, this impacted our work.
The UX wireframe was very rough and my team needed to figure out the UX before diving deeper into our visual designs.
My team thoroughly read all the documents our client gave us to really understand the brand and product. We then came up with a list of adjectives: exclusive, personal, elite, rustic, luxurious, elegant, inspiring, influential. During our first meeting, we were able to align our knowledge to their brand goals and dive deeper into what they wanted Emerson House to showcase. After the meeting, we had enough knowledge to start analyzing the site to implement better design decisions.
Before my team began to explore our own design directions, we did a visual analysis of Emerson House competitors. There were a few companies that shared the same vision but no direct competitors that accomplish what Emerson House is going to offer. For that reason, we researched a lot of out of category competitors who share the same idea, goal, vision and took a closer look at how they make their personal branding distinct. We also looked at their similar target audiences to see how those products succeed in establishing brand goals.
Imagery was strong and displayed the perfect amount of mysteriousness. It didn’t implicitly show what this camp is about so it kept users engaged to dive deeper to find more information. They executed a rustic feel successfully through the use of colors and a slab serif font.
The layout of Soho House includes heavy imagery, a minimal amount of white space, and less content heavy. However, Emerson house needed a lot of photos so having pictures stacked on top of each other will overwhelm the users.
The layout of Banyan Tree is also very photo heavy with no whitespace. The layout is not very familiar to the users and will overwhelm the users because they don’t know what to draw their attention to first. Banyan Tree also uses a lot of overlays and text on top, which can be problematic for Emerson House.
Had attractive photography but the black background makes the brand look dated. The simple column layout made it feel corporate. Also, the typography added character but it seems out of place in contrast with the brand.
The design reflects a one of a kind mysterious dining experience. Achieves in keeping the users engage until they scroll to the bottom of the page through animations before revealing the description. Also, the content is placed on a card and pops up as they keep scrolling so that it doesn’t overwhelm the user with a lot of content at once.
Achieves their brand goal very well by targeting a certain niche of an audience who can afford these classes. They also form a community of like-minded people by using pictures of people with different gender and races.
Emerson House provides a welcoming, curated journey, and the design reflects that by intriguing our users to dive deeper into the story.
This is not a transactional relationship. Photography used should tell a story without being too explicit. Stock photography will not be used. Full width imagery and typography will showcase the characteristics of Emerson House.
Emerson House recognizes that everyone has different paths. Emerson House wants to guide our users in the right direction by helping them digest content heavy information into simpler terms so that they won’t feel overwhelmed.
Use of cards will allow content to be both easily digestible and flexible in layout. Efficient use of negative space, legibility of typography, and familiar web patterns will result in a straightforward journey.
Emerson House aims to bring together a protected community of like-minded dreamers. However, Emerson House does recognize that their users are individuals who come from different paths.
Members will share the same vision by having expected standards in the community even though they have diverse characteristics. In the same tone, design elements such as buttons, dropdowns, form fields, and navigation should follow a consistent style and language even though events, food options, rooms, or activities may have different design executions to showcase their unique qualities.
Emerson House offers a chance for working individuals to step away from the hustle and bustle and embark on a journey of discovery through nature without sacrificing comfort.
The design should be a soothing balance of rustic yet comfortable, and organic yet elegant. This can be achieved through texture and intuitive use of color.
Minimal use of color: I focused on having more white space which made it easier for users to be engaged. It lead the users’ eye to know where they should look to see the most important sections of the screen. The muted colors also made it feel calming and luxurious. However, I added a brighter color to the palette to make certain elements pop out. For the hero image text, I used a script font which made it feel more romantic over the mysterious path hero image.
Indie pattern approach: I steered a different direction to give this style tile more dimension and fun. I used triangle patterns which gave a young and hip feel for users to want to book. Also, it reminded users of special events like Coachella and Burning Man. The color palette I used had some brighter colors that made it attention grabbing and lively while keeping some colors of nature.
Our client thought that style 1 was more suited for their brand; however, not all elements were suitable. They gave strong positive feedback towards the outline box style, buttons, and hero image.
We wanted to show how elements from our style tiles translated to the mock up screens. Before we moved on to mock screens, I refined my style that incorporated all the elements that received positive feedback to align with our clients’ target.
As a team, we wanted to improve the experience. We reviewed the flow of the wireframe and layout before exploring our own design directions. We knew where our clients wanted to define their brand goals and the flow of the website. After reviewing the wireframes, we found that some things needed improvement:
After picking out the problem and finding a solution for the initial wireframes, I redesigned the site map to create a better flow.
My team organized two rounds of user testing to make sure our individual designs aligned with our design principles and spoke to the Emerson House brand. Also, we wanted to make sure that our designs were applicable to our primary target audiences (both B2B and B2C). The first round of testing focused on individual screens. The second round allowed users to go through one flow as a prototype. We tested B2B and B2C users with various career backgrounds such as Architect, Creative Director, Realtor, Fitness Instructor who may be interested in attending the Emerson House.
Some feedback I received on my mockup screen:
1. Users liked the hero image on the welcome screen because it gave them a sense of going on a journey into nature. However, some users thought it was more ideal to use a photo of the Emerson House in the distance.
2. Users felt it lacked character—it wasn't vibrant, exciting, or home-like. They said it was out of place for business retreats.
3. Users liked the white space because it felt minimalistic and not too overwhelming. However, they also felt that it was too empty and would like some more information up front.
Based on testing feedback, I made changes to my screens accordingly which is displayed in the final design:
1. I changed the type of photos of the house to make it feel more home-like, modern and welcoming.
2. I added more colors to my design to make it more exciting and vibrant.
3. I added a line of text describing what each title needed to convey.
These are the final screens I designed for Emerson House after many rounds of user testing and iteration:
With these final screen mockups, I created an InVision prototype to allow users to walk-through the flow of Emerson House website. This prototype will demonstrate a better overview of how the screens will look live.
To show how my designs would translate into a mobile version, I designed a few key screens:
Our client appreciated my style exploration and applauded my final modern minimalistic theme. They thought that I successfully iterated through user testing and inspirations from other sites. I created a style guide for Emerson House better summarized my final design decisions and how future designers and developers should follow this guide.
I am pleased with the work that I have created for Emerson House. If I weren’t given a time constraint, I would have loved to explore more design solutions and test it:
1. Explore a different hero image for the home page that will look more like Emerson House. Some users felt that the open path journey into the nature is not intuitive enough. They wanted to see a house in the background. Other users felt that it was intuitive enough and they got a sense that they were exploring through nature right away.
2. Design and test different layouts for the events page. Some users liked the one event with the description and CTA button below it. However, if there were many events, users wanted to see all the events laid out different so that they can compare the events.
3. Use actual pictures from the Emerson House to really grasp what the users feel about it.
4. Create a wireframe for the membership sign up flow and then create high fidelity mockups.
5. Design microinteractions that would make the interface feel more rewarding.
Working with clients who have a strong vision of their product inspired me to work harder. Even though clients have a strong vision in the direction of their product, I learned that some of their insights on design elements weren’t always the most functional approach. As a designer, my goal was to create a better user experience and solve those challenges. I learned to find the right balance to empathize both the user and client’s need.
The most useful way was to test different layouts and the hierarchy of information. I was able to conduct tests effectively and efficiently by asking open-ended questions to catch the details that I may have missed in my design. With the research in hand, I was able to backup my design decisions and create functional designs. Emerson House taught me to create a design that is very unique and tell a story of its’ own. Branding was an important aspect to successfully create a bond between the users’ and Emerson House without feeling too transactional. I felt that working in this industry allows creativeness to rise in different ways to achieve a prosperous brand from the competitors.