Published on <a href="https://blog.prototypr.io/hyperspektiv-reconsidered-dad7e46bd04?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Judy Li 
<h3>A UX Case Study</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*00etHj4LC-ZFVpZoKbKUXw.png">
Hyperspektiv is a real-time video and photo distortion app that lets you see and capture the world in new ways. As an early adopter, I am happy to see that it has recently received some recognition with its feature in the App Store. Yet from a usability standpoint, some issues were observed that, if addressed, can help it stand out even more.
I took on this case study to refine my design methods and get product insights. Over the span of two weeks, recommendations to address key issues dealing with filter organization and task flow were explored. At the end of the sprint, the solutions were successfully confirmed through testing.
<h4>Background</h4>
What makes Hyperspektiv unique are its dynamic filters — they are not only visually captivating but also interactive with its users, like a musical instrument.
Conceived as a form of expression, it is up to users where they take it. There’s extensive communities on social media platforms like Instagram and Vimeo, but people are also using it as a tool for live visual performances.
Some more information can be found in this <a href="https://creators.vice.com/en_uk/article/8qvee3/glitch-mob-video-distortion-app-hyperspektiv">Vice Creators article</a>, or just <a href="https://itunes.apple.com/us/app/hyperspektiv/id1058051662?mt=8">try it out yourself</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cSgGcd6LIqojSTPZX5k0xw.png">Screenshots of Hyperspektiv taken from the App Store.
<h3>Goal</h3>
The goal is to understand its current usability issues and address them in a redesign informed by user and business needs. These changes improve the current experience and support the product’s expansion in forthcoming versions.
<h3>Outcomes</h3>
The issues I found deal primarily with two aspects: accessing filters and using photo/video capture.
I came up with a solution to these issues and validated the prototype with six users, five of whom no longer experienced these issues.
Below I’ve highlighted the major pain points and my solutions along with some supplemental screen diagrams.
<h4>Filter Organization and Ease of Access</h4>
Problem: Nine out of twelve users had difficulty navigating filters, accessing settings, or both. Users appreciate the amount of filters available but had trouble locating them with just names and no visual cues. Having to tap on every single filter to see the output is tedious and time-consuming. Furthermore, most of the testers were not even aware of the additional filter settings. The user spends more time locating a specific filter instead of on the subject matter that they aim to capture.
Solution: My proposal organizes filters by discernible characteristics and includes visual previews. It establishes vertical hierarchy through a folder structure, and exposes filter settings on the persistent navigation bar. Being able to place each filter in a defined mental space and control them at ease aids in the reduction of cognitive load, allowing the user to focus on the subject matter.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mxlb6TVhyo-6x6ANk7kE6w.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mheYrnELZRpD_EElkcVzGQ.png">
<h4>Photo vs. Video Capture</h4>
Problem: Eight out of twelve users took a video when intending to take a photo. Located at a small scale to the lower left of the screen, the camera button is overlooked. In addition, returning to capture mode requires several steps, as shown in the existing task flow further down. The user misses a shot and either becomes frustrated with the app or with themselves.
Solution: The proposal includes video and toggle mode on the navigation bar. This eliminates the need for separate capture buttons, streamlines the task flow, and aligns with typical patterns so that the user does not require excess mental capacity to execute. The user is able to capture that special footage or moment in the exact way imagined.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*seABpKbAOhTqkU718W4K6Q.png">
<h4>Photo vs. Video Task Flow</h4>
Problem: Seven out of twelve users felt that returning to the capture screen was tedious. In stark contrast, taking a photo prompts only a split second confirmation modal. Furthermore, because photo import is not currently supported, captured photos do not appear within the camera roll. This diminishes the user’s confidence as to whether or not it was saved at all.
Solution: A persistent bottom navigation bar provides the user with more control and ability to locate themselves within the app. Also, instead of disappearing automatically, modal confirmation popups are to be dismissed with a tap anywhere on the screen. Along with the ability to locate, this micro-interaction provides the user with confidence of a successful capture.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4E2TQ9jNxSPkYs6658HPuQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MU_M5QIW0yTLkZdQJjVO-A.png">
I created an animation to demonstrate the proposed task flow. Filters expand out from each folder like sliding drawers.
<img alt="" src="https://cdn-images-1.medium.com/max/750/1*N6uqnF80LDZYZDJYcEfSFQ.gif">
<h3>Process</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*I6ae6MhVlj-KENPfA2Lq-w.png">
<h4>Empathizing</h4>
Looking at my own experience as well as those of others from App Store reviews, I first used proto-personas as a way to consider the majority of Hyperspektiv’s users within a couple of distinct use cases.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-7wpNHFufZW7ZEooauNrGQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YyEUoKn9jWliNVbyJTYR-A.png">
‘Keith’ represents the use case similar to that of the founders — creatives who are using the app as an instrument of artistic expression. On the other hand, ‘Mel’ — who is more focused on online presence — is akin to the use case that emerged upon release of the app. These are not mutually exclusive by any means but thinking about them separately was useful in understanding scenarios outside of my own.
<h4>Guerilla Usability Testing</h4>
Over two days, I tested twelve strangers in downtown San Francisco and at San Francisco State University who currently use an iPhone. Because the product is so new and I could not find experienced users, I gave each person a couple of minutes to get acquainted with the interface and explore the features at their own discretion. All were given the following tasks:
<blockquote>Take a video and save it to the phone / Import the video just taken, use the app’s features, and save it to the phone / Take a photo using the app’s features and save it to phone / Take a selfie in landscape mode using the app’s features and save it to the phone.</blockquote>
All tests were video recorded from behind the shoulders in order to track hand movements as well as screen navigation.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zIPV0QY4VLD3mabIq_gAoQ.png">
Whether verbal or gestural, I noted observable problems that the user encountered throughout the assigned tasks. I then categorized these potential pain points by type to get a better sense of how frequently each was experienced.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*idkx4QbzOcZtAph8S3H0KA.png">
<h4>Defining</h4>
The proposal should not only take into consideration the insights of its users but also the interests and goals of the business. From their feature on Vice Creators and conversations with the co-founder, I came up with the following assumptions about the business which informed the focus of my design.
<ul>
<li>The filters, built around live capture, are the core product.</li>
<li>The initial intent of the app was for video capture only. It wasn’t until after the first launch that video import and photo capture were included. The founders now recognize both the demand and value of these added features.</li>
</ul>
Taking into these considerations, I decided to focus on improving the filter selection experience and improving integration of the added features.
In order to make sense of the wide variety of user pain points, I used an affinity map and 2&#215;2 to better understand each of their values relative to the user versus business. With this, I decided to focus on the pain points that I have listed above.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*afcbOKWU_QgTc3Jlsoam4A.png">
Visualizing the existing task flow provided me with insight into the disconnects between video capture, video import, and photo capture. Using this information, I mapped out ideal task flows. Each of these tasks should not only be more efficient standalone but also have consistency between one another visually, functionally, and internally. <a href="https://uxdesign.cc/design-principle-consistency-6b0cf7e7339f">Consistent design is intuitive design</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rQK0zRvDnzNMeqpsyEPzwg.png">
Reimagining flows provided a framework in ideation. These along with the proto-personas and tests mappings served as useful points of reference, anchoring my design explorations back to the research thus far.
The proposed flows demonstrate the way in which the added capabilities of video import, photo capture, and photo import can be better integrated into the system through changes in sequence and interface.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0rcIZxKQlQ3-dSqO-J544A.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1uacxHoncAtqWSsHT2N1bg.png">
<h4>Ideation and Prototyping</h4>
With hand sketching, I was able to quickly explore multiple ideas and lo-fi schemes, focusing not only on screen layout but also how they transition between one another.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qiuidaAKAcMDDU8ZUAQHAA.png">
Ultimately, I decided to proceed with the option that adhered best to the existing app’s style and predominant use patterns. With this direction, I proceeded with a few hi-fi iterations in order to fine tune the visual and interactive design.
Currently the filters are in no discernible order. To better organize the filters, I went through a card sorting exercise with my peers. We first split them off based on color palette — black &amp; white, monochrome, polychrome — and then further by distortion style — abstract, surreal, noisey, and geometric.
Receiving feedback from my peers and mentors throughout, I iterated several times in hi-fi. This certainly aided in the visible result but, equally important, allowed me to refine my organization and work flow.
<h4>Validation</h4>
I create a clickable prototype and tested it out with six individuals. With the redesign, I asked them to perform the same task of capturing a video using the app’s features. Five out of six were able to complete it successfully using both filter selection and modifications.
<a href="https://invis.io/D6G052YHKEG">Click here to view the project `Hyperspektiv`</a>
<h3>Further Thoughts</h3>
As is the case with many emerging products, issues tend to arise when new features are introduced within an existing framework. Integration is not easy and is always something that product teams struggle with, especially during its nascent phase. Through dialogues between stakeholders and users, the goals, desires, and needs are continually reshaped.
For the purpose of this case study, my design proposal encompasses a vast expanse of revisions. Yet I should note that in practice it’s crucial to understand the implications of a sea change prior to any form of execution. As the product gains traction, it will be increasingly challenging to revise so broadly. In order to track and measure the success of each revision, changes should be implemented in multiple phases. Assessing the needs of the business, users, and the intersection is crucial to prioritizing effectively.
This case study was an immersive way to think critically about the issues of users, needs of the business, and design as mediator of both. The usability tests allowed me to get out of my head and better understand the behaviors and thinking of others.
Shortly after starting my research, I was informed by the co-founder that a new version is in the works for release in a few months. Hyperspektiv 2.0 will enable the user to create and save their own filters and include photo import as a key feature — both of which are related to the primary pain points uncovered in my research! I look forward to checking out what they have in store.
Thanks for reading!
Special thanks to Zac Halbert, Jake Fleming, Michael Burkett, Amy Weibel, Jordan Presnick, Chris Zaldua, and Dean Grenier for all your constructive feedback and support ☺
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=dad7e46bd04" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/hyperspektiv-reconsidered-dad7e46bd04">Hyperspektiv Reconsidered</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hyperspektiv Reconsidered

A UX Case Study

Top Stories