eSim for Travellers

A Case Study

This brief was to design a landing page for an eSim option aimed towards travellers. After identifying the target audience and creating an initial design structure for the webpage, I developed a working prototype to showcase the potential appearance and interactions of the landing page, both on desktop and mobile.

My roles: Wireframing, web design, copy-writing, prototyping

Tools used: Figma

Group 19

Building the foundations

The brief provided provided minimal information on the target audience for this product, besides the following key points:

  • People who are planning on travelling
  • People who value cost-effectiveness in purchasing products

 

Based on this information, I conducted preliminary research on websites with similar audiences (e.g. Airbnb, Lonely Planet, SkyScanner, hotel websites) in order to get design inspiration and gauge features to include on the webpage. I also studied websites selling similar eSim products (e.g. Airalo, MobiMatter) with the same objectives in mind.

With this research, I came up with a list of features that should be included in order to facilitate customer purchases, including: 

Data bundle builder

A tool enabling customers to build their own custom data bundle according to their needs.

Top countries & offers

This allows users to view the most popular destinations and offers at a glance.

Testimonials & FAQs

A social proof section to increase credibility and confidence in potential buyers.

In addition, seeing as the product was centred on mobile usage, I decided to create both desktop and mobile-optimised versions of the page for increased user accessibility.

Designing low-fidelity wireframes

Once the project scope has been defined, I started with simple low-fidelity wireframes to map out the design of the prototype.

Designing high-fidelity wireframes and a working prototype

With the low-fidelity wireframes complete, I began developing a fully-designed prototype of the application. I adhered to the given branding guidelines throughout the page, e.g. fonts, colour schemes, and art style.

Once the screens were designed, I also made the prototype fully interactive and clickable. 

Use the interactive prototype viewer below to explore the prototypes yourself (click on the enlarge icon on the top right to enable fullscreen view)! 

Desktop prototype

Mobile prototype

Interested to work with me?