-
Notifications
You must be signed in to change notification settings - Fork 0
/
ocha-app.html
165 lines (114 loc) · 6.19 KB
/
ocha-app.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yen Luong - Storytelling for UX</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/projectpage-1.css">
<link rel="icon" href="icons/profileicon.png">
</head>
<body>
<header>
<nav>
<button class="btn_menu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
<div class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="project.html">Project</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</nav>
<h1 class="title">Weee!</h1>
</header>
<main>
<p class="des">Project in progress...</p>
<h3>Project Overview</h3>
<div class="overview">
<div class="goal">
<p><strong>Goal:</strong> This project focuses on using storytelling to understand users, their goals, and their objectives. By leveraging the power of stories, the aim is to create experience designs that resonate deeply with the audience. The project explores how stories can enhance user understanding, communicate design concepts effectively, and build trust through thoughtful transitions.</p>
</div>
<div id="role">
<p><strong>My role:</strong> UX Designer </p>
</div>
<div class="overview-2">
<div id="timeline">
<p><strong>Duration:</strong> 10 weeks</p>
</div>
<div class="tag-4">
<p><strong>Tools and Methods:</strong> Figma, After Effect, User Research, Journey Mapping, Storyboarding</p>
</div>
</div>
</div>
<h3>Research and Strategy</h3>
<strong>Understanding the User</strong>
<p>The goal of the research phase was to gain a deeper understanding of the Weee! app users, their goals, and their pain points to create an improved experience. I aimed to use this knowledge to create a cohesive user persona and inform the design process.</p>
<div class="pic">
<img src="images/weee/Jasmine-persona.png" alt="User Persona">
</div>
<strong>Brainstorming the User's Story</strong>
<p>To better understand Jasmine's needs and how the Weee! app fits into her daily routine, I brainstormed a story around her experience using Big Idea worksheet. This helped in identifying touchpoints where the app could make a meaningful impact.</p>
<div class="pic">
<img src="images/weee/big-idea-worksheet.png" alt="Big Idea Worksheet">
</div>
<strong>Conducting Surveys and Interviews</strong>
<p>After establishing the persona and story, I conducted surveys and interviews with real users to validate Jasmine's story and gather additional insights. The research focused on understanding users' expectations, pain points, and motivations. </p>
<strong>Key Findings:</strong>
<ul>
<li><strong>Frequency and Convenience:</strong> A majority of participants use grocery delivery apps for convenience and time-saving benefits. They often shop multiple times a week or weekly, using services like Weee! to streamline grocery shopping around their busy schedules.</li>
<li><strong>Convenience and Time-Saving:</strong> College students, including those with tight schedules, emphasized the convenience of delivery over in-store shopping, especially due to Weee!'s ability to save time and effort.
</li>
<li><strong>Product Selection:</strong> Users primarily buy snacks, beverages, and culturally relevant foods through these apps.</li>
</ul>
<div class="pic">
<img src="images/weee/weee-interview-answer.png" alt="Weee's interview response">
<p>Interview response</p>
</div>
<h3>Journey Mapping and Storytelling</h3>
<strong>Creating a User Journap Map</strong>
<p>I used the insights from surveys and interviews to create a journey map for Jasmine. The journey map outlined Jasmine's interactions with the Weee! app, from browsing products to placing an order and tracking delivery.</p>
<div class="pic">
<img style="width: 70vw;" src="images/weee/weee-journeymap.png" alt="Weee's journey map">
</div>
<div class="line"></div>
</main>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="project.html">Project</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<footer>
<p>Let's connect</p>
<div class="social-icon">
<a href="https://github.com/neyahk03" target="_blank">
<img src="icons/github-beige.png" alt="github icon">
</a>
<a href="mailto:[email protected]" target="_blank">
<img src="icons/mail-beige.png" alt="email icon">
</a>
<!-- <a href="https://www.instagram.com/" target="_blank">
<img src="icons/ig-beige.png" alt="ig icon">
</a> -->
<a href="https://www.linkedin.com/in/yenkhaluong/" target="_blank">
<img src="icons/linkedin-beige.png" alt="linkedin icon">
</a>
</div>
<div class="social">
<ul>
<li><a href="https://github.com/neyahk03" target="_blank">GITHUB</a></li>
<li><a href="mailto:[email protected]" target="_blank">EMAIL</a></li>
<!-- <li><a href="https://www.instagram.com/" target="_blank">INSTAGRAM</a> </li> -->
<li><a href="https://www.linkedin.com/in/yenkhaluong/" target="_blank">LINKEDIN</a></li>
</ul>
</div>
</footer>
<script src="scripts/index.js"></script>
</body>
</html>