-
Notifications
You must be signed in to change notification settings - Fork 0
/
ibored.html
102 lines (102 loc) · 8.36 KB
/
ibored.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
<!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="637da594fb4b6da12e53d606" data-wf-site="63375e06b7a5ae566ddc5555">
<head>
<meta charset="utf-8">
<title>iBored</title>
<meta content="iBored" property="og:title">
<meta content="iBored" 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 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/ibored_websitebanner.png" loading="lazy" srcset="images/ibored_websitebanner-p-500.png 500w, images/ibored_websitebanner-p-800.png 800w, images/ibored_websitebanner.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="page-banner"></div>
<div class="container-3 w-container">
<h1 class="heading-2">iBored</h1>
<p class="text-paragraph">Creating a mobile app that allows users to easily organize hangouts with friends<strong></strong></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">October 2022 - January 2023</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">Bo Bramer (Software Engineer)<br>Thomas Tran (Project Manager)</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">I was asked to design an app idea that my friend was developing. <br><br>iBored is a mobile app that allows users to efficiently set up hangouts by letting all of their friends know what activities they feel like doing. The main purpose of the app is to encourage and facilitate more in-person connections rather than virtual ones.</p>
</div>
<div class="w-container">
<h3 class="text-heading">Problem</h3>
<p class="text-paragraph">The person who came up with this app idea was Thomas. During the pandemic, he felt frustration when he tried to organize hangouts with his friends as there was no convenient way to do so except messaging each friend separately, figuring out their schedule, and deciding what activity to do based on every person’s interests.</p>
</div>
<div class="w-container">
<h3 class="text-heading">Solution</h3>
<p class="text-paragraph">1. Create a platform where users can broadcast what they feel like doing at a certain time, so friends can react if they are down to hang out<br>2. Incorporate a messaging system so that friends can discuss specific hangout details<br>3. Design a way to allow users to post about their hangout after organizing one through the app</p>
</div>
<div class="w-container">
<h3 class="text-heading">Initial Wireframes</h3>
</div>
<div class="w-container"><img src="images/ibored_wireframes.png" loading="lazy" srcset="images/ibored_wireframes-p-500.png 500w, images/ibored_wireframes-p-800.png 800w, images/ibored_wireframes.png 1000w" sizes="100vw" alt="" class="image-banner"></div>
<div class="w-container">
<h3 class="text-heading">A/B Testing</h3>
<p class="text-paragraph">As I finished the initial version of the design, the team held multiple meetings to go over the branding of the app. We researched popular social media platforms, color psychology, and Material Design to select the main color of the app.<br><br>We narrowed down the main color of the app to one of these two colors: blue or green. I then worked with the lead Software Engineer in order to develop a poll on our website for people to vote which color design they liked the most.</p>
</div>
<div class="w-container"><img src="images/ibored_vote.png" loading="lazy" srcset="images/ibored_vote-p-500.png 500w, images/ibored_vote-p-800.png 800w, images/ibored_vote.png 1001w" sizes="100vw" alt="" class="image-banner"></div>
<div class="w-container">
<div class="columns-3 w-row">
<div class="w-col w-col-6">
<p class="paragraph-11"><strong>387/531 </strong>of the people who participated in the poll voted that they liked the BLUE design over the green one.</p>
</div>
<div class="column-7 w-col w-col-6"><img src="images/ibored_voteresult.png" loading="lazy" alt="" class="image-2x2"></div>
</div>
</div>
<div class="w-container">
<h3 class="text-heading">Current Design</h3>
<p class="text-paragraph">Since the completion of the initial wireframes, the team has continued to refine the app idea and thus, I have continued to ideate and redesign existing frames as needed. <br><br>This is the current design of the light mode version that I have shipped out to the lead Software Engineer. The dark mode version will also be created once the software engineer completes the light mode.</p>
</div>
<div class="w-container"><img src="images/ibored_current.png" loading="lazy" srcset="images/ibored_current-p-500.png 500w, images/ibored_current-p-800.png 800w, images/ibored_current.png 1000w" sizes="100vw" alt="" class="image-banner"></div>
<div class="w-container">
<h3 class="text-heading">Reflection</h3>
<p class="text-paragraph">This project gave me the opportunity to collaborate closely with a software engineer as well as a project manager, familiarizing me with what I will experience daily when I am working in a company.<br><br>As a junior designer, I made sure to consistently ask for feedback so that I may grow as a designer. I am very grateful for my team as they were extremely helpful whenever I wanted feedback or clarification what they wanted to be designed.<br><br>Our software engineer is currently developing the app. We hope to launch the alpha stage of the app by the end of 2022 or early 2023.</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>