-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsellesley.html
184 lines (137 loc) · 16.1 KB
/
sellesley.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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<link href="css/slideshow.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<title>Sellesley (2022)</title>
</head>
<body>
<nav>
<div class="navBar">
<div id="logo">
<h3 style="font-size: 45px;"><a href="index.html">EMMA LIM</a></h3>
<div class="dropdown">
<button onclick="toggleNav()" class="navButton" ><img id="mobileNav" src="images/navButton.png" style="width: 50px;"></button>
<div id="dropdownMenu">
<div id="menuItem"><a id="dropdownContent" href="work.html">WORK</a></div>
<div id="menuItem"><a id="dropdownContent" href="about.html">ABOUT</a></div>
<div id="menuItem">
<a id="dropdownContent" href="https://www.linkedin.com/in/lim-emma">CONTACT</a></div>
</div>
</div>
</div>
<div id="navItems">
<div id="page"><a href="work.html">WORK</a></div>
<div id="page"><a href="about.html">ABOUT</a></div>
<div id="page"><a href="https://www.linkedin.com/in/lim-emma">CONTACT</a></div>
</div>
</div>
</nav>
<main class="content">
<h1 style="text-align:center"><a href="work.html" style="text-decoration:none">← </a>Sellesley (2022)</h1>
<div id="projInfo">
<div id="video" style="text-align:center;">
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="560" height="315" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FZvMy9f5J6rQvBfYYxD6quV%2FSellesley-Figma%3Fnode-id%3D4%253A3%26scaling%3Dscale-down%26page-id%3D2%253A2%26starting-point-node-id%3D4%253A3%26show-proto-sidebar%3D1" allowfullscreen></iframe>
</div>
<h3>SYNOPSIS</h3>
<p>Sellesley is the culmination of what I learned in CS 220 (Human-Computer Interaction). It is prototype of a mobile app that seeks to address the problem of inconvenience in buying and selling items on Wellesley College campus. Current available methods, such as Free & For Sale (a Facebook group where students can post items they are trying to sell or in search for), campus craft fairs, Amazon, and retail stores are time-consuming, complicated, far, unorganized, and/or confusing. Our mission was to design a mobile application that poses as a single solution for our target population: Wellesley students who need a better way to buy and sell on campus. Throughout the 12 weeks of developing this project, I designed, prototyped, user-tested, and evaluated UIs to create several iterations of Sellesley's UI.</p>
<p><b>Tools:</b> Figma • Balsamiq</p>
<h3>DEVELOPMENT</h3>
<div class="develop">
<h4>PART 1: USER INTERVIEWS, EMPATHY MAPS, AND USER PROFILES</h4>
<!--slideshow code-->
<div class="slideshow-container">
<div class="slides">
<img src="images/work/sellesley/empathymap1.png" alt="Empathy Map 1" style="max-width: 55%;">
</div>
<div class="slides">
<img src="images/work/sellesley/empathymap2.png" alt="Empathy Map 2" style="max-width: 55%;">
</div>
<div class="slides">
<img src="images/work/sellesley/empathymap3.png" alt="Empathy Map 3" style="max-width: 55%;">
</div>
<div class="slides">
<img src="images/work/sellesley/empathymap4.png" alt="Empathy Map 4" style="max-width: 55%;">
</div>
<!--forwards/backwards buttons-->
<a class="prevButton" onclick="moveSlide(-1)">❮</a>
<a class="nextButton" onclick="moveSlide(1)">❯</a>
</div>
<!--dots/circles for slideshow-->
<div style="text-align: center; padding-top: 5px;">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<div id="captions">
<subtitle id="slideCaptions">EMPATHY MAPS OF WELLESLEY STUDENTS</subtitle>
</div>
<p>As Sellesley caters to an audience at Wellesley College, I interviewed four Wellesley students about what their experiences buying/selling items at Wellesley, and for their opinion and experience with Free & For Sale, Wellesley's current most popular buying and selling platform. For each interviewee’s response, I created an empathy map and found these essential takeaways:</p>
<ul>
<li>The only convenient way to buy things at Wellesley is online delivery, mostly from Amazon.</li>
<li>Free & For Sale is difficult to access for those who are not familiar with Facebook or do not use it regularly.</li>
<li>Users find Free & For Sale unorganized as a lack of a feed customization feature makes it difficult to see relevant posts and a lack of post structure makes it difficult to see information easily.</li>
</ul>
<p>My next step was to create user profiles for the average Sellesley user based on the information I received via interview. Brief descriptions of each user profile are below:</p>
<ul>
<li><b>Kailee:</b> a student at Wellesley who travels lightly to/from her home in California. Kailee wants to buy second-hand goods for a low price and minimize her carbon footprint. She finds the F&FS Facebook group hard to navigate, the town of Wellesley to be too expensive, and lives on the East side of campus and does not want to go to Lulu (Wellesley's student center) to pick up packages.</li>
<li><b>Charlie:</b> a senior at Wellesley preparing to move out of the dorms for good. She wants to get rid of belongings she no longer needs while making some extra money to help fund her move. Charlie sells handmade jewelry on campus but finds it difficult to get exposure for her small business.</li>
<li><b>Jiyoo:</b> enjoys cutting and dyeing hair and wants to provide her services to other Wellesley students as a cheap alternative to the more expensive options around Wellesley. Jiyoo wishes there was a central place to promote her services as the F&FS group only allows physical items to be posted.</li>
</ul>
<p>With 3 different types of users (buyers, sellers, and those who are providing services), there are </p>
</div>
<div class="develop">
<h4>PART 2: SCENARIOS AND DESIGN</h4>
<p>After coming up with the different personas and tasks, I created three specific scenarios that represent precise interactions I want Sellesley users to be able to complete with the app:</p>
<ol>
<li>Kailee is scrolling through the app, hoping to find a new pair of shoes. She comes across Charlie’s listing of a pair of red Vans shoes which happens to be in her shoe size and price range. She attempts to contact Charlie to set up a meeting place and time to make the transaction.</li>
<li>Charlie creates a batch of lovely green glass bead necklaces in her dorm room and wants to share them with the Wellesley community while simultaneously earning some side money. She posts her green necklaces as a listing under the “on-campus small business” page of the app and includes that she has an inventory of 30 necklaces. She waits to see if her posting attracts any customers.</li>
<li>Kailee is scrolling through the services portion of the app and comes across Jiyoo’s listing of cheap and convenient haircuts. Kailee realizes that she hasn’t cut her hair since fall of her freshman year, when she attempted to cut it in her dorm room by herself. She realizes she needs a haircut, but this time with a seasoned hair-dresser. Kailee interacts with the listing to contact Jiyoo and make an appointment for a bob haircut.</li>
</ol>
<p>2 designs for the mobile app were created. The first is a categorical-based interface that first prompts users to pick a category to see listings of all possible items in that category. This design can be seen below.</p>
<div id="captions">
<img src="images/work/sellesley/design1.jpeg" style="width:75%; float:center;">
</div>
<p>The second design is social media-inspired and only has 3 categories to choose from: Free, For Sale, and ISO (in search of). The design can be seen below.</p>
<div id="captions">
<img src="images/work/sellesley/design2v2.jpeg" style="width:75%; float:center;">
</div>
</div>
<div class="develop">
<h4>PART 3: WIREFRAME PROTOTYPE USER TESTING</h4>
<p>After coming up with these initial designs and scenarios, we presented the ideas to the class and received feedback which was taken into consideration before moving forward.</p>
<p>While some people do feel Facebook marketplace is sufficient for selling things at Wellesley, others have frustrations with it, or don’t even like to use Facebook, and were therefore interested in the idea of our app. Common points of interest were the idea of having very consistent listings that require sellers to list things like price, location, and preferred payment method up front, and the fact that this could simplify the interactions buyers need to have with sellers because more information is presented to them in each post. Others liked the idea of an app dedicated solely to buying and sellings goods, as when using Facebook they feel that “sellers need to compete with every other person on a potential buyer's feed for attention”. Students were also interested in the idea of being able to sell services on the app.</p>
<p>Of the 2 designs, we ultimately chose the first one as students expressed they were less interested in the social media-feel. The low-fidelity wireframe prototype for the first design was then created using Balsamiq. More information on the Balsamiq prototype below.</p>
<div id="video" style="text-align: center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_Lmfk7gWU9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>While Design 1 was the basis for the low-fidelity wireframe prototype because of feedback I received, some additional elements were added to this design for the wireframe prototype.</p>
<p>The first feature I added was a sort-by dropdown menu that users can use to sort their listing view based on categories such as price and popularity. I also added an option for sellers to add product tags that users could use to search for or block specific features of items (ex. specific shoe size or item color). The final feature I added was inspired by Design 2. The option of switching between a grid view and a list view when sorting through the listings was included to accommodate different user preferences.</p>
<p>After running some user tests, where I had each user successfully complete all 3 of the user tasks, I received very positive feedback about this layout and therefore kept the general layout very similar for the interactive Figma prototype.</p>
</div>
<div class="develop">
<h4>PART 4: DESIGN RATIONALE & FINAL PROTOTYPE (FIGMA)</h4>
<p>The final interactive prototype was developed using Figma. Watch a walkthrough of the app below or use the interactive prototype at the top of the page.</p>
<div id="video" style="text-align: center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/bhVXBoqKq3Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p><b>Typography:</b> The font used throughout the Sellesley app is Inter, a clean, simple, and easily readable sans-serif font that works with a variety of styles (bolded, semi-bolded, italicized, etc).</p>
<p><b>Color Scheme:</b> Sellesley’s color scheme consists of a soft blue, light gray, and pale yellow. A soft blue was chosen to be the primary color as blue is Wellesley College’s official school color and Sellesley’s intended audience is Wellesley students. Unlike Wellesley’s vibrant navy blue, Sellesley’s blue is much more diluted, making it more welcoming and relaxing to look at. The secondary color is a light gray that helps separate components in the UI from the soft blue while not contrasting it too much. A pale yellow is used as the highlighting color as it contrasts the blue and gray well and pops out to the user, emphasizing important information in our UI.
</p>
</div>
</div>
<div class="footer">
<p>Made by Emma Lim.</p>
<a class="social-icons" href="https://www.linkedin.com/in/lim-emma" target="_blank" style="padding-right:10px"><img src="images/footer/linkedin.png" style="max-width: 25px" alt="github"></a>
<a class="social-icons" href="https://github.com/emmalim" target="_blank"><img src="images/footer/github.png" style="max-width: 25px" alt="github"></a>
</div>
</main>
<script src="javascript/manualSlideshow.js"></script>
<script src="javascript/portfolio.js"></script>
</body>
</html>