Hi, I'm Katelyn!
I'm a designer who is passionate about creating inclusive designs through visual experiences.
​
Check out my projects below...
Mobile, Product Design, Strategy
.png){kind=logo}
UI UX, Mobile Design
Role (UI UX Design Apprentice): Design wireframes, user journeys, and full-working prototypes using Sketch and InVision, collaborate with developers and designers to strategize new user stories and conduct user testing.
Team: Catherine Fung, Nick Belman, Euri Park, Carlos Sosa, Joey Tan
​
Timeline: May - Jul. 2019
​
Tools: Sketch, InVision, Material UI
​
Background
Sony Pictures Screeners is a B2B internal streaming application targeted towards sales and business executives who are interested in selling or purchasing Sony content.
The designers were tasked to create a new workflow for the offline viewing feature for the android app. Our team was made aware of the fact that this feature had a quick turnaround.
​
I had to work within certain parameters and was provided with the general Android style guide along with screens of the current iOS offline viewing feature for reference.
Parameters
1. Keep the Android app's flow as similar as possible to that of the iOS app
​
2. Integrate Material UI styling/principles into the new designs
​
3. Design consistent to our Screeners Android design system
Challenge
Although I was limited to working within the general framework of Screeners iOS, I had the flexibility to strategize different ways in which the feature could be improved on the Android app.
​
Upon reflection of the current iOS flow, I realized that the larger issue at hand was the disorganization of the "Downloads" page.
​
In the iOS app, all content is presented to the user on one page along with any additional information regarding the download. Ultimately, the question that I wanted to tackle was...
​
How can we make it easier for users to find their downloaded content?
Current iOS Screens
Too many downloads on one page
Unnecessarily large horizontal cards
​
“Read More” takes up too much space
Play button not correlated with download
sdfsdfs
Process
I simplified the user journey by implementing more structure to the user flow and adding visual hierarchy for users to quickly navigate through their downloads.
​
I mapped out the current flowchart for iOS and realized that the issue laid within the disordered user journey. All user actions, such as playing and viewing details of downloaded content, were being completed on the "Downloads" page.
​
I reorganized the flowchart by compartmentalizing each of the user actions and creating distinct paths for users to take according to the content type. I realized the two categories that needed to be distinguished for downloads were "Episodes" and "Movies". Downloaded episodes need to be separated by season(s) for a more comprehensive user journey.
Current iOS Flowchart
.png)
New Android Flowchart
.png)
Solution
Ever since I presented the prototype to our stakeholders, I have been working with the other UI UX designer to reimagine how the screens would look with horizontal thumbnail photos. Although this project is currently waiting to be launched, I am excited for our users to benefit from our designs as Screeners Android is an 800m market share catering to 80+ international countries.
​
This process has been a long journey and is currently still in the works. I learned how to prototype using Sketch and InVision and how to iterate on my designs quickly. Prior to this process, I believed that a UI/UX project needed to follow a strict step-by-step process, but each project is unique with its own respective challenges and external factors. I also learned to not become attached to my designs since I was constantly reimagining and refining my work.
Low-fidelity Wireframes
.png)
Final Screens
Final Prototype​
