Cotswold
Outdoor
Look up.
Find your next adventure.
Via Type A Media
The product
A responsive app for an outdoor retailer’s blog. It helps readers find the best county in the UK to watch night-sky shows and events.
The problem
Most clickable content online is flat text or static infographics. Readers rarely interact with it, or stay to explore more of the site.
The goal
Attract attention and clicks across the blog, increase platform use, and give readers genuinely useful information.
Starting from real data
We used the Double Diamond with a client who already had most of the data on their users and visitors.
So we moved straight into the define phase: pinning down the client’s content problems and what readers used most.
Pushing back, then committing
I used Crazy Eights to explore ideas, and deliberately tried not to repeat the interactive map I’d designed before.
My proposal was an interactive table that ranked counties by the category you choose, with an overall-ranking map as an infographic below. The client preferred to merge that idea with an interactive map.
I followed their direction, even though I didn’t think it was the most user-centred option: the blog’s layout limited the space the app could use. Sometimes the constraints matter more than the ideal solution.
Prototyping in the brand system
We tested a basic wireframe of the map first, to see how people would interact with it.
Most components already existed in Cotswold’s brand guidelines, so I wireframed and prototyped at the same time. It had to work smoothly on desktop and mobile. The visual direction: visual prominence, elegance and cleanliness, within the client’s own style.
Live in two weeks
The responsive app was finished, coded and ready to deploy within two weeks.
The client also asked for an infographic of the overall ranking, to draw more attention to the data and give a quick overview.
- Speed
Coded and ready to deploy in 2 weeks
- Format
Interactive map plus a ranking infographic
- Status
Live on the Cotswold Outdoor blog
What I took away
Question the obvious answer
Trying not to repeat the last solution led to a better idea, even when it didn’t ship.
Constraints are part of the brief
The blog’s layout shaped the final design as much as the user needs did.
Disagree, then commit
I made my case clearly, then delivered the client’s direction as well as I could.
Cotswold - Best Night-sky shows
Work for Type A Media
UI/UX Design
⏲️ Duration
6 weeks
Focus on UI/UX Design
Responsive App
👨💻 Role
UI Design
Styleguide Design
📝 Methods
Usability Testing
Competitive Analysis
Research
UI Design
🧰 Tools
Figma
Illustrator
📦 The Product
A responsive app for a blog post of an Outdoor shop called Cotswold with the goal of informing people where is the best county to watch the Night-sky shows and events.
🎯 The Goal
Attracting attention and generating more clicks through a variety of blogs and posts will increase platform usage and provide users with useful information.
🗠 Method
Together with the customer, who had access to the majority of the user and visitor data on their site, we used the double diamond method. Thus, we primarily move into phase 2 of the project, where we helped establish the client's difficulties with content and what was most frequently utilized by users and visitors alike.
🚩 THE PROBLEM
We came to the conclusion that most clickable content on the internet is presented in a flat, text- or infographic-based manner. Rarely does the user interact with the page's content or remain there to read more of the website's material. The same blog posts were updated to include more information and interactive elements.
✏️ IDEATION/UI DESIGN
I used the Crazy Eights method to explore what I might learn from various "crazy thoughts" in order to come up with ideas for this project. I tried to avoid the fact that I have done previously a interactive map and not do another one, I gave the option of doing an interactive table that would show the user the ranking of the county depending on the category selected and then give a map of overall rankings in an infographic below, but the client didn’t like the idea and thought would be better to grab that idea and mash it with an interactive map. I followed the instructions although wasn’t the best user-centred thing to do because the restrictions of the blog post would put the responsive app space at risk, sometimes we need to work with restraints that are over the style guidelines.
For the map, we first created a basic wireframe to test how users would interact with it.
The client requested that this app operates without a hitch on desktop and mobile platforms.
Since most of the buttons and other components were completed and prepared for iteration in prototypes, we began by creating wireframes using the client's brand guidelines. We also adopted a strategy of concurrent prototyping and wireframing because the client needed this done pretty quickly. We did come up with a "wireframe prototype" that would resemble the final piece.
After finishing the initial concepts, we started working on the screens in Figma.
The client had already created the crisp layouts and all the colours. While implementing the brand rules and visual style that have already been created, we mostly adhere to three aesthetic trends: visual prominence, elegance, and cleanliness.
🚀 Deployment
The responsive app was finished, programmed, and prepared for deployment within the following two weeks. In order to draw greater attention to the information and provide an overview of the overall ranking, the customer additionally requested that one infographic accompany it. Below, you can see how it turned out:
I'll provide a link to the finished product below so you can access it and see how it all comes together.
Best Night-Sky Shows | Cotswold Outdoor
