nguyen-jenn.github.io/inspop.html at main · nguyen-jenn/nguyen-jenn.github.io · GitHub

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html><!--  This site was created in Webflow. https://www.webflow.com  -->
<!--  Last Published: Sat Nov 26 2022 08:16:52 GMT+0000 (Coordinated Universal Time)  -->
<html data-wf-page="63378e2f426dd43e831bdf69" data-wf-site="63375e06b7a5ae566ddc5555">
<head>
  <meta charset="utf-8">
  <title>inspop</title>
  <meta content="inspop" property="og:title">
  <meta content="inspop" property="twitter:title">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/ux-ui-portfolio-999cb1.webflow.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
  <script type="text/javascript">WebFont.load({  google: {    families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Philosopher:regular,italic,700,700italic","Karla:200,300,regular,500,600,700,800,200italic,300italic,italic,500italic,600italic,700italic,800italic","ZCOOL XiaoWei:regular","Londrina Shadow:regular"]  }});</script>
  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
  <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
  <div class="wf-section">
    <div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar w-nav">
      <div class="w-container">
        <a href="index.html" class="link-block w-inline-block"><img src="images/website_logo.png" loading="lazy" width="50" alt="" class="image-brand"></a>
        <nav role="navigation" class="w-nav-menu">
          <a href="index.html" class="nav-link w-nav-link">My Works</a>
          <a href="documents/Resume.pdf" target="_blank" class="nav-link w-nav-link">Resume</a>
        </nav>
        <div class="w-nav-button">
          <div class="w-icon-nav-menu"></div>
        </div>
      </div>
    </div>
    <div class="w-container"><img src="images/inspop_websitebanner.png" loading="lazy" srcset="images/inspop_websitebanner-p-500.png 500w, images/inspop_websitebanner-p-800.png 800w, images/inspop_websitebanner.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="page-banner"></div>
  </div>
  <div class="wf-section"></div>
  <div class="container-3 w-container">
    <h1 class="heading-2">inspop</h1>
    <p class="text-paragraph">Providing a convenient platform for users to find inspiration</p>
  </div>
  <div class="container-2 w-container">
    <div class="w-row">
      <div class="w-col w-col-3">
        <h3 class="text-heading">Timeline</h3>
        <p class="text-paragraph">September - October 2022 (6 weeks)</p>
      </div>
      <div class="w-col w-col-3">
        <h3 class="text-heading">Role</h3>
        <p class="text-paragraph">UX/UI Designer</p>
      </div>
      <div class="w-col w-col-3">
        <h3 class="text-heading">Team</h3>
        <p class="text-paragraph">Myself</p>
      </div>
      <div class="w-col w-col-3">
        <h3 class="text-heading">Tools</h3>
        <p class="text-paragraph">Figma</p>
      </div>
    </div>
  </div>
  <div class="w-container">
    <h3 class="text-heading">Overview</h3>
    <p class="text-paragraph">Finding inspiration to start an art or craft project can be a tedious task, and even maybe daunting when you find inspiration but have no idea where to start. Inspop is a social media platform for artists to easily find inspiration as well as corresponding tutorials. <br><br>This was a personal project and I was the sole designer working on this project during Fall 2022.</p>
  </div>
  <div class="w-container">
    <h3 class="text-heading">Problem</h3>
    <p class="text-paragraph">As a content-producing artist, I often feel art block, or lack of inspiration to create. This is usually coupled with the pressure to produce content for my art account. I was wondering then, did my fellow artists also feel the same way and what did they do to overcome this feeling?</p>
  </div>
  <div class="w-container">
    <h3 class="text-heading">Goals</h3>
    <p class="text-paragraph">1. Provide a way to easily integrate tutorials within an art sharing platform<br>2. Curate a personalized experience based on the user’s art/craft interests</p>
  </div>
  <div class="w-container">
    <h3 class="text-heading">Research</h3>
    <p class="text-paragraph">First, I surveyed 28 people who has experienced art block before.</p><img src="images/inspop_surveylegend.png" loading="lazy" alt="" class="image-2x2">
    <div class="w-row">
      <div class="column w-col w-col-6"><img src="images/inspop_chart1.png" loading="lazy" alt="" class="image-2x2">
        <p class="text-paragraph"><br>How often do you experience art block?</p>
      </div>
      <div class="column-2 w-col w-col-6"><img src="images/inspop_chart2.png" loading="lazy" alt="" class="image-2x2">
        <p class="text-paragraph"><br>Have you ever started a project but was unable to complete it due to art block?</p>
      </div>
    </div>
    <p class="text-paragraph"><br>I then interviewed 4 people who filled out the survey to find out more about why they think they get art block and what apps they use to overcome art block.<br><br><strong>Interview Questions:</strong><br>1. Can you describe a time you experienced an art block?<br>2. What do you think is the biggest reason you get an art block?<br>3. Explain what steps you take once you realize you’re having an art block?<br>4. What is your experience with resources such as web apps/phone apps/websites with finding inspiration?<br>5. With *insert name of app/website mentioned*, what is your impression of it?<br>6. Which features of *insert name of app/website mentioned*, do you enjoy the most?<br>7. Similarly, which features do you think can be improved on?<br>8. How do you feel after using *insert name of app/website mentioned*?</p>
  </div>
  <div class="w-container">
    <h3 class="text-heading">Insights</h3>
    <p class="text-paragraph">After I conducted interviews, I grouped together two different personas that I found: the content-producing artist and the hobby enthusiast artist.</p>
  </div>
  <div class="container-4 w-container">
    <div class="w-row">
      <div class="w-col w-col-6"><img src="images/inspop_empathy1.png" loading="lazy" width="500" srcset="images/inspop_empathy1-p-500.png 500w, images/inspop_empathy1.png 500w" sizes="(max-width: 520px) 96vw, (max-width: 767px) 500px, (max-width: 991px) 354px, 460px" alt="" class="image-2x2"></div>
      <div class="w-col w-col-6"><img src="images/inspop_empathy2.png" loading="lazy" width="500" srcset="images/inspop_empathy2-p-500.png 500w, images/inspop_empathy2.png 500w" sizes="(max-width: 520px) 96vw, (max-width: 767px) 500px, (max-width: 991px) 354px, 460px" alt="" class="image-2x2"></div>
    </div>
  </div>
  <div class="w-container">
    <p class="text-paragraph">A major trend that I found while organizing research was that people used more than one app to find inspiration. It got me thinking -- Why did they need to use more than one app? Why did one app not suffice?<br><br>I then compiled a chart of the main apps that the interviewees used and included the reasons why they liked and disliked the product. This helped me compare and contrast the apps and come up with a possible hypothesis why they needed to use more than one app when finding inspiration.</p>
  </div>
  <div class="w-container"><img src="images/inspop_diffapps.png" loading="lazy" srcset="images/inspop_diffapps-p-500.png 500w, images/inspop_diffapps-p-800.png 800w, images/inspop_diffapps.png 1000w" sizes="100vw" alt="" class="image-banner"></div>
  <div class="w-container">
    <p class="text-paragraph">Based on my research, I identified two pain points. The first pain point was that users would have difficulty finding inspiration because they would not know what to look up. The second pain point was that even when users found inspiration, they would not know where to start or even had difficulty finding a corresponding tutorial.</p>
  </div>
  <div class="w-container">
    <h3 class="text-heading">Ideation</h3>
    <p class="text-paragraph">Time to start sketching, and thinking of flows!</p>
  </div>
  <div class="w-container">
    <h4 class="text-heading2">Sketching</h4>
    <div class="w-row">
      <div class="w-col w-col-6"><img src="images/inspop_sketch1.png" loading="lazy" srcset="images/inspop_sketch1-p-500.png 500w, images/inspop_sketch1.png 500w" sizes="(max-width: 520px) 96vw, (max-width: 767px) 500px, (max-width: 991px) 354px, 460px" alt="" class="image-2x2"></div>
      <div class="w-col w-col-6"><img src="images/inspop_sketch2.png" loading="lazy" srcset="images/inspop_sketch2-p-500.png 500w, images/inspop_sketch2.png 500w" sizes="(max-width: 520px) 96vw, (max-width: 767px) 500px, (max-width: 991px) 354px, 460px" alt="" class="image-2x2"></div>
    </div>
  </div>
  <div class="w-container">
    <h4 class="text-heading2">User Flow Map</h4><img src="images/inspop_userflow.png" loading="lazy" srcset="images/inspop_userflow-p-500.png 500w, images/inspop_userflow-p-800.png 800w, images/inspop_userflow.png 983w" sizes="100vw" alt="" class="image-banner">
  </div>
  <div class="w-container">
    <h3 class="text-heading">Wireframes</h3>
    <p class="text-paragraph">After making initial sketches and a user flow map, I started working on the wireframes.</p>
  </div>
  <div class="w-container"><img src="images/inspop_wireframes.png" loading="lazy" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" srcset="images/inspop_wireframes-p-500.png 500w, images/inspop_wireframes-p-800.png 800w, images/inspop_wireframes.png 1000w" width="1000" alt="" class="image-banner"></div>
  <div class="w-container">
    <h3 class="text-heading"><strong>Usability Testing &amp; Major Improvements</strong></h3>
    <p class="text-paragraph">After finishing the low-fidelity prototype, I had 5 users test out the flows of the app and also asked for feedback about the iconography in the app.</p>
  </div>
  <div class="container-6 w-container">
    <h4 class="text-heading2">Posts/Tutorials All in One Explore Feed</h4>
    <p class="text-paragraph">-<strong> </strong>based on user feedback, it made more sense to be able to search up for posts and tutorials on the same explore feed, rather than two separate locations<br><br>- if users find a tutorial they want to make, they can go directly to it rather than finding a photo first and getting to the tutorial from there</p>
  </div>
  <div class="container-10 w-container">
    <div class="w-row">
      <div class="column-4 w-col w-col-6">
        <h4 class="text-heading2">Before</h4><img src="images/inspop_usa1.png" loading="lazy" width="218" alt="" class="image-phone"><img src="images/inspop_usa2.png" loading="lazy" width="218" alt="" class="image-phone">
      </div>
      <div class="column-3 w-col w-col-6">
        <h4 class="text-heading2">After</h4><img src="images/inspop_usa3.png" loading="lazy" width="218" alt="" class="image-phone">
      </div>
    </div>
  </div>
  <div class="container-6 w-container">
    <h4 class="text-heading2">Saved Posts/Tutorials All in One Area</h4>
    <p class="text-paragraph">- <strong>4/5</strong> of the users had difficulty finding the save areas for the posts and for the tutorials<br>‍<br>- initially designed two separate locations: saved tutorials under save tab in tutorials section, and saved posts under save tab in profile section<br><br>- users commented how it was not intuitive to them to have two separate saved places and that they normally think of their profile as where all their saved items were located</p>
  </div>
  <div class="container-11 w-container">
    <div class="w-row">
      <div class="column-4 w-col w-col-6">
        <h4 class="text-heading3">Before</h4><img src="images/inspop_usa4.png" loading="lazy" width="218" alt="" class="image-phone"><img src="images/inspop_usa5.png" loading="lazy" width="218" alt="" class="image-phone">
      </div>
      <div class="column-3 w-col w-col-6">
        <h4 class="text-heading3">After</h4><img src="images/inspop_usa6.png" loading="lazy" width="218" alt="" class="image-phone">
      </div>
    </div>
  </div>
  <div class="container-6 w-container">
    <h4 class="heading-5">Clearer Iconography + New Addition</h4>
    <p class="text-paragraph">- <strong>5/5</strong> of the users expressed confusion regarding one or more of the icons<br><br>- initial notification icon was confusing as it looked too similar to the direct messaging icon and so I switched it to the more widely known bell icon<br><br>- initial tagged video icon was unclear because it looked more like it was indicating the post was a video and was a play button so I switched it to an icon of a tag to indicate that there was something tagged onto the post<br><br>- one user commented they would have liked to see a share button to be able to easily share posts/tutorials to other friends</p>
  </div>
  <div class="container-12 w-container">
    <div class="w-row">
      <div class="column-4 w-col w-col-6">
        <h4 class="text-heading3">Before</h4><img src="images/inspop_usa7.png" loading="lazy" width="218" alt="" class="image-phone">
      </div>
      <div class="column-3 w-col w-col-6">
        <h4 class="text-heading3">After</h4><img src="images/inspop_usa8.png" loading="lazy" width="218" alt="" class="image-phone">
      </div>
    </div>
  </div>
  <div class="w-container">
    <h3 class="text-heading"><strong>Final Product</strong></h3>
  </div>
  <div class="w-container">
    <div class="columns-2 w-row">
      <div class="column-6 w-col w-col-6">
        <p class="text-captiongif"><strong>Customize Your Explore Feed </strong><br>Select your favorite interests</p>
      </div>
      <div class="column-5 w-col w-col-6"><img src="images/inspop_gif1.gif" loading="lazy" alt="" class="image-phone"></div>
    </div>
  </div>
  <div class="w-container">
    <div class="columns-2 w-row">
      <div class="column-6 w-col w-col-6"><img src="images/inspop_gif2.gif" loading="lazy" alt="" class="image-phone"></div>
      <div class="column-5 w-col w-col-6">
        <p class="text-captiongif"><strong>Found a photo you like?</strong><br>Find the corresponding tutorial</p>
      </div>
    </div>
  </div>
  <div class="w-container">
    <div class="columns-2 w-row">
      <div class="column-6 w-col w-col-6">
        <p class="text-captiongif"><strong>Need help finding inspiration?</strong><br>Check out similar posts/tutorials</p>
      </div>
      <div class="column-5 w-col w-col-6"><img src="images/inspop_gif3.gif" loading="lazy" alt="" class="image-phone"></div>
    </div>
  </div>
  <div class="w-container">
    <div class="columns-2 w-row">
      <div class="column-6 w-col w-col-6"><img src="images/inspop_gif4.gif" loading="lazy" alt="" class="image-phone"></div>
      <div class="column-5 w-col w-col-6">
        <p class="text-captiongif"><strong>Don’t have time to create art now?</strong><br>Save posts in customizable inspo boards</p>
      </div>
    </div>
  </div>
  <div class="w-container">
    <h3 class="text-heading"><strong>Reflection</strong></h3>
    <p class="text-paragraph">I am super happy with how my first large UX project turned out! I followed the double diamond design process method and it gave me a good foundation on the entire UX/UI process and what each step entails.<br><br>If I were to continue this project, I would conduct another set of user testing with my final design and see if there’s anything confusing with my new flows or iconography. I would also like to see if users would want any new additions to the app such as a possible filter button for the search feature.</p>
  </div>
  <div class="container-7 w-container"></div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63375e06b7a5ae566ddc5555" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
  <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>