Initial sketches
As part of my MA in User Experience Design, I completed a module called UX Design.
This blog post was originally published as part of the reflective piece I wrote throughout that module.
Having spent a lot of time considering how to design the information architecture (IA) of Roundabout’s website, I had some ideas that I was keen to sketch out.
Designing for mobile
Roundabout use Looker Studio (Google 2023) to help them understand and analyse their website data. The data collected through Looker Studio suggests that a significant number of Roundabout’s website visitors use their mobile phone to access the site.
Devices used to access Roundabout's website 2022-23
Although their site does work on mobile, this experience could be improved. When designing my prototype, I have decided to focus on users who visit Roundabout’s website using their mobile phone.
Sketches
My next step towards creating a prototype that incorporates what I’ve learned so far, was to create some low fidelity sketches using paper and a pencil (Palliyaguru 2018). These sketches represent the user interface (UI) for different pages of the website.
Home
Key Stat Impact
When carrying out the card sorting activities, statistics relating to youth homelessness and the charity seemed difficult to place. This lead me to the idea of including one key fact or statistic in different places across the site to grab attention, provoke thought or to illustrate key messages.
Jackie and other users
For this project, I am focusing on the needs of people who resemble the Jackie persona. Jackie is a potential supporter and donor for the charity.
However, there is another very important type of user whose needs I need to consider (even if they are not my focus right now): young people who need Roundabout’s support.
The different needs of these users are reflected in the two buttons on this home page:
Donate
Get support now
Menu
Navigation design
IA informs navigation design (Cardello 2014). The results of my IA research and design work have informed how I have designed the site’s navigation. This is reflected in these two menu sketches. They show the:
Proposed primary and secondary levels of navigation
Language used to label categories of content
Design patterns
Design patterns are “a means of capturing useful design solutions and generalizing them to address similar problems” (Cooper et al. 2014:174). Examples of design patterns include:
Log in
Account settings
Expand and collapse
Page headers
Using design patterns for these user interface elements saves time for designers and improves the experience for users.
According to Jakob Nielsen, “people spend most of their time using digital products other than yours” (Nielsen 1994). Because design patterns are used across lots of other websites, users are already familiar with them and therefore find it easier to understand what is being communicated.
This menu is accessed by selecting a burger menu icon and includes an expand and collapse interaction. Both of these are standard design patterns and have been included to help users understand what they can do.
About us
Category pages
From the menu, users can select About us or one of the following sub-categories:
Our purpose
Our people
Our work
If users select About us, they are taken to this page which acts as a home page for everything in this category (Moran 2022).
According to Moran, category pages can be useful for ecommerce sites with large product inventories or they might play an educational role help users understand different product options.
The category page here serves more of an eduational purpose, help users understand what Roundabout does. It is also another opportunity to convey some key messages about what the charity does and why.
However, this is not an ecommerce site and I’m not sure it’s needed. Am I just creating extra work for Roundabout by creating unnecessary pages that will need updating and maintaining?
Our purpose
Ideas and iterations
One of the key benefits of sketching out wireframe ideas for my prototype is that it makes it easy to “try out a multitude of ideas and iterate them before settling on one” (Babich 2016). These two sketches show some of my ideas for the Our purpose page.
The sketch on the left was my first iteration, with a clear statement about the charity’s vision at the top, space for a video showing what they do and then expandable mission, aim and values underneath. The sketch on the right shows an idea I decided to try out: a visual representation of Roundabout’s progress towards their fundraising target.
Gamification
The visual representation of Roundabout’s fundraising progress came from my reflections on feedback I’d received in response to the gamification challenge. The idea is similar to what users might see on a JustGiving (2023) campaign page.
A little nudge
Placing this information, along with a donate button, within the context of the charity’s purpose is an attempt to apply nudge theory. A nudge “is any aspect of the choice architecture that alters people’s behavior in a predictable way without forbidding any options or significantly changing their economic incentives” (Thaler and Sunstein 2009:9). In their book, Thaler and Sunstein give the example of placing apples at eye level in a grocery shop as an example of nudging people towards healthier diet decisions. Banning junk food would not be a nudge. So my hope in the placement of the progress indicator and donate button on the Our purpose page is that visitors will be more likely to donate.
Our people
Roundabout is a charity which is all about people. Every time I’ve spoken to them, it’s clear that they care deeply about people, not just those who the charity exists to support.
I want to emphasise this people-focused, empathetic aspect of the organisation’s personality where possible. One place I can do this is on their Our people page by including plenty of space for photos or videos of their staff, volunteers and everyone else who contributes towards their vision, mission and aim.
Next steps
After sketching these wireframes, I’m feeling motivated and keen to develop them further using Figma. It’s tempting to skip ahead to that step, particularly since I’m feeling a bit behind where I’d like to be for my prototype. However, a better next step would be to get some feedback on these sketches first. I need to test early and test often as this approach will result in a more effective prototype (Coleman and Goodwin 2017).
Reflections
What went well
In one of the first blog posts I wrote for this module, I reflected on feedback I’d received for the previous module. I was encouraged to use sketches more to communicate my ideas. This is something I’ve been practicing throughout the module and feel more comfortable with now.
Creating sketches that put my user flow and IA research into practice has helped me to work through and clarify my own thoughts. As my ideas became clearer, I was able to rapidly iterate by erasing and redrawing until I was happy. (Palliyaguru 2018)
What could be improved
I’ve only sketched part of the user flow. If I had more time, I would have sketched this out more thoroughly. However, I think that what I’ve done is enough to be able to gather some feedback and develop it further in the next iteration.
After creating these sketches, I found an article on the Nielsen Norman Group site which focuses on ways to encourage donations from visitors to charity and non-profit organisations’ websites (Nielsen Norman Group 2023). I wish I’d spotted this earlier! But the benefit of using an iterative design process is that I can read it now and look for ways to incorporate their advice in the next iteration.
Future plans
The process of sketching out my ideas has helped me realise that I actually sketch all of the time at work. This and the sketched notes I’ve been creating while reading and watching the course content has given me a reason to practice and develop my confidence in this area. I’m keen to continue doing this and I’m really excited about:
Further developing my Figma skills
Introducing colour into my designs
-
BABICH, Nick. 2016. ‘Everything You Need to Know About UX Sketching’. Medium [online]. Available at: https://uxplanet.org/everything-you-need-to-know-about-ux-sketching-4ab8e66902e [accessed 7 Apr 2023].
CARDELLO, Jen. 2014. ‘The Difference Between Information Architecture (IA) and Navigation’. Nielsen Norman Group [online]. Available at: https://www.nngroup.com/articles/ia-vs-navigation/ [accessed 22 Mar 2023].
COLEMAN, Ben and Dan GOODWIN. 2017. Designing UX: Because Modern Design Is Never Static. Richmond: SitePoint.
JUSTGIVING. 2023. ‘Join JustGiving and Show You Care’. JustGiving [online]. Available at: https://www.justgiving.com [accessed 23 Mar 2023].
MORAN, Kate. 2022. ‘Traditional and Hybrid Category Pages’. Nielsen Norman Group [online]. Available at: https://www.nngroup.com/articles/category-pages/ [accessed 7 Apr 2023].
Nielsen, J. (1994, updated 2020) ‘10 Usability Heuristics for User Interface Design’ [online], Nielsen Norman Group, 15 November. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/Links to an external site. [accessed 6 April 2023]
PALLIYAGURU, Chanka. 2018. ‘Basics of Prototyping’. Medium [online]. Available at: https://uxplanet.org/basics-of-prototyping-1a4106e12c0e [accessed 6 Apr 2023].
THALER, Richard H. and Cass R. SUNSTEIN. 2009. Nudge: Improving Decisions about Health, Wealth and Happiness. London: Penguin Books.
Thank you for reading.
