Obscura.

A community focused, beginner friendly photography platform that showcases how an image can evolve from when it is taken, edited and
then finally exported.

A collaborative project from Anni Liu & Jacob Zheng.

Timeline-Start-2
Timeline-Fin-2

Process.

Editing is a core part of photography. The photographer has to make a decision on what they want to include or omit in the final image. Photos that have been edited badly have lead some people to stigmatize editing.
Obsura aims to help photographers improve their editing skills and destigmatize editing as a whole as it can make a good image into an image that is great.

Photography apps are not beginner friendly.

Additionally they lack any sense of community. Instagram has publicly stated they are no longer a photo sharing platform and hope to compete with TikTok. 500px and VSCO have their own positives and negatives but they still are seen as a less popular Instagram, app versions of the now dead flickr.

Feedback.

Instagram automatically hides negative comments, when was the last time you saw a negative comment on Instagram? 500px devolved into like and follow back sharing/spamming, large enough groups of these people would then dominate the 'popular' section of the app.

Positive and constructive feedback is an important part of a photographers growth and continual journey to mastery. Photography draws similarities to art in the sense that when you start out you need a lot of practice in order to build a strong foundation of fundamental skills and recieve constructive feedback from peers during that period. Recieving feedback from a non-biased perspective can be insightful and meaningful.

Sketching process.

Concept-Sketching-one
Social
Feedback-Module
Discover
Feed-and-pages
Upload
Page1
Page11
Page2
Home-1

Home

Timeline

Timeline

Profile-1

Profile

Paper Prototype.

https://marvelapp.com/prototype/6535i3i/screen/79718203

We drew up the general layout and assembled it together for testing on marvelapp. Since it was early in the design process we still hadn't decided properly who was the main persona or user we were targetting. After some discussion with testers we based it off 1-2 of them who were running their own business and would see use in an app that helps them take better photos weather that is through tutorials or fostering a community that they could ask for help in setting up a shoot.

Home-2
Timeline-1
Challenges

Lo-Fi Wireframe.

https://xd.adobe.com/view/0d4ebc27-7c1c-45fb-9c66-6dc975f96042-581d/

At this stage we were still looking at competition and taking bits and pieces from what we liked from each app and were figuring out improvements to make them just a smidge better.

Lo-Fi Feedback.

"Why does discover take me to my gallery?"
The category needed a title or something more to signify what section of the app you were in.

"How do I add a comment or contribute in the forum threads?"
Forums was far too complicated to implement and quickly fell out of scope and was reduced to discussions.

"Could we see more of the process of uploading a Timeline and have the entire userflow prototyped out?"
We appended this to our top list of priorities as we felt that showcasing the user flow was ideally the best course of action before spending spare time to explore other flows and features.

Challenges.

We initially thought about Obsucra being a camera app that had a live tutorial and guide on lining up the shot while taking the photo. In the beginning we had a: tutorial section, a marketplace to buy/sell used gear, a forum for niche photography categories like bird watching. At every prototype stage we pared-down our features and sections, removing ones that were not core to our app due to time constraints.

Home-3
Notification
Note

Hi-Fi Prototype.

https://xd.adobe.com/view/23b77bca-c6d3-4171-a274-e994b1020f35-76e4/

I don't have a background in graphic design but I prefer maxamalism as an end user where space is utilised to it's best potential without being overly cluttered. I would have personally liked if the images met the edge of the screen in order for the best viewing of the image and the details within. We stuck to the layout grid and it's margins for this design however.

Feedback.

"Why does the onboarding appear a second time?"
The 'login or sign up' page is the first onboarding page while the option to sing up with 'email or gmail'  page would appear later in the onboarding. We fixed this by placing the second email/gmail sign up page after the login/sign up page to prevent this confusion and pain point of seeing a second sign up.

"It would be nice to see a preview of the photo someone left a comment on"
We added a toggle that changed the comment bubble into the picture it was referencing on the notification shade.

Observations.

Since links between artboards on Adobe XD were linked to the icons I noticed testers were having a really hard time htiting the back button, tapping multiple times with zero success. To amend this issue I grouped small icons wtih a large invisible large box and link them.

Comment-Preview-1png

First iteration #1

Comment-Preview-2

Second Iteration #2

Final

Final Implementation

Closing Thoughts.

It was really fun and interesting experience working cooperatively on a project. Having someone to bounce ideas off, recieve a second opinion, asking what they thought about an element you were unsure about really helped either affirm or rethink elements.

We were brainstorming ideas on how to implement a testers feedback on wanting to see the photo someone left a comment on. I liked Anni's idea of changing the comment into the photo but was stumped on the artboard prototype linking as the component prevented interaction with the Go To Post button.
I was stuck for about an hour before asking Anni for input. She instantly had a solution; create an invisible box that was above all other elements on top of the Go To Post button.

Anni handled most of the UI styling and branding because she had experience in branding work from freelancing and I handled most of the UX and linking and tidying up the UI aspect. The perfectionist in me enjoyed the reiteration aspect of getting feedback, finding a solution to that feedback, repeat ad infinitum. It was satisfying to identify potential UX pain points early on by imagining the real use case scenario and patterns from other applications.

We previously had a carousel design based on a film reel for our timeline feature, where swiping or tapping sides slides over the next/previous photo which looked good on paper literally. But from experience with instagram, small subtle edits and a moving picture turns into a 'Where's Wally' like game.
Even when edit processes are shown on an Instagram Story where the next image is immediately shown without any animations it still takes a lot of tapping back and forth to see what even changed from the previous photo.
What solidified the reiteration of the timeline feature was seeing how Lightroom Mobile's implementation of the editing process. The edited image in the centre is locked in place and below the image is a picker list of edits that updates the image as you scroll through them.

Previous-Timeilne
IMG_0541

The TAFE UI/UX course was amazing experience. Class numbers dwindled to half of the initial but by the end of the course but we were quite a tight-knit group. During the duration of the course I went around inviting people to join me/us for lunch. It turns out everyone had a background in graphic design except for me. It was enlightening listening and learning about their experiences in the industry and what advice they had to offer to those still studying. After the final lesson we dropped by the local pub for a drink and chat one last time before we all said our goodbyes.

Let's Connect!