-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
119 lines (102 loc) · 8.82 KB
/
portfolio.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE HTML>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-136582576-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-136582576-1');
</script>
<meta charset="UTF-8">
<title>Taylor MacMillan</title>
<link href="css/main.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href='favicon.ico'/>
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans" rel="stylesheet">
</head>
<nav>
<ul class="nav-bar">
<li><a href="index.html">ABOUT</a></li>
<li><a href="portfolio.html" class="selected">PROJECTS</a></li>
<li id="logo"><a href="index.html" id="initials"><img src="img/initials_icon.png"></a></li>
<li><a href="experience.html">EXPERIENCE</a></li>
<li><a href="Resume.pdf" target="blank">RESUME</a></li>
</ul>
</nav>
<body>
<div class="portfolio-intro">
<h2 class="portfolio-header">PadLift</h2>
<h3> UI/UX Passion Project | Winter 2019 </h3>
</div>
<div class="portfolio-content">
<h3 class="subheader">Problem Space</h3>
<p>Completing a home renovation on your own can be extremely daunting, between deciding on colours, fabric, furniture, layouts, and so much more. Without guidance from a professional, people often hesitate on making drastic changes out of fear of the results. The aim of this passion project is to design an application that eases the stress and apprehension involved in undertaking a home renovation, by providing a means to visualize the design possibilities prior to making any physical changes to the space.</p>
<p>For this first iteration of the product, both the UI and UX were addressed. An emphasis was placed on creating an intuitive and user-friendly experience; yet, a balance was found to ensure the resulting user interface was also appealing.</p>
</div>
<div class="portfolio-content">
<h3 class="subheader">Competitive Analysis</h3>
<p>I started the project by researching and analyzing existing solutions that address a similar problem space. This allowed me to discover the types of features that have been accepted by the target audience, as well as identify where gaps between user needs and product offerings still exist.</p>
<p>Two applications were evaluated: Homestyler and Planner 5D.</p>
</div>
<div class="portfolio-image">
<img src="img/competitive_analysis.png"/>
<p>Competitive Analysis</p>
</div>
<div class="portfolio-content">
<h3 class="subheader">User Research</h3>
<p>The next stage of the project involved bringing the end users into the process. Although I knew the typical use cases in which the product would be most beneficial, working directly with the target users was necessary to identify their specific needs and wants.</p>
<p>I conducted user interviews to reveal the frequent actions, pain points, and frustrations that were currently experienced. This allowed me to pinpoint the tasks that it would be necessary for the product to address. My findings from this step indicated the following:</p>
<ul>
<li>Frequently, people will see a colour or a piece of furniture they really like, but are not confident that it will fit in with the space they’re renovating.</li>
<li>People taking on a home renovation on their own often struggle with recognizing what designs are “in” right now (ex. for resale value), yet do not have the time and/or resources to involve a professional interior designer in their project.</li>
<li>As a renovation grows, involving multiple details such as new paint colours, furniture and organization of the space, people have trouble envisioning how well their prospective purchases will work together in the room. This can lead to a less satisfactory end result than envisioned.</li>
</ul>
<p>Following this step, it can be useful to create user personas to ensure the needs of all user groups are met. However, I took a slightly different approach. While several different user groups would be targeted by this application – the “DIYers”, “Fixer Uppers”, and “Design Visionaries” – they all shared the same underlying need. Therefore, I decided to take a task-based approach to the design and instead focussed on the main task the product must perform:</p>
<p class="section-summary">To provide a no-committment start to a renovation, by visualizing all proposed changes prior to buying materials or physically altering the space.</p>
<p>To meet this objective, my goal was to create a product that would:</p>
<ul>
<li>Allow users to upload a picture of their room and customize the existing features, such as altering the paint and trim colours.</li>
<li>Provide users with available furniture options – couches, armchairs, beds, tables, lamps, etc. – that could be placed and scaled within the room.</li>
<li>Share other designs that have been created for similar rooms, as inspiration for the renovation.</li>
</ul>
</div>
<div class="portfolio-content">
<h3 class="subheader">Hierarchical Task Analysis</h3>
<p>To better understand how the product could fulfill the users' goals, I completed a hierarchical task analysis. This allowed me to separate the higher-level user goals into simple steps, which could then be mapped out into features within the product.</p>
</div>
<div class="portfolio-image">
<img src="img/hta.png"/>
<p>Hierarchical Task Analysis</p>
</div>
<div class="portfolio-content">
<h3 class="subheader">Wireframes</h3>
<p>I could now begin designing the interactions and interface for the product. Taking the key tasks defined in the hierachical task analysis, I created wireframes as the foundation from which I would later build the final product. Completing this step prior to starting the visual design was extremely important, as it clarified the key features to include, prioritized the content on each page, and defined the product structure and interactions.</p>
</div>
<div class="portfolio-image">
<img src="img/wireframes.png"/>
<p>Wireframes</p>
</div>
<div class="portfolio-content">
<h3 class="subheader">Final Designs</h3>
<p>Finally, I embellished the guides provided in the wireframe by adding colour, typography, and visualizations. To enhance the user experience and create a valuable product for end users, my focus was on creating an efficient and minimalist design. This meant hiding information or actions that were not frequently used, allowing those elements of highest importance to be immediately visible on screen. As well, I aimed to maintain a consistent style across the product, reducing the risk of confusion and extra complexity that users might experience.</p>
</div>
<div class="portfolio-image">
<img src="img/final_designs.png"/>
<p>Final Designs</p>
</div>
<div class="portfolio-content">
<h3 class="subheader">Next Steps</h3>
<p>Following this initial design, it would be very valuable to perform user testing with an interactive prototype. This would provide much needed insight by revealing any pain points, ambiguities in the workflow, and favourite features. I then plan to move forward by experimenting more with the visual design (interesting typography, colours, etc.), keeping in mind the feedback received from the user testing. Finally, there are also many neat enhancements for the product that I look forward to exploring. For example, would it be useful to allow users to make purchases directly within the application, after they have finalized their furniture and colour choices?</p>
</div>
<div class="portfolio-content">
<h3 class="subheader">Learnings</h3>
<p id="final_para">Completing this passion project really pushed me to discover more about the full product design process, as I took responsibility for the research, user experience, and visual design aspects. A key takeaway I've uncovered is how integrated these processes are, in that a balance must be met to ensure one is not sacrificed in favour of another. For example, ease of use and an intuitive workflow should not be replaced by flashy visuals; instead, a middle ground must be found. As well, while already aware of the value of iterating in design, this became extremely evident in this project. The first, the second, and even the third proposals you have often won't meet every need that has been defined for the project. To truly understand the project scope and create a valuable product, iteration is key!</p>
</div>
<div id="contact">
<a target="blank" href="mailto:[email protected]"/><img class="link" src="img/email_icon.png"/></a>
<span class="disclaimer">Designed and built by Taylor MacMillan</span>
<a target="blank" href="https://www.linkedin.com/in/taylor-macmillan"/><img class="link" src="img/linkedin_icon.png"/></a>
</div>
</body>
</html>