Introduction
Sarah Kay is my favourite spoken word poet, and I chose to redesign her current website
http://kaysarahsera.com/
out of appreciation for her content. In addition to spending the majority of the year travelling and performing, Sarah has delivered viral TED talks, produced podcasts, shorts, and videos.
Through the user-free method of heuristic evaluation (referencing Jakob Nielsen’s 10 usability heuristics), I am redesigning for better usability.
Design Problem
When loading http://kaysarahsera.com/ , users are faced with the image (right) to begin exploring.
Main issues:
-
Lack of navigation
-
Time inefficient if users do not develop memorability with certain images
-
Blog page design - adding information and menu items over time has overpopulated the page.
Visual observation:
-
Minimalist design evokes Kay’s honest and thought-provoking style of poetry.
Design Brief
Recently, she also launched an online store (https://shopsarahkay.com/) for merchandise (left).
Wireframes
Using Adobe XD, I developed 5 wireframes — “homepage”, “about” (condensing about information, events, news), “attend a show”, “poetry” (condensing ‘read’ and ‘videos’), and “contact”.
Unlike Kay’s original static home page, this redesigned website is a continuous scrolling page.
Navigational Flowchart
Shows different user decisions, inputs, and processes leading to the separate pages, eventually linking back to homepage.
Navigation flow through pages (prototyped on Adobe XD)
User Testing
User 1
Image above showing user interacting with ‘homepage’ (left), and explaining aloud her thoughts
User 1 thought aloud about how
-
she preferred to navigate immediately to the desired page, instead using the menu in the bottom left corner
-
Appreciated how ‘about’ came first
-
“It’s good that, as soon as you know a little bit about her [Sarah Kay], you can interact with tangible events. It [the events page] draws you in immediately, and just legitimizes her as a human presence.”
Desires
-
Back and forward button to be available on every page, more convenient and intuitive
User 2
User 2 thought aloud about how
-
“I would still prefer for there to be a menu on every page (referencing the bottom left menu on the homepage). It could be translucent and not as obvious, but it would allow for better searching.”
-
"I like the text overlay that accompanies each gridded box when the user hovers over it."
Desires
-
See the poet’s most popular videos and writing, suggesting that while chronological order is straightforward, it might not be what users are most excited to see.
-
A small play icon inside the overlays.
Visual Redesign & Incorporating Feedback
Design Decisions
-
Develop the “about” and “poetry” page to high fidelity.
-
Merged visual identities - Using the original ‘Yanone Kaffeesatz” font, ‘Helvetic Neue’ as body font.
-
Created a color palette and textured background based on her anthology collection “No Matter the Wreckage”
-
Different gradients and opacities of the blue to create depth.
-
-
Back and forward buttons for each page
For “events and news” (right), I tried to balance proximity and simplicity, creating a small preview for upcoming events and recent news as a primer to “view” more if the user so chose.
-
For ease of viewing, added poem as an overlay with ‘play’ button to indicate to users that this is viewable content when they hover over it.
-
Employed a grid for organization.
-
Minimalist design that relies on buttons and the user hovering over the page’s contents.
Responsive Design for iPhone and iPad
Ensuring prototype is dynamic on phones and tablets (eg. struts and springs, condensing content)
Takeaways
-
Giving a background texture adds another dimension of contrast that brings out visual elements.
-
Adding brief interactions whether on hovering or in smaller user actions is more sensitive to a user's experience than well-programmed transitions that become grand but distracting.
-
Have the utmost patience with users -- allow them to freely guess and test out certain features. Pay attention to when they interact with or are curious about elements you have not intentionally designed or missed. These are precious moments for detail and thought.