Websites and web applications I create are powered by a variety of tools including PowerBI and Wordpress.
These websites incorporate vector and graphic components designed in Adobe Photoshop and Illustrator.
After establishing user requirements through focus groups, interviews and research, an accessible web component library is designed with supplementary documentation. I then use these foundational "building blocks" for building a prototype in Figma.
Prototypes are tested with users through two methods: an A/B test (comparing the "before" and "after" user experience) and a usability test (identifying any "pain points"). Additional iterations of the prototype are subsequently refined.
I have designed and developed websites for a wide-range of clients from both public and private sectors, in both an occupational and private capacity. As a result, I must take user testing, Web Content Accessibility Guidelines (WCAG) compliance, General Data Protection Regulation (GDPR) and search engine optimisation (SEO) seriously.
Secure sockets layer (SSL) certificates and other security measures are also provided to ensure that websites cannot be compromised by hackers and spammers.
This means that I am not only utilising conventional graphic design when creating websites, but I am also incorporating an ability to amend and manage cascading style sheets (CSS) and other forms of front-end code.
West Midlands Combined Authority
The West Midlands Combined Authority (WMCA) is a group of local authorities in the West Midlands working together to make the region a better place to live.
For the WMCA, I supported the development of two PowerBI dashboards that are compliant with UK accessibility regulations.
The first dashboard, the Inclusive Growth Toolkit (IGT), enables local authorities to assess their own levels of economic growth.
The second dashboard, the State of the Region (SOTR) dashboard, compares socioeconomic metrics across different local authorities. This dashboard has since been built further by the WMCA and is available through their website.
I designed both dashboards using Kate Raworth's Doughnut Economics theory. This theory suggests that economic growth should be measured holistically using several metrics, including - but not limited to - climate resilience, power and participation, and education and learning.
All elements of both dashboards have been considered to detail, with readable and sufficiently contrasting buttons, charts and other user interface (UI) components that contain "alt text" attributes to enable screen reader narration.
Furthermore, icons for buttons are deployed in a consistent manner across the two dashboards, and have been user tested to ensure that they intuitively convey the meanings of their associated actions.
State of the Region dashboard multidevice view
State of the Region dashboard colour palette
For the SOTR dashboard, local authorities have the ability to deep dive into various metrics, and explore these metrics by year, as well as by local authority.
They are presented with two data visualisations: a regional map visualisation and a bar chart visualisation. Both visualisations are annotated with metric numbers either on hover (regional map view) or instantaneously (bar chart view).
The entire application is keyboard navigable, and the bar char visualisation is therefore useful for those with dexterity issues who cannot use a mouse to hover over segments to view results.
Other user experience (UX) enhancing practices I've deployed relate to text formatting. Font sizes, spacing and sentence casing have been optimised for readability, and various self-help options are available for explanatory purposes.
Finally, data visualisation filters are ordered in specific ways to assist users. For example, UK regions available for selection are ordered from northeast to southwest.
Succeeding filters do not open unless the preceding filter has been selected; this ensures that only the metrics that are subsequently available for viewing are displayed.
All filters are numbered to convey sequence, and users can reset all visualisations if they make a data input error. If they reset the filters, a message prompt is displayed explaining why visualisations are hidden.
Fresh Fez
Fresh Fez is a vibrant food service located in Warwickshire. I set up the company to enable my mother to serve traditional Moroccan food in a convenient grab-and-go format.
The helped build the business in an organic and holistic manner, from carefully selecting a memorable and meaningful business name, to organising focus groups with the intent of determining menu options and pricing.
I carefully analyse sales data to prioritise financially viable products for our website and menu offerings.
The website and all marketing materials have been designed with both accessibility and sales conversions in mind. The UI prioritises the most sought after information, ensuring that visuals are highly contrasting and engaging. This conveys a more premium feel for our intended market audience (identified through market research and business analysis).
Fresh Fez loyalty card (front)
Fresh Fez loyalty card (back)
Audhali's Consulting
Audhali's Consulting multi device view
Audhali's Consulting colour palette
Audhali's Consulting (AC) supports customers through their entire food manufacturing and fast-moving consumer goods (FMCG) lifecycles. Its three main areas of food business expertise are operations, Halal-compliance, legislation, and finance.
The logo uses a user-friendly font with pleasant "serif" flicks, and combines the two letters "a" and "c". As AC is a consultancy that works closely with customers in the UK, I designed the logo to represent the merging of two entities into one. Furthermore, the right side of the logo intentionally appears to "cradle" over the left side of the logo.
As the budget and timeframe for developing the website was limited, this client requested a simple and effective website based on user testing and tracking data. As such, the website has been designed with the goal of converting users from the landing page to the consultation inquiry page.
For more examples of websites I have developed, please don't hesitate to contact me.