James Burnett's Portfolio

GeekWire
Category
  • Student Group Project
Role
  • UX Research
  • Project Management
  • User Interviews
  • Affinity Map
  • Persona
  • Storyboard
  • Usability Testing
Tools
  • Figma
  • Draw.io
  • Maze
Timeframe
  • February 2020 - March 2020, 2 weeks
This project was our first group project at General Assembly. I worked with two other classmates on designing an app to help solve a problem for a local business. We were assigned to work on an app for GeekWire, a national technology news site with strong ties to the Seattle region. My team created a high-fidelity design for a GeekWire Android app. I was the UX Researcher on the team but also had a hand in helping with the visual design.

The Problem

Finding the problem and ourselves.

The problem was relatively open-ended. We were tasked with finding what could be improved upon and creating a re-design of the app. This was also our very first UX team project, so we also had to learn how to manage a team project and work collaboratively. Ultimately, the problem was finding the problem and ourselves. Initially, we thought about:
  1. What are the painpoints for GeekWire users?
  2. What unmet needs and  enhancements might  this  app offer?
  3. How do we improve the customer experience using usability findings?
For two weeks, we worked on finding and solving these problems. Using these questions as a starting point, we hit the ground running to finish this two-week design sprint on time.

Design Process

DISCOVER

Getting to know the team.

Since this was our first UX team project, we felt it necessary to take some time to familiarize ourselves with each other, our work styles, and to come up with a detailed plan. I had our team take a teamwork report from predictive index (PI), a proven talent optimization platform that assesses individual and team work styles. This report gave us insight into our individual strengths, how to work together, and potential pitfalls.
From here, I wrote a functional team plan. I thought about everything I learned in the PI report, what knew about the other team members, and what I knew about myself to summarize everything into one document. The biggest takeaway was that one person was somewhat passive, the other could be commanding, and I sat in the middle. The full report can be read below.

The current app is a relic of the past.

Looking at the app it was clear right away that the Android version was lacking compared to the iOS version. We therefore decided to redesign for Android. GeekWire first launched for Android in 2014 and has grown to have approximately 5,000 users. There has only been one version of the app since its release, making it terribly outdated.

A dated design with problems.

To the far left, the feed has limited scroll. Second to the left, if you go back after opening a link it takes you to the home page of the app. Second to the right, external links simply don’t work. And to the far right, the default options for sharing an article are odd to say the least.

Users want a professional design to increase trust.

After some domain research, I interviewed four people about what they thought of the current app and how they typically use news sites and apps. I sent out a survey to filter out people who would never use an app like GeekWire. A few quotes in particular stood out from these interviews:
“Seeing trashy ads on the side turns me off. Design that shows me the site is poorly made makes me trust the site less.”
“I’d like to have a list of articles to choose from. I also like being able to filter by popularity.”
“If the site looks cheap, it makes me think they put less effort into the site, which makes me think they put less effort into the content.”
From this, we learned that people seemed to value trust and aesthetics. The two go hand-in-hand – a news app that looks professional will seem more trusting and enrich the overall experience. And because the people we interviewed had different goals in mind when reading the news, we felt it was important to give users a way to filter and control how they browse the app.

Meet the persona we designed for, Scott T.

After conducting the interviews, I listened to the voice recordings and wrote detailed notes out for each interview. Then I met with my team and we created an affinity map using information from the notes. Our goal was to map out what the typical user wants out of GeekWire and to then use this information to craft a persona. Through this process, we found five main trends:
  1. I know what I want
  2. Content over design
  3. I read with other people in mind
  4. Trust is key for a news app
  5. Familiarity is important
Using these trends, I created our persona, Scott. Scott works in tech and likes to stay on top of all the latest trends. He is very opinionated and vocal about what he thinks.

Define

Scott uses GeekWire to win debates.

After establishing Scott, I crafted an easy story to represent a few use cases for our design. This also helped us come up with some possible features:
  • Search
  • Sharing articles
  • Visual redesign
  • Menu reorganization
  • Personalization
  • Notifications
Given our time constraints and scope, we decided not to build in all these features. We instead decided to build out a search feature, give users the ability to share articles, do a visual redesign, and reorganize the main menu.
Scott’s user story
In this user story, Scott uses GeekWire to win a debate with his friend.
Task prioritization
We decided that personalization and notifications were outside the scope of what we could accomplish in time.

Building out the important user flows.

After deciding on the features, we created a couple user flows. We decided that these were the most important features to build out because they are integral to Scott’s story. Scott must be able to search to find articles and because he’s interested in tech, he will use the app to browse for stories.

Design

Bringing our ideas to life.

We held a design studio to sketch out our ideas as a team. We addressed the following features:
  • Menu
  • Search
  • Share article
We took inspiration from news sites and the way they structure their pages. We wanted to give Scott a more dynamic experience – something that would make him feel he was browsing a trusted source. We also wanted to make sure searching and sharing were easy and intuitive.

Showcasing the first prototype’s key features.

From here, we created our first prototype. We kept it at a medium fidelity due to time constraints and focused on creating something we could test it with users. The video on the left shows how a user might browse the app via categories. The middle video showcases how searching works. And the video on the right shows the layout of an article and the different ways they can be shared.

Administering our usability tests using Maze.

For user testing, I used Maze and designed a test with a few tasks for participants to complete. I wanted the tasks to be mostly straight forward but I still wanted to test some of the niche features we designed. So I made sure to design tasks that tested whether users could do things like sort search results. The tasks were as follows:
  • Find a category without searching
  • Select an article in this category and share it Twitter
  • Search for a particular article
  • Search an article and sort results by date
  • Reverse this sort
  • Sort by title
In addition, I asked a few follow-up questions:
  1. On a scale of 1 to 5, 1 bieng completely unintuitive and 5 being completely intuitive, how intuitive was this app?
  2. What was the most challenging part of this usability test?
  3. What aspect(s) of this app do you find most appealing?
  4. What are your overall thoughts on this app?
I administered this usability test both remotely and in-person. For people that took the test in person, I recorded their thoughts as they went through the app and took notes. This way, I was able to get qualitative data while achieving a level of quantitative results.

Using Maze results to spot problems.

In Maze, the tasks I gave users are called “missions” and above are the results. A direct success means the user completed the task in a way that was intended. An indirect success means the user eventually completed the task, but either did it unintentionally or made at least one mistake first. And giving up is what it sounds like.
The results made it clear that we could improve upon all aspects of the app. But one mission that stood out as particularly problematic, “Search for an article” forced us to look closely at our search feature. As shown below in the heatmaps, users had no problem finding the search button. But when looking through the results for the article they were tasked with finding, many struggled. As shown in the heatmaps, people clicked all over the place. Because of this, we knew that we needed to make the search results easier to read with less options. Although Scott might want control, if he can’t find what he’s searching for it’s not worth it.

Going through the user interviews.

Going through the voice recordings and open response answers, I made an affinity map to see if I could find some trends in the qualitative data. From what I could gather:
  • People had trouble with search results
  • People didn’t like the wording on various buttons and filters
  • People didn’t like how the sorting worked
With all this in mind, we set about to improve our design where necessary.

Icons
We added icons next to the categories to make it easier for users to scan. Icon design was kept fairly minimalistic and light to match with the light-weight serif fonts we used throughout our design.

Search
We changed the search results screen to display articles by category in order of relevance to the search. Users still have the ability to sort the results for articles, authors, or cateogires.

Deliver

Next steps, specs, and more.

Our final prototype along with its specs can be found below. If we had more time, our next steps would be:
  • Another usability test for comparison.
  • Add more personalization
  • Add notifications
  • Much much more

Feed Layout

We created a new feed for both the home page (right) and for each category (left). We designed the feed to look more inviting than what it was on the old app. By adding thumbnail images and creating a more distinct visual hierarchy, we improved the browsing experience.

Improved Article Interface

The new article interface has a more sleek design. Reading, sharing, and engaging are easier than ever. We gave users the ability to share at both the top and bottom of the article.

Search and Sort

Users can search for articles anywhere on the app and view the results in different ways. Searches return results for articles, authors, and categories while organizing the results. Sorting results makes it even easier for users to find what they’re looking for if they’re having trouble.