Electric Bikes Buyer’s Guide
Designing around content, or: Creating a website for an 18,000 word guide






Background

Evelo is an Electric Bike New York-based startup. Their sales model circles around selling e-bikes through their online store — they have no retail operations, therefore e-commerce is really important and accounts for 100% of their revenue. They needed help optimizing bits of their online store and also creating a website to host a resource they were putting forward to the community. This case study will tell the story of designing that website.



Challenges

The resource mentioned is a guide to educate the community about electric bikes. It’s an 18,000 word, completely unbiased resource created to become the go-to destination for people who want to learn more about e-bikes before making a purchase. The guide is divided in 11 chapters.

There were two very clear challenges here: The first was to structure the sheer amount of content in a way that would make it easy for users to digest. The second was to properly present the brand in the website: It should be clear to users that the guide is unbiased but that it was created by Evelo. 



Audience

The target audience was really clear: Most of Evelo’s customers are in their 50s or 60s, have already retired, are not very familiar with technology and want to find a way to keep up with younger family members. 

Designing for an older audience presented me a wide array of challenges — they consume content and navigate through digital products in a different way, for example. It was great having  the Customer Service and Sales Teams providing me valuable input regarding this demographic, as well as users who were willing to talk to me and test different iterations.



Stakeholder Interviews

The first thing I did was conduct stakeholder interviews. It was essential for me to have a very clear picture of what were the business objectives driving this project and what  they were hoping to achieve. I wanted to understand the role it would play in their strategy.

I also spent a good amount of time talking to the Customer Service and Sales Teams. They provided me incredibly valuable insights regarding the target audience.



Persona Development

Next step was creating a persona. It was created as a result of what I learned during the stakeholder interviews and  talks with customers and the CS and Sales Teams. It was important to have a very clear idea of whom I was designing for and it was essential for having something to go back to during the design process.




Information Architecture

I then started thinking about the Information Architecture - which was, for this project, essential: There was a lot of content in play. I had three clear objectives in mind here:

  • Find the best way to arrange the content (18,000 words, 11 chapters) to facilitate its consumption and to help the user navigate through it

  • With that in mind, consider that the user could arrive on a specific chapter or at the homepage — and design for both scenarios so he is able to locate himself properly and is incentivized to explore the rest

  • Minimum flows: To make them the smaller and most optimal possible and remove all clutter


I went through various iterations before deciding on the one that best achieved these objectives.



Sketching

With a very clear picture of how the Information Architecture would be like, I then moved on to sketching different navigation and interaction patterns — I used extremely low fidelity sketches: It allowed me to move quickly from iterations that didn’t work well.





Wireframing

I went on to wireframing, which allowed me to better visualize how a few selected sketches would look and feel.





Visual Design

I moved on to thinking about Visual Design. The client had no formal brand guidelines in place — such as in the form of a book or document- but the branding itself was clear: Logo, colors, type. Visual Design here was about using those brand elements to clearly identify Evelo as the organization responsible for providing this resource, and at the same time making sure that the colors, icons, type and elements utilized were enhancing usability, improving the experience and facilitating the user’s journey.

The Illustrations were made by the talented Chris Fernandez.







Usability Testing

I then moved on to performing Usability Tests with an interactive prototype. I wanted to observe how users were going through the flows and interacting with the system and whether there were friction spots or areas where I could improve or make things clearer. After conducting a few I gathered great feedback and got it in the loop.



Outcome

After closing off on the designs a developer was brought in and  we worked together during the implementation. I believe in collaborating with the development team (Or, in this case, the developer) and provide very clear directions and get as close to pixel perfection as possible.

Looking back, time was a big point of difficulty. I failed in properly estimating the amount of time I’d take and ended up working double-full-time shifts to deliver on the deadlines. I should have also tested my designs earlier - the insights from them would have been valuable earlier on.



Soundtrack

During this project I listed mostly to this Spotify playlist with mainly rap and hip-hop. It’s pretty good to help me focus. It’s also an amazing mood lifter, so you should definitely give it a try. 



Next: Awari, a platform to discover newsletters (iOS)

Home