Redesign for e27’s mobile site

A redesign of the popular tech news website e27, making it easier for people to read the latest tech news on the go

Product website for iTaps
Here are more details about the project that I did:

Project Type

The third school project that I did in General Assembly


2 weeks total


Team Project;

Project Manager

UX Researcher

Assisted with UI

Tools Used


Who is it for

Entrepreneurs and people interested in topics in the tech industy

What does it do

The redesign of e27 helps users consume content in a more organised, bite-sized manner

The Process

Our first dive together as a team

To kick off the project, our team had a conversation about how we would work together to complete the project. While we discussed seemingly minor things like the times that we were the most productive and our mode of communication, it was crucial for getting to understand each other’s work styles better so that we’d understand more on how to proceed from here.

Conducting research:

Being able to understand more about my team let me know how to better work with them as the project manager. To start off the research my team and I created a research plan that would guide us as we were conducting our research for the project. 

These were some of our research goals:

  1. To discover the different tech websites entrepreneurs visit
  2. To understand the needs and challenges of users when visiting a tech website 
  3. To discover the difference in behavioral patterns of entrepreneurs visiting the mobile and desktop site of e27.

For our user research, we sent out surveys to entrepreneurs and people working in the tech startup scene. We followed that with interviews with 12 participants. It was here where we were able to get a better idea of what people looked for when they visited tech news websites as well as their pain points in doing so.

We also conducted a usability test with e27’s mobile site so that we’d get a better idea on how our participants felt about the site. At the end of the test, we asked them to fill out a survey and measured the website’s usability by a System Usability Score (SUS). 

We also conducted a competitive analysis on other popular tech websites out there to get a better idea on how the landscape is like. We also conducted a comparative analysis on other websites focusing on news and events websites to understand common features that are frequently present in other websites that e27 might not have. Click here to see more about the competitive and comparative analysis that we conducted.

To add on to the research, we conducted a heuristic evaluation using Jacob Nielsen’s 10 Heuristics. Finding usability issues via those 10 heuristics gave us an idea on how to fix the different issues that our users would potentially find. We prioritised issues that were easy to fix taking into consideration the time limit that we had on the project. Click here to view the heuristic evaluation that my team and I conducted on e27’s website.

What we did with the user responses 

Affinity Mapping
Our Affinity Map

From the interviews, we synthesized what we learnt from our participants through Affinity Mapping via Miro. From this, we found out 3 main wants from our users:

  1. “I go to e27 to read news and articles, events and look at more information on echelon.”
  2. “I want to read content fast and efficiently and I want to read content that’s relevant to me.”
  3. “I find it difficult to look for relevant content and I find it troublesome to read articles on my mobile phone.”

And meet Sally!

She’s the result of all the people that we had interviewed and gathered insights from. We would be using him to keep our sights and goals aligned throughout this project of redesigning e27.

To design a better product for Sally, we came up with a Problem Statement and Hypothesis:

Problem statement:

“Sally needs an easy and efficient way to acquire relevant information on her industry so she stays up to date with the latest developments."


“We believe that by giving Sally a more organized way to acquire information on her industry, she will be able to stay up to date with the latest developments.”

First iteration:

With more understanding on the goal, my teammates and I set out to do a quick sitemap of the prototype. 

Site Map
Our Site Map

To be better able to categorise news and events, we conducted card sorting with 10 people and learnt about how they would categorise different articles. Click the links to see how we ended up sorting our news and events.

We also created a task flow to allow for a streamlined process for our users to go through and we tested these in our usability test:

Task Flow
Our Task Flow

Based on the task flow, we did quick sketches on how we thought a good layout would be and agreed on the design that we should follow that met our persona’s goals. 

We also started on our prototype in Figma and since we were a little strapped for time, we decided to create a style guide for our prototype

Style Guide
Style Guide

We asked 5 participants to participate in the usability test and we got a much better score overall compared to the first test that was done on the original site. 

Our first iteration
The 1st iteration

However, there was still friction that our participants felt while they were going through our first iteration. With the feedback that we were given, we started making improvements on the site. 

Second iteration:

One of the improvements we started making immediately was the news section where many of our users expressed having difficulty understanding what exactly they were seeing on the site. My teammates and I sat down together to discuss more about how to better present information on the news cards so that our users won’t be so confused. 

News cards comparison
Original news card (Left), Updated news card (Right)

With the changes made, we set off to change our mid-fi prototype to something more high-fi. 

Hi-fi Screens
From left to right, News page, Events page, Echelon's page

I conducted the final round of usability tests. Our participants could now relate better to the new news section of the site, but there were still other things that they thought we could better improve.

Final iteration

Please feel free to interact with how the prototype works (Best viewed on desktop!)

Additionally, you may click here to open the prototype in a new browser


Save and head back to past favourites

Users can save the things they want to see, synced up to all other platforms of

New Echelon Page

Users can find out more details about the famous Startup event and more with the new page

Conveniently search for news and events

We added searching for these categories so that our users would have an easier time finding what they want to read or attend

Too Long; Didn't Read (TL;DR)

If an article is too long for the user, they can choose to read a summary of the article via the main points

Next steps:

  1. Improving the prompt for account signups on the site
  2. Redesigning the startups section of the website since users mentioned that they use the site to look at startups too.


Teamwork for a UX Designer is amazing. This project opened my eyes to how great it was being able to work in a team of people. I found it was challenging to manage this project as a project manager and do my own part of the project as well. When it came to making decisions, we went on a consensus basis so that everyone’s ideas would be heard and no one felt they were left out. I am really thankful to have a team like mine, and we all pulled out all pulled out all the stops in our own ways.

Take a look at my other projects here!

Product website for iTaps

Designing a product website for iTaps, a HR Management Software

View Project
Grocery Buddy!

Designing an app to help people keep track of their groceries

View Project