Cabin Residency
Introduction
Cabin Residency is a concept project inspired by a book called, Cabin Porn; which is an online community that started off on Tumblr by sharing photos of unique and stunning cabins built by people around the world. The movement is essentially about taking a break from the everyday fast-paced lifestyle to go back to the basics and to what matters most for the person or community.
Objective
The goal for the project was to design a booking website for a niche community of cabin-enthusiasts and outdoor explorers. For people who want to experience living in a cabin in the middle of nowhere, off-the-grid or on-the-grid; But mainly to bring the cabin-building community together to share their homes and to teach others the skills of building their own cabins.
Tools Used:
Sketch, Illustrator CC, Framer X
Methods:
Research, User Research, Moodboard, Personas, Userflows, Sketches, Prototype
Cabin Residency App
Preliminary Research
Most of my research was based on certain sections of the book, their Tumblr page, and article interviews with the founder. This helped to get the gist of their ethos and direction for the prototype.
Audience
The personas were based around the observations I got from my research and also from Instagram profiles; by querying tags such as #cabinlife or #cabin and looking for commonality in the likely users for Cabin Residency.
Sources:
Personas research
User-Flows
After collecting and strategizing the content, I began sketching out the ideas for the branding and the layout for the UI. I created a rapid branding identity that best suited Cabin Residency.
Defined Task list and Prototype Flow
Wireframes
After collecting and strategizing the content, I began sketching out the ideas for the branding and the layout for the UI. I created a rapid branding identity that best suited Cabin Residency.
Lo-fi Wireframes for desktop and mobile
Branding & UI
The branding for Cabin Residency was aimed to keep it close to feeling naturalistic and with a sense of taking action to experience it.
The UI went through a few iterations, until I realized the best way to prototype the idea was through a prototype of a mobile app. Since the aim for the audience are for those who frequently want to be outdoors and it's simply part of their lifestyle.
Typography, Icons and Components Styleguide
Experiment
To conclude for now, the idea of Cabin Residency is building a community for the real outdoors and to learn from each other in being more self-sufficient.
Next steps: Will be to test the prototype with some possible users and iterate the design from the feedback.
Cabin Residency Prototype Preview
Introduction
RA - Resident Advisor - is an online music magazine dedicated to electronic music across the globe, providing a wealth of information about the industry: the latest news, event services, podcasts, and video content.
Although RA produces a ton of content, the deliverance in the UI creates a cognitive load, making it hard to know where to focus and making it hard to discover new content.
Objective
The focus for RA is to re-design the content experience, with a cleaner layout and a consistent branding throughout the site.
Tools Used:
Post-its, Miro, Sketch, Illustrator CC, Invision
Methods:
Research, site analytics, UX Walkthrough, Content Analysis, Personas, Sketches, Wireframes, Prototype
Research
I did some research into the founder of RA and also the changes in the industry due to streaming services. From there I gathered some key points and understanding of what could possibly work.
The analytics for the site revealed where the users are mostly from, as well as the bounce rate and the main interest of people who go to the site.
Music and News were the top reasons for people to check out the site. This helped to place an important focal point on the solution where it is focused on the deliverance of articles and music events.
Other interesting ideas to explore would be connecting streaming music services through the site.
Through the information found on the analytics, sites that shared the same industry goals were also listed. I examined their sites and see what patterns other competitive sites use.
UX Audit
Before redesigning the new layout, it was important for me to understand the current flow of the site by auditing the experience and taking inventory of potential issues and pain points.
I performed a UX audit with myself and 2 other users to get a better picture on the usability. Some found the layout straightforward but didn't know where to place their focus since most of the content seemed to be on the same level of importance. I personally found the long trail of old archives to be a dreadful scroll to bottom of the page. And some pages, like the News page, didn't have a well structured layout, it seemed more like a mesh of things without a clear purpose or hierarchy.
Above the fold RA redesign of the homepage
Persona, Analytics and High-level personas
Current design for the News Page
Current design for the Article Page
Information Architecture
After analyzing the site analytics, I re-organized the navigation and the content for each page, by delivering a new way for users to receive rich content through a clear distribution of channels: Read, Attend, Watch, and Listen.
Wireframes
Through sketching and lo-fi wireframes, I created different variations for the content.
Current and New Navigation - Sitemap
Lo-Fi Wireframes for RA
Rapid Branding
The branding for the site was focused around having a clean legibility and a clearer hierarchy when organizing the content. But also to keep the different channels feeling alive and current.
Styleguide
Navigation Styleguide
Conclusion
The branding for the site was focused around having a clean legibility and a clearer hierarchy when organizing the content. But also to keep the different channels feeling alive and current.
New Home page layout
New layout for the News page
RA Prototype Preview
Brief
Agent Z is a virtual marketing agency for real estate agents. Delivering high-quality branding, marketing strategy, and content creation for agents on the go.
After having worked for almost 3 years with sales reps and real estate agents, I realized a lot of the shortcomings with the company’s workflow, so I’ve thought of putting together an idea that would make the process run more efficiently.
Tools Used:
Figma, Illustrator CC, Framer Web
Methods:
User Research, Personas, Userflows, Sketches, Prototype
Research
The workflow would usually consist of request done through emails or in-person.
To illustrate, a sales representative emails a request for a "Just Listed" postcard and flyer design on behalf of an agent. They usually provide the following: the MLS link to the listing property, agent's information: name, contact, email, DRE#, logo, headshot, company information, property photos, sales content, and a few other details. The problem occurs when the sales rep would forget what to include, or down up miscommunication would occur, leading to tension and frustration on multiple ends.
The research was based on first-hand direct experience, and online content from Real Estate agents, which led to me create an overview of the personas.
Targeted audiences
Agent Z is for working professionals in the real estate industry: agents, brokers, companies, agencies and teams. Professionals who want to level up their game with a strong branding force and strategy.
For the personas, I created a profile based on those I've worked with and interacted in the field. Details are taken by in-person inquiry and observations.
Ad for Agent-Z app
Persona Overview
Hypothesis
To get a clear picture, I listed the context and conditions, (the when and where), on the use case for the app and think about the environment in which the agents are experiencing the problem.
Context and Conditions:
- Agents are on the go; they need the product to be mobile with a desktop version if they prefer to work in their home/office.
- They have too much going and don't have time to think about marketing
- Make agents feel like they have their marketing under control
Scenerio:
Kelly is going through deals and meeting clients and needs help with defining her brand for her newly thought project, a real estate business podcast. She jumps on her phone and launches the Agent-Z app. Kelly then sends a request for the service.
A flowchart of the starting point in the prototype
A short note on the screen inventory list
Wireframes
After defining tasks and understanding the product, the interface would work best is in the form of a dashboard for project management and overview. The product will be in a mobile app platform since real estate agents are often on the go and spend less time in front of a desktop computer.
I brainstormed possible layouts for the mobile app. The challenges I had was defining a good workflow of the screens and how they would work together. But through different variations, the solution came through.
Wireframing ideas for the app
Synthesis
To bring everything together, I created a "prototype flow", which showcases the possible screens for the prototype. A visual aid to help when creating the interaction.
The prototype focused on a particular use case, on the persona "Kelly", which shows when a frequent user checks their project status and sends out a new request.
Prototype Flow - A visual aid to help when creating the interactions.
Branding
The branding was created to convey reliability and to promote confidence.
The primary color was chosen to signify trust and loyalty to the client. The typeface, DM Sans and DM Serif Display represent elegance and maturity. All icons were recreated for this prototype.
Branding Styleguide
Experiment
The next steps:
As a final step, before shipping the product, I would test the prototype with Real Estate industry professionals, along with defined KPIs to measure the success of this solution.
Agent-Z Prototype Preview
Brief
2Modern is a home-decor company that sells high-end luxury furniture and accessory items. They specialize in authentic modern design and delivers a curated collection of top brands and emerging designers.
Although, 2Modern sells products from quality designers at a high valued price, they fail to communicate their branding and a sense of a high-end marketplace to a targeted audience, as well as a coherent organization of their product/catalog and a common pattern for items checkout.
Tools Used:
Miro Board, Figma
Methods:
User Interview and Research, Persona, Affinity Diagrams, Sitemap, Wireframes, UI Mock-ups, Prototype
Research
UX Walkthrough
· 2Modern delivers high-quality furniture and accessory items
· Fails to provide a sense of a high-end marketplace to a targeted audience
· Generally the e-commerce business site lacks presentation, organization and usability
Current Navigation System
· Lack of organization of the site’s navigation system
· Item links are repeated under other categories
· Confusing entry points
User Interview Overview Summary
Snapshot summary of some of the results from the user interview questionnaire.
The resulting feedback was the lack of branding, to keep it minimal, better organization, and a cohesive visual layout.
2Modern re-design product page
UX Walkthrough of current site
A snapshot of the navigation system
User interview summary report
Hypothesis
Affinity Diagram
The psychographics of buying luxury items included: The motivations, behaviors, needs, frustrations, and the psychology behind the actions.
Psychologically: providing a sense of belonging, a sense of accomplishment and increasing self esteem
Needs: The value and the quality of the furniture that would last for decades
Affinity Diagram
Persona
Thomas is in his mid- 40s; he’s a psychiatrist, divorced, and looking to start anew.
One of his motivations is buying curated furniture because he values the quality and intention behind the design. He works a tight schedule which is a reason why his environment must provide comfort.
His psychological reasons are to increase self-esteem and a sense of belonging.His frustrations are cluttered layouts and too many options
2Modern persona: Thomas
Synthesis
The current sitemap shows most items repeated on different navigation links. There’s no clear structure as it overlaps in many instances, making the navigation system way too complicated.
For Thomas, this would cause frustration and annoyance at the lack of thinking behind the organizational system. In some ways, this could reflect poor business management
Birds eye view of the sitemap for the current site
New/Proposed Information Architecture
To improve the sitemap, it was important to clear out the noise, start from scratch and focus on the basics.
For Thomas, this would give him a direct way to navigate quickly through the site, since he’s usually busy with work.
Clean and direct new sitemap
Lo-Fidelity Wireframes
Thomas hates cluttered layouts, so it was a primary focus to clear out the space and only focus on fewer products that may trigger his interest. And also provide a friendly core loop as he purchases an item.
Lo-Fi wireframe of the core loop for the user Thomas
Experiment
Here's a short video of the prototype for 2Modern.
2Modern re-design prototype
High Fidelity Mockups
The main focus was to solve in presenting Thomas an approachable navigation system, a cohesive design, and a visual hierarchy that helps to quickly scan major points on the page.
UI re-design for the the e-commerce site
Brief
2Modern is a home-decor company that sells high-end luxury furniture and accessory items. They specialize in authentic modern design and delivers a curated collection of top brands and emerging designers.
Although, 2Modern sells products from quality designers at a high valued price, they fail to communicate their branding and a sense of a high-end marketplace to a targeted audience, as well as a coherent organization of their product/catalog and a common pattern for items checkout.
Tools Used:
Miro Board, Figma
Methods:
User Interview and Research, Persona, Affinity Diagrams, Sitemap, Wireframes, UI Mock-ups, Prototype
Research
UX Walkthrough
· 2Modern delivers high-quality furniture and accessory items
· Fails to provide a sense of a high-end marketplace to a targeted audience
· Generally the e-commerce business site lacks presentation, organization and usability
Current Navigation System
· Lack of organization of the site’s navigation system
· Item links are repeated under other categories
· Confusing entry points
User Interview Overview Summary
Snapshot summary of some of the results from the user interview questionnaire.
The resulting feedback was the lack of branding, to keep it minimal, better organization, and a cohesive visual layout.
2Modern re-design product page
UX Walkthrough of current site
A snapshot of the navigation system
User interview summary report
Hypothesis
Affinity Diagram
The psychographics of buying luxury items included: The motivations, behaviors, needs, frustrations, and the psychology behind the actions.
Psychologically: providing a sense of belonging, a sense of accomplishment and increasing self esteem
Needs: The value and the quality of the furniture that would last for decades
Affinity Diagram
Persona
Thomas is in his mid- 40s; he’s a psychiatrist, divorced, and looking to start anew.
One of his motivations is buying curated furniture because he values the quality and intention behind the design. He works a tight schedule which is a reason why his environment must provide comfort.
His psychological reasons are to increase self-esteem and a sense of belonging.His frustrations are cluttered layouts and too many options
2Modern persona: Thomas
Synthesis
The current sitemap shows most items repeated on different navigation links. There’s no clear structure as it overlaps in many instances, making the navigation system way too complicated.
For Thomas, this would cause frustration and annoyance at the lack of thinking behind the organizational system. In some ways, this could reflect poor business management
Birds eye view of the sitemap for the current site
New/Proposed Information Architecture
To improve the sitemap, it was important to clear out the noise, start from scratch and focus on the basics.
For Thomas, this would give him a direct way to navigate quickly through the site, since he’s usually busy with work.
Clean and direct new sitemap
Lo-Fidelity Wireframes
Thomas hates cluttered layouts, so it was a primary focus to clear out the space and only focus on fewer products that may trigger his interest. And also provide a friendly core loop as he purchases an item.
Lo-Fi wireframe of the core loop for the user Thomas
Experiment
Here's a short video of the prototype for 2Modern.
2Modern re-design prototype
High Fidelity Mockups
The main focus was to solve in presenting Thomas an approachable navigation system, a cohesive design, and a visual hierarchy that helps to quickly scan major points on the page.
UI re-design for the the e-commerce site
