2017

dopeLst

DESIGN+DEVELOPMENT, WEBSITE (PWA)

dopeLst is a CRUD application designed to be an index of your music library. Given the plethora of music format and service options, many people’s discography spans several different devices. dopeLst provides a fast and cached platform to ground all of that information in one place.

At a Glance —

  • Tech Used: Vue.js, HTML/SASS, Firebase, Sketch

  • The Team: 3 Developers

  • Main Takeaway: Low latency is incredibly important. Tradeoffs in site speed are usually made at the expense of code complexity or aesthetics. Also dropshadows? Surprisingly expensive.

  • It Won Some Things: 🏆 Top 3 Fastest Sites in the Class, 🏆 Top Tier UX/UI in the Class

  • A Fun Fact: It’s a PWA!

The Design Process —

My Roles

I designed the flow of the site, designed the wireframes, and contributed to the front-end development of the site.

The Goal

To build a CRUD indexing site that is clean and fast even under limited network conditions.

Context

Coming Soon.

Hi-Fi Wireframes

Our focus was to design a platform that was clean, intuitive, and most importantly fast. I made these wireframes with these goals in mind. Since the purpose of this app was an exercise in creating a fast CRUD application, we did not perform user testing, and instead focused our research on design practices that increased speed. This led to decisions such as limiting dropshadows. We tested our choices using Google Lighthouse, which among other things rated us on speed performance, and also helped in improving our coding style quality.

/ / / / /

Development

Details coming Soon.

The Takeaway

Latency is very important, and design significantly affects it. According to RAIL, if load time for a page exceeds one second, the flow will be broken and the user’s attention will wander. We made compromises on designs to speed up our site, for instance eliminating box shadows to speed scrolling times and reducing the number of gradients.

Additionally, as phones become the primary way users browse the internet, a mobile-first approach becomes increasingly important. As a result, we made special design and build considerations for mobile browsers since they are slower than computers at loading data, which is only compounded by faulty wifi and slow data speeds.

One of our solutions was to create a separate, flatter style for the mobile playlist. We also used media queries to handle screen-size detection and wrote it such that our mobile styles were default and our tablet and desktop styles were handled by the queries. This greatly reduced the amount of selectors the mobile browser had to parse through.

Our second solution, designing it as a PWA, also helped reduce load times and reduced the effect of unreliable networks. It also provides some advantages of native apps (fast data fetches, offline access via caching) without the initialization cost of having to configure an app.