Team: 1 Product Designer / 1 Software Engineer
My Role: Product Designer
Fetch (recently changed to Fetch Now) is a responsive website designed to deliver the user a free and personalized news experience. I was tasked to work alongside a software engineer and provide deliverables through a design sprint.
Upon meeting the software engineer, he had an idea prepped for a direction (for a personalized news feed) and a simple one-page mockup of a log-in page to start.
I looked into the materials he provided and while researching other platforms through exploratory research, confirmed that the idea has not yet been taken.
Subsequently, I wanted to make sure that the engineer would be able to create the following content with his current skill set and he confidently assured me that he could.
I conducted a competitive analysis and had various insights from 3 current competitors (Twitter, Google News, and Reddit). Findings include:
After initial competitive research was completed, it was time to begin setting the identity and brand of the platform we were going for.
I started with sketches using pen and paper.
Sketching out ideas made defining the design direction a bit easier and less time consuming, as opposed to taking on the designs digitally at first.
While sketching, I tried to keep the screenshot of the engineer-created page in mind considering that he had already defined the main concept he wanted to work with.
Throughout this process I would regularly check in with him to make sure we were on the same page regarding the user flow and content I was creating revolving around the news feed.
Along with the sketches, I tried to come up with name variations but did not get far. And truthfully, I ended up getting stuck.
I asked the engineer for name ideas and he came up with “fetch” which was also the main programming function that he would be performing with this platform. I favored this proposal as it made the most sense with our big idea.
Overall, my teammate seemed pleased with my sketches, after having gone back and forth with ideas that did and did not make the cut. Soon after, we were ready to move on to creating pages digitally.
Using the sketches as a base, I began the digital wireframing process to start setting text content and image placeholder symbols.
Such as with sketching, creating wireframe screens is more time-efficient rather than going straight to mockups to set the outline or “skeleton” of your content.
The software engineer and I only had a limited amount of time to work together - we could not afford too much room for error by going straight to mockups from sketching.
I knew that we wanted to have a sort of news feed. I made sure to complete this appearance while having a card area that showed a side menu.
We also needed a screen of the onboarding process, so the user would know how to set up their newsfeed using the news platforms they desired.
I presented my wireframes to the engineer and we agreed on changes that needed to be made:
With these updates, I made the decision to make changes to the design as I progressed with the mockups for better productivity.
With the structure of the timeline I worked with during this particular sprint, it would not have been best if I made wireframe iterations.
These designs included colors and imagery, such as photographs and iconography for a more finished look- as close as we could get to the final appearance.
These mock-ups will then be used for the first round of usability testing.
Using the mock-ups for usability testing will aid in the user understanding the flow of the site better, having visuals to guide them, and to give them a better knowledge of what the brand is about.
I conducted Usability Tests with three participants using a prototype, which included a list of tasks and task flow to make sure the participants were able to perform the different tasks needed to navigate through the site.
I included task success ratings to have a measure of whether the users were successful, were struggling, or failed in performing each task.
Task List:
The tests were overall successful, with each task having at least an 83% success rate. There were no failures. This showed that we were in the right direction for our designs.
To conclude the design sprint, I presented my test findings with my developer and handed him a style tile and final deliverables he would need to create a coded version of the design.
The style tile included font choices and sizes, color swatches, imagery, and UI elements such as buttons and links.
The next steps will include further usability testing of mock-ups based on the developer’s coded site and more iterations for a better user experience of the site.
My teammate had a knack for front-end development and visuals. It was almost like working with another visual designer. With this presented to me, I did my best to adapt to the design direction he wanted to take as well as the design direction that I knew would be best for the site based on user research.
In order for this design sprint to be successful, I had to make sure that check-ins and feedback were constant. It can be easy to zone in completely to what you are working on as a designer without check-ins with your developers.
However, a product is truly only as effective as the designers and developers that worked on it - a true partnership with excellent communication.
Since the design sprint, my teammate has been able to successfully place the site live online with an updated name to “Fetch Now” while also making further updates. I am happy with the coded site that resulted from my designs as it did not progress too far from my deliverables.
fetchnow.org
Special thanks to Arya Ziai, the software engineer I had the pleasure of working with.
