For assignment 3, I’ve had the awesome opportunity to do some designs for my team (as we consist of four developers, two frontend and two backend). As coders who usually focus on… coding, our grasp of design principles isn’t that great haha. Nonetheless we try to copy good practices which we saw in similar apps (e.g. other progressive web apps, and Instagram, which is similar in terms of functionality and market need compared with our app). Here I present the walkthrough of our design iterations!
Ugly Wireframes
We created these ugly wireframes during our first team meeting/conception of our app. We focused on creating the main views together because we wanted everyone to be on the same page. Moreover, with this common understanding of what kinds of data, views and interactions our app have to support, both frontend and backend engineers can start working in parallel and then later on integrate using APIs.
Less Ugly Wireframes
Next step was to create what we called “less ugly wireframes” - something that we can refer to while designing the views (for frontend engineers) and conduct some form of user testing with - for a sanity check on whether our design and user flow makes sense.
One interesting thing to note is that even our approach to naming our app was iterative! Originally, we were named “Snapshot” but later we felt it didn’t convey the group photo taking and sharing concept that our app emphasizes on. Hence, we opted for the name “LetsSnap” instead, which we felt was more apt given our app’s value proposition of event-based, group-based photo sharing that is independent of existing social media profiles (so people wouldn’t have to change their privacy setting on Instagram to public just to share photos, don’t need to worry about posting unglam pics etc).
Hi-fidelity
The hi-fidelity prototype is when we went into more details for colors, layouts… essentially styling choices. Many of these decisions persist into our final product (e.g. color scheme) whereas some were ditched (e.g. logo, more on logo design later).
Logo Design
Finally, we also approached logo design with an iterative mindset. Rather than perfecting the logo at the get go, I opted for an approach to design, ask for feedback from groupmates and peers, and then making quick changes on the drawing board again. Here we present… LetsSnap’s logo through the ages!!!
This one failed to convey the group photo taking and sharing concept.
I wanted to convey the idea of selfies and taking group photos with your phone, but this version just looks like too much is going on.
Looks a little plain… something’s missing?
Final design! Not perfect but still a significant improvement from the first version of the logo. This was a great learning experience! :)