Part 2. Prototyping & UI
intro
This is the second part of a UX/UI editorial design case study. If you missed the first part dealing with the UX process, here it is. In this article, the second in a series of three, I go through the prototyping and UI processes that culminate in the final desktop and mobile prototypes for this particular design sprint.
Well, here we go again…
grid structure
Following on from developing the brand attributes of the editorial, now named Avarice, one point of disagreement was in structuring the content; answering the question “where should we place what on which webpage?” As we were designing a responsive website, and consistency is a core principle of design, it was important to create a truly responsive design pattern: a structure for content that would remain consistent no matter which device it was shown on.
peaking over shoulders
In order to get an idea of content structure and hierarchy in online editorials, we went back to our pool of existing competitors, to see what information we could glean from them.
Forbes’ homepage, shown above, gives you an idea of how varied a grid system can be in an editorial (be it physical or digital), looking clean but busy. Take a look below at the sizing of the various rectangular elements that make up Forbes’ homepage…
So, this must be designed with purpose, right? Designers know that alignment makes things easier to read, and similar styles and sizing cause the reader to group objects together, psychologically speaking. By sizing the various categories visibly differently, I suspect that the designers here are letting the user know “this thing here is unrelated to this other thing there.”
Personally, I wanted to delve ever deeper into the layout hierarchy of content, but lacking time to do so and needing to make rapid decisions, we agreed to make the layout as minimal and uncomplicated as possible. We, eventually, found inspiration beyond the realm of editorials…
To stay user-centred, we referenced our research once again. Now, we considered one of our main points of user feedback, the mantra “keep it minimal.” It was important to allow our design, including the grid structure, to be guided by this. After sketching out various ideas, we came together and decided on a simple, Netflix-esque grid system, with future iterations to be based on feedback from competitor research and from user-testing.
categorisation 2.0
content analysis
Carrying out a quick feature analysis, we assessed how existing editorials categorised content. Although the names of everything varied from editorial to editorial, content was regularly grouped using these general categories:
- Featured
- Most read/popular
- Topic/theme
- Opinion/guest
After short deliberation, we decided that for the first iterations of our responsive website, we would stay minimal and go without subcategories like those displayed on the wireframe below to the right.
prototyping
lo-fi
It was now time to prototype, starting with some lo-fi paper-prototypes. Still facing disagreement over how to act on our user-research results, a major blocker to progress, we decided to split up and each come up with a paper prototype. We then tested the prototypes and observed them together in order for the whole team to receive the same feedback on each design.
lo-fi testing takeaways
Testing with several test subjects provided us with actionable feedback on our prototypes. When testing my mobile prototype for instance, we learned that:
- Article “tiles” (each representing an article) should be narrower than the screen in order to notify the user of sideways scrollability
- Some testers preferred sideways-scrolling through swipe gestures, and some through clicking an arrow
- Using no subcategories didn’t seem to be a problem, however this was tested without giving testers a goal to navigate to e.g. “find xxxxxx article”
make-or-break
The team had now carried out user-testing and had come together to agree upon how to proceed with our next prototypes. After carrying out a feature prioritisation using the MOSCOW method (must have, should have, could have, won’t have), the team still disagreed over what should and should not be featured; e.g. guest comments, tools for investors, guest articles. There was also unresolved disagreement over the layout and information architecture.
With all of us looking to avoid further delays lost in discussion, and seeing that progress would keep on being stunted until we overcame our differences in opinion, I pushed for a stand-up whiteboard meeting in a room that none of us could leave until we were all on the same page.
Using a simple prioritisation system I’d picked up while working as a product management intern, we went through feature prioritisation again, this time with the help of a new space, a big whiteboard and plenty of coffee. Being able to sketch out our ideas on a large scale, and, having all agreed that these decisions needed to be made now, we found new energy in the new space and format. By the end of the meeting, we finally found ourselves on the same page for the first time.
UI — user interface design
Having been reassured by our developed method for avoiding time-wasting, we split up to start attacking the project’s UI. If you’re not sure what user interface design is, you’ll find a basic summary here.
mood board
Each member of the team assembled a mood board that we then discussed and combined in a sit-down meeting. The final product is shown below:
typography
Likewise, below you can see the typography explored and compiled by the team that we felt suited the branding of Avarice.
style guide
In a rush to deliver to the deadline, we executed the UI without a proper style guide: a big no-no, and on reflection something that may have cost us time in the end. Therefore, I’ve retrospectively gathered the project’s symbol and text assets, which featured variations of Helvetica Neue, Alte Haas Grotesk and IBM Plex Sans and produced the following style guide:
design split
In the final stretch of the sprint, with only one night to go before presenting our work, we grouped and divided up the workload.
Considering there was so little time remaining before the deadline, I was of the opinion that we should focus our efforts on producing a well-polished high fidelity (hi-fi) desktop version, fitted with a few nifty animations. In doing so, due to time constraints, we would have to sacrifice the mobile version. Our researcher was of a similar opinion, but my other teammate countered that, as the brief detailed a responsive website, we should at least produce a desktop and a mobile version.
Not really convinced, but with no energy left for further debating, I yielded and continued to work on our hi-fi desktop designs, while she began working on hi-fi mobile designs. Our teammate started to prepare the presentation. Although the two of us working on UI checked in with each other frequently, it can be seen that in the final prototypes there are numerous inconsistencies between desktop and mobile, and also a few between the mobile screens.
Apart from the decision to proceed with producing a mobile prototype, which can be debated for or against, these inconsistencies were a result of poor time management and subjective taste differences in design that went unresolved.
hi-fi prototypes
homepage
next steps for homepage
- article tile hover-state: more article info with hover action (incl. featured article)
- featured article fold-down animation with click action
- consider solution more consistent with brand for using capital letters (e.g. countries, companies & names)
- advertising integration
article page
next steps for article page
- create variations with smaller header text, keeping in mind that the large text currently used for e.g. category titles and article titles are better for accessibility
- show the user where they are according to the site map, e.g. “business” highlighted in header for business article & topic tags/hashtags used for navigation to related content
- sharing tool design & user-flow for sharing content
- related articles integration into article page
- in-article links
- photos and videos integrated into article page
- advertising integration options
- floating progress bar or similar solution to show users where they are in an article
mobile homepage
mobile article page
brand features
lower-case
If you scroll up and look at the text section of the style-guide, you’ll see that most of the titles are lower-case. This was a decision I pushed for in order to make the brand communication less formal and dull.
coloured categories
A teammate came up with the idea of assigning each of the three topic categories a colour from our style guide, aiming to differ enough in hue to be noticeable for most users but still complement each other (although accessibility for colour-blind users was not considered in this case).
feedback on hi-fi prototype
header size
A good point of feedback we received from several people after our presentation was that the header took up far too much real estate (space on the screen). Due to the time spent on the UI design stage of the project being so limited, this was something that had been missed. Taking up half the screen was bold, but probably too bold and impractical for this sort of online magazine. Comparing header sizing to other online editorials proved that our design was multiple times larger:
header fix
With very little time left for designing the UI, the end result was rushed, with no time to seek feedback on which to act and iterate. Post-presentation, other feedback on the header section included:
- improve symmetry of elements
- reduce and reorganise icons
So, in the end, we produced just two screens for desktop and two for mobile. Considering that the team was in disarray for the first 3 days of a 5 day project, that we managed to produce a concept prototype with an identity is at least somewhat gratifying.
disclaimer — rights to all stock photos and mockup templates belong to their respective owners.
takeaways
management and moderation
Having never before worked in a team without a dedicated leader, I was surprised by just how ineffective we were at decision-making. This further impressed upon me something that most of us have considered at some point; the importance of leadership and management. Having no leadership might sound empowering, but in this case created a power vacuum in which people tended to fight for their ideas and for control, regularly grinding things to a halt.
An alternative to having a leader is to follow clear processes that are followed correctly (see note & vote and time limits below). The team should include a moderator to ensure that these processes are carried out properly, and a decision maker that makes the final decision when required, in order to distribute power more evenly.
importance of stepping-up
This leads me to the next takeaway… When there’s a void of leadership and progress is stalling, you might need to step up to fill it.
decision-maker
In this project the importance of having a dedicated decision-maker involved in the process was made apparent. In the UI stages later on, things progressed far quicker as there were only two people to disagree with each other (our researcher was inexperienced with visual design and thus had far less input in this stage). In the phases of the project up until prototyping however, we could have moved a lot faster if we’d have had a decision-maker forcing us to move on whenever we got stuck.
note & vote
There is another commonly used method for cutting down time lost due to indecision and debating. This calls for all participants to write up the options generated by an exercise like “How Might We?” onto sticky notes, stick them up on a wall, and vote on the options using a limited number of stickers given to each team-member. In this project we’d used this “note & vote” approach a few times, but had been sucked back into debate over which path to follow.
Next time around, I’ll know to use and trust in this method more thoroughly throughout the “define” stage of the design process, where we essentially establish the goals for the sprint.
documenting the process
During the project and the weeks thereafter, I lacked the time to write this article and do it any justice. I therefore have written this more than a month after the project had taken place. Something I’ve learned while writing this article is the importance of properly documenting the process at the time on camera; absorbing information from a photo is so much quicker than the equivalent in text notes…
roadmapping and project management
Even though it was difficult to predict how long each task would take, given the issues the team faced, project management could have still been much stronger. Having too little time to provide an outstanding set of prototypes at the end was a symptom of poor time management and project management. This could have been somewhat curbed by assigning the role of project lead to one of the team, although that could have led to its own issues if that person was ill-chosen.
time limits
After reflecting a lot, and studying the design process once again, I’ve realised a solution to the already-discussed issues of decision-making and time-management that we faced. Time limits. Although it might feel stressful at the time, setting time limits for each task should prevent them from going on for too long. Then it’s simply a question of finding the right moderator to enforce the time limits.
asset management
It turns out it’s pretty damn useful to save assets in appropriately titled shared-folders so everyone can access files easily… OK, this is a no-brainer, but can be easily missed at the time if you’re already ankle-deep in issues. It also says a lot about the strength and communication skills of a team if their Google Drive folder is a mess with folder names no one understands.
next steps
advertising solution
From our survey results, it was learned that respondents were frustrated with disruptive advertising. It was obvious then to exclude disruptive advertising from our designs, but at the time, we didn’t focus on coming up with an ad solution that would reduce user frustration. Without having a client to work with, business goals e.g. revenue models, could only be based on research and assumptions. Ideas could nonetheless be user-tested with this goal of reduced frustration in mind.
stronger brand identity
In order to create a stronger identity adhering to our developed brand attributes, bolder usage of the brand’s bright yellow primary colour should be applied. Users should be made aware of which site they are using without it being obstructive or over the top.
IA — categorisation
In this part of the project we eschewed sub-categories in order to present an MVP and stay true to our “keep it minimal” design mantra, adopted from our user research phase. A next step would be to do further user-testing, tasking users to see how easily they can find a specific type of article when navigating from the homepage, for instance.
add category screen
Create screens for user flow utilising primary navigation and secondary navigation: e.g. homepage > business page (more… links)
style guide
In order to make the design more consistent, completing a true style guide is a priority for the next iteration of Avarice.
reduce header size
As discussed in hi-fi prototype feedback just above; the next iteration should have a reduced header. To maximise real estate on the screen, while keeping navigation function uninterrupted, the header could:
- remain fixed in a narrow state
- minimise as a function of scrolling-down action.
minimalise UI
It sounds a bit like a made-up word, but essentially, I mean that everything in the design needs to be made cleaner and minimal.
images + video in-article
Allow for browsing of images with carousel at top of article or other solution. Also integrate videos and other formats within an article.
video + audio content integration
According to research, users wanted more than just text as a format. Videos and audio content should therefore be integrated into future screens.
featured article animation
One of many things that had been set aside as low-priority for this design sprint was an exciter; the animated transition between clicking on the “Spotlight” article and it giving the user the feeling of unfolding into the article rather than redirecting to another internal page.
what do you think?
Got something to say about this article? Love it so much you want to cry? Disagree with everything? Leave a comment or shoot me a message :)
Thank you for reading. You are a beautiful snowflake and this is a fact.
Stay tuned for the next in this mini-series: Part 3. Avarice 2.0-the update.
