-
Notifications
You must be signed in to change notification settings - Fork 0
/
arcus.html
66 lines (61 loc) · 3.91 KB
/
arcus.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
---
title: "Case Study: Redesigning the Arcus mobile app"
description:
permalink: arcus-redesign/
comments: true
social: true
socialTitle:
socialDesc:
socialImg: assets/social/arcus.jpg
featPosts: ["iss","dailymail","click"]
---
{% include header.html %}
<style>
.postHeader {
margin-bottom: 0;
}
.subtitle {
font-size: 1.2em;
font-style: italic;
margin: 0 0 1em;
}
.imgRow img {
margin-bottom: 1em;
border: 3px solid #fff;
}
@media (min-width: 600px) {
.imgRow img {
width: 31%;
height: auto;
margin-bottom: 5px;
}
}
</style>
<link rel="stylesheet" href="/assets/css/featherlight.min.css">
</head>
<body class="grey">
{% include nav.html %}
<main class="wrapper base">
<article class="post">
<h2 class="postHeader">Redesigning the Arcus mobile app</h2>
<p class="subtitle">A very short case-study.</p>
<p><a href="http://www.arcusweather.com/" target="_blank"><em>Arcus</em></a> is a hyper-local weather app for Android. Much like <a href="http://darkskyapp.com/" target="_blank"><em>Dark Sky</em></a> for iOS, it uses your phone's GPS to predict when it will rain or snow at your exact location, down to the minute. It's pretty sweet.</p>
<p>Unfortunately the design isn't great:</p>
<p class="clearfix imgRow original">
<a href="/assets/images/arcus/old1.png" data-featherlight="image"><img class="alignleft" src="/assets/images/arcus/old1.png" alt="Arcus screenshot - original design" width="100%" height="" /></a>
<a href="/assets/images/arcus/old2.png" data-featherlight="image"><img class="alignright" src="/assets/images/arcus/old3.png" alt="Arcus screenshot - original design" width="100%" height="" /></a>
<a href="/assets/images/arcus/old2.png" data-featherlight="image"><img class="aligncenter" src="/assets/images/arcus/old2.png" alt="Arcus screenshot - original design" width="100%" height="" /></a>
</p>
<p>While the graphs are useful, the tightly-packed text and lack of an obvious visual hierarchy makes it difficult to scan information quickly. It has some great features though, so I started using it as my go-to weather app, while quietly hoping that Dark Sky would bring out an Android version. When that appeared less likely, I decided to suggest improvements for Arcus instead. One evening when I was feeling creative, I emailed Arcus's creator Kushan Jayatilleke, and offered help with redesigning the app. Kushan happily accepted. After a few hours of playing with the design, this was the result:</p>
<p class="clearfix imgRow new">
<a href="/assets/images/arcus/new1.png" data-featherlight="image"><img class="alignleft" src="/assets/images/arcus/new1.png" alt="Arcus screenshot - new design" width="100%" height="" /></a>
<a href="/assets/images/arcus/new3.png" data-featherlight="image"><img class="alignright" src="/assets/images/arcus/new3.png" alt="Arcus screenshot - new design" width="100%" height="" /></a>
<a href="/assets/images/arcus/new2.png" data-featherlight="image"><img class="aligncenter" src="/assets/images/arcus/new2.png" alt="Arcus screenshot - new design" width="100%" height="" /></a>
</p>
<p>I didn't spend a lot of time refining it because the project was pro-bono and unsolicited, so I'm still not completely happy with many aspects of the redesign. Ideally, I'd spend more time creating alternate versions and user-testing to see which aspects are might be confusing. However I'm fairly happy with the new design as it stands. I think that it simplifies the text-heavy interface, and makes it easier to pick out individual pieces of information at a glance.</p>
<p>Kushan was happy with the new layout and began revising the app's design over subsequent weeks. While he didn't implement every aspect of my design, he did use many of my suggestions, and I think the app is easier to use and more visually-appealing as a result.</p>
</article>
</main>
{% include footerJS.html %}
<script src="/assets/js/featherlight.min.js"></script>
{% include footer.html %}