A redesign of the popular tech news website e27, making it easier for people to read the latest tech news on the go
Project Type
The third school project that I did in General Assembly
Timeline
2 weeks total
.png)
Role
Team Project;
Project Manager
UX Researcher
Assisted with UI
Tools Used
Figma
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:
- To discover the different tech websites entrepreneurs visit
- To understand the needs and challenges of users when visiting a tech website
- 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
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:
- “I go to e27 to read news and articles, events and look at more information on echelon.”
- “I want to read content fast and efficiently and I want to read content that’s relevant to me.”
- “I find it difficult to look for relevant content and I find it troublesome to read articles on my mobile phone.”
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."
Hypothesis:
“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.
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:
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
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.
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.
With the changes made, we set off to change our mid-fi prototype to something more high-fi.
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
Solution
Save and head back to past favourites
Users can save the things they want to see, synced up to all other platforms of e27.co
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
Reflections
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.
