Location Games - STRIDE
Re-Design, Branding, and Marketing
The STRIDE app (Walk, Run, Capture) on iOs and Google Play was relaunched in March 2022 with myself being responsible for creating a multitude of content for its reworking into the version it is today.
What is Stride?
Stride allows runners to track their activity on a virtual map, much like any navigation software. Like most fitness apps, Stride also showed relevant stats such as run time, pace, splits, and showing your run replayed in various data formats. Stride does one thing new to add to this which is wherever you went on a run or walk, you could end up claiming territory on the virtual map, similar to old board games like Risk, Settlers of Catan etc.
This map would be split into hexes, and a lot of data will be represented in this format going forward; the key hex statistic is whether or not you own it, as this state was never permanent. Other variables included if you ran over a hex, encircled a hex, tied it, and other statuses of a long list of possibilities. Stride also introduced Team mechanics where you could join up with people to effectively improve your total hexes owned, the scoring metric for the leader boards.
In this Stride had the challenge of appealing to a combined group of people who wanted to exercise or would be encouraged by an external medium, and those who felt encouraged by the game mechanics or felt it made their run more competitive. At the same time, steps had to be made to make sure that we had enough substance like encouraging mentions, achievements, and visually appealing aesthetics.
Responsible For The Following Reworked and End-to-End Projects
- Summary UI (rework)
- End of Run Screen (end to end)
- Feed Page and Widgets (rework)
- Facebook Ads (end to end)
- Promotional Video (end to end)
- Emails (end to end)
- Website (end to end)
Summary UI
Previous Layout:
The previous layout which did not show everything the team wanted to show, showed some of its key metrics.
Dissection:
What we had was a simple working model for data to be shown at the end of an activity. The feedback had told us that it was not clear enough and did not have much visual impact. There was a good hierarchy of some weighted sizes but not in variations of colours and the running data had more weight; which was deemed not the focal point. So my task was to break it down into a widget of stats, with the freedom to articulate some design changes but in keeping with font scales, colour palettes and branding colours correctly. The point of colour in particular was re-discussed after this project as something that may be changed.
Investigation:
Researching the competition and wider horizontal view of app summary screens I concluded we had some things to potentially follow:
- Use the same font for numbers, and should be kept to a minimum if changed (various meanings of number fonts are varied in sporting and fitness apps, however)
- Weigh the scale of importance on your primary stats and represent them in order
- Keep things together that are related to each other
- Provide moments of celebration, enhance achievement or victory
- Keep meaning and definition consistent
- Provide a visual definition that makes lots of data easier to digest
Creation of concepts:
With our data on what was important, not available to us, our discussions lent us to believe that our key areas lay in the 6 hex stats we believed to be the best. Followed by a breakdown of player interactions. The rest fell into place around this list and the hierarchy of where these different data blocks were determined by the team.
Refining:
Once our wireframing was complete we went about mocking up some neater examples and refined my design into a form where we could arrange it and start to write out the copy which would be used in this version.
Iterations:
Iterating upon this we had the focal point of the header block of hex data to consider, it is here where the iterations expanded the most while the rest was largely accepted quickly. As well as investigations into a dark background version to align with some existing Branding, though the team said this was not possible at this time.
Components and Exploration:
The team voted to continue with the Light UI, with the intention of making changes further down the line into making the whole app like this. I also explored the icon use in the header block as I felt the signed off version fell a little short in giving the impact of the summary. Working to better visual represent it which could be released in a later version.
Signed Off:
This is the signed-off version, using what data we had and with the designs, we were enabling. We did not resolve some of the design processes when it was transferred to production in development - some bugs were fixed, though some designs did not go through to the final it was not considered detrimental to fix.
The white background would have worked with line spacers, though the branding was to not use it, and so in hindsight, it would have been better to use a darker background and lighter white boxes to display content which I carried out later designs. This was true with a long list of other researched content which used a grayer background with white blocks for displaying content.
Continued Iteration:
Having worked throughout the few months at Stride I developed a couple of different iterations based on a few principles that I believed we could have better followed: using established colour branding to separate content, different weighting for the important stats (at a glance effect) and bringing more content together. As well as aligning more to the new Feed - as the Feed sign-off deviated from the Summary. The Summary UIs established weighting structure was dismissed from the Feed design which caused a slight deviation of the brand, thus reverse engineering may have to happen.
- Clearer hierarchy and visual aesthetic
- Dark mode variation for the mirror Branding of the Social messaging
- Mirroring the new design following the Emails and Feed
End of Run Screen
No Previous Layout:
We needed to let players have a moment so we could upload their data and at the same time show them some baseline stats.
Creation of concepts:
I had a short window to quickly draw up some concepts along the lines of the UI that we had for the end of run Summary above. However, it had to align with the darker notes for the UI.
I put some time into another part of the design we wished to go into, but never developed and was started in between the Summary and this End of Run screen. This was the hand-holding experience for the end of a run, effectively a visual showcasing of what happened in their run. It helped me carry over ideas to this quick job of creating a holding screen.
I also worked on a brief transition of screen elements for a more animated display.
Signed Off:
The version that was signed off. This design was chosen as we did not have to work in any animation and the team felt the main identifiers would be the constant metrics shown during a run, which should be shown here as well (hexes, pace, distance, time).
Feed Page
Previous Layout:
The previous design aligned with the previous brand goals of flat design and using spacing to interpret the connections.
Dissection:
Similar to the Summary UI, what we had was a simple and working model for data to be shown at the end of an Activity. The Activity Widget; is a concise block of information about an activity, that anyone you followed via friends or teammates could see their recent activities. A smaller block would also show anyone who was not on that list, which we called a Rival, that interacted with your hexes would show up here too.
What the Team surmised was it was not used enough and that its elements were not giving the users what they needed and could be improved visually. We had a similar hierarchy of weighted sizes but not colours and every bit of data had the same weight. So my task was to create a compelling feed widget for some stats to be in, with the help of the team we derived the ending list of stats to show in this widget while some were broken off into other feed sections which we called the "Meta"
Investigation:
What research I did had shown that our data could be better displayed using a broadly similar model to Twitter and Strava, this organically came about when wireframing existing content and seeing if any mirroring comparisons could be drawn. This I felt formed closer to these two, than any others. While Strava had the data and imagery, we had much more data to display. Twitter had a visual hierarchy that helped us align more with a feed feel. I also looked into timelines of apps, feeds of notifications, and examples of leaderboard changes. These included LinkedIn, Pokemon Go, Kickstarter, AllTrails, Duolingo, and a few others.
Creation of concepts:
With regards to making the feed more engaging and having a clear hierarchy place for hex stats and running stats.
Refining:
Refining the concept to allow variations and alternative angles for the feed with regards to who the feed was about, and what effects it had on the player who viewed the feed. I created various outputs which gradually became the below sequence, using internal feedback to build a style that worked with the team's vision and aligned with the Summary UIs weighting and also something that could be adapted by the Summary UI in refining it as well. We then had another internal discussion where this was changed again to another variant branch, which decreased some elements in the hierarchy. This was done as a space-saving mechanic to allow the image to be the focal point, more so.
Final Flow:
A diagram of potential variants for version 1 final
Additional Considerations:
Adding in Reactions and States of new or old notifications as well as a multitude of coloured default images of hex maps to use in case a screenshot of the replay would not be possible.
Iterations on the Feed Meta:
The iterations of this were pushed to the "Meta" which I mentioned earlier. The Meta were small sections of data that the feed needed but not precisely inside the Activity Widget. The design task was to create Templates to reuse again and again for ranking changes, warnings, or system notifications.
These other forms instead of activity also had to be sketched out with multiple variations. Created and filtered down into a cohesive form, while sticking to a set of standards for the brand in identifying colours for the variety of states a notification would be in. It was here that some colour would be added to our palette as we had previously discussed the use of more colour.
Review iterations and New Final:
Here we had some discussion about barriers of design to overcome in which direction we should put some of the weightings behind. It was ruled that we would build a new standard. What we therefore designed was something fit for the Feed in isolation, and have now the possibility to go over the Summary UI to inherit these new styles. The username block, for example, title removed and minimised info.
Signed Off:
A signed-off version of the final Activity Widget, plus the signed-off versions of the Feed Meta.
Facebook Ads
Dissection:
What Stride had were ads explaining the mechanics from an app store perspective, while showing what the team felt was the most impressive side of the app which was the map. The previous ads also had their text in the same spot without animation or apps between changes and so it became hard to know when something changed because it was so subtle and the map image in the center took up all the focus. This was even true for some mobile apps like the most advertised app at the time of testing. Hogwarts school game app; it had text and logos in consistent areas at the bottom that while the main animation was going on I never spotted them, until about the 4-5th replay.
Investigation:
The variance of ads on Facebook wherein two camps that related to an app and the fitness element, alongside the game aesthetic it was difficult to find a happy medium. However often in fitness apps, being a person who wants to get fit our core audience, they often used live-action footage or stills. This coupled with some showing the app in different screens such as Komoot or Strava, we had an amalgamation of Duolingo and Sweat at first. To find the right side to steer towards, we decided to find which story appealing to our core structure of Stride which was a fitness app that allowed you to be competitive. So live-action and human emotion were chosen to best represent that, rather than app functions such as Duolingo or Komoot did. Given this was a new type of ad we were thinking of doing and not being able to have variants we had to be concise with the message as well.
Breakdown of other ads for Facebook
Creation of concepts:
I made little short stories of how best to represent the features we had, but in terms of short digestible sections. I started with a few to represent these while incorporating the map in some way.
- Teamwork and Teambuilding
- Rivalry
- Landmarks
- Abstract animation
And out of the process of wireframing, it became clear to show a user making a run and it appearing on a projected map with hexes. We incorporated a player, the abstract visuals and showing that area could be taken and retaken with reactions, emoji with two players reacting to each other.
Initial concepts of the 15 second video
A few refining scenes for some different styles on the scenes.
Refining:
The refining process was to get a concise message in 15 seconds and so we had beats to hit and refine, the map showing how users interacted with the world and used Stride, and also a human element of competition. I drilled down the core concept enough to have the map concept explained in the territory between users with colour combinations, and showing users running, reacting, and finally our logo and app details at the end.
Here I wireframed the core scenes of the map elements being changed as a player goes over it.
Signed Off:
This would be the basis for the app store video and future website video. Music from bensounds.com, Video footage from Storyblocks.
Stride 15 second promo ad for Facebook
Promotional Video
Previous Designs:
We had some designs from Run an Empire, the previous Location Games game, and from that, we found that it did not perform well. So investing in specific shots in an abstract live action was not an option Instead I used the Facebook ad as a basis to tell the story, but this time with more room to explain.
Investigation:
The best concepts I researched were videos that got viewers involved in the first 3 seconds, without having pertinent information in those three seconds. So it made it possible to showcase some abstract visuals in those seconds with the logo that gave the impression of the idea of what they were about to watch while also not having important info missed. We had to lead users into the concept quickly while inferring its nature. I learned that in animating these concepts, a single piece of information should only be changed at a single time or everything at once, which draws the eye of the user to specific points. This was what failed in the previous designs.
Creation of concepts:
Wireframing this idea of the Facebook ad in multiple variants allowed me to explore in a few ways how to represent that, whether it was a landscape shot with user icons popping up like in RAE, or simply showing in-app footage of multiple users. The back and forth of this coupled with the first draft video shots allowed us to nail down what was the core and what could be explained with in-app footage.
We also used a previous split-screen background for split shots that we previously used to convey the map idea and brand colours. Focal point areas had time to animate while new information would be brought in after completion in these sections.
Refining:
I created a few concepts around telling the story of the two users being competitive, first in loose terms of simple animations to explain sections that were in-app, such as notifications, interactions, and also applying some shots in between for having a user run, and it affected the map, then another user reacting to that and going on their own run, which also affected that user. The cycle complete I could then detail the "extras" that Stride had to offer once the core concept was detailed.
Signed Off:
The full video uses the original 15-second clip in the middle of this theme of competition and affecting the world within STRIDE with other users. An information-heavy add with it synced to the music to allow better retention. Music from bensounds.com, images from Unsplash, and video footage from Storyblocks
Emails
Previous Designs:
One text heavy-based design to work from, so not much in the way of use towards the new release that was t be in 2 forms:
- Subscription Discount
- Weekly Update Email
Investigation:
My investigations of the Subscription were to keep it simple, and I found a lot of examples of this for discounted rates emails where it simply followed the hero image, title paragraph, and CTA. These were pulled largely from eCommerce emails, App update emails, and other re-marketing emails. The main focus was to not overly complicate and shotgun approach as a store might have, but to get to the point and have it read like a short letter.
For the weekly report we stretched out a little more to include ways in which a lot of sites and apps reported on weekly and even yearly stats of users, none more so prevalent than the yearly Strava update, yet we had to make it personal to our brand - which at this point was in between the Summary UI design and the Feed design, so we had not fully articulated the new direction yet. However some good research came out which was to invert our previous design to stand out better in terms of the background and foreground colours Where we had gone for a white background and grey foreground, I found that a lot of research pointed towards the reverse. Originally this was not a consideration for the Summary UI.
Creation of concepts:
I went about creating some blocked areas of content and representing them in a way that created a visual hierarchy of relevant information. My steps included picking the top three stat blocks to choose from, figuring out what would be the different variants (no1 in a leaderboard vs regular), and having that included as the main section. As well as headlining with some baseline stats at the top being clear and separated from the leaderboard stats. These groupings were seen to be the most relevant.
First: Monthly Report
Second: Subscription Offer
Subscription Notification Email
Refining:
The refining process was to create something in an HTML format and the difficult build of email-specific - a few tools were trialed in the output of these but the end result fell short when compiled. We ended up slimming down the design to accommodate for the difficulties of creating it within an HTML editor such as Mailchimp.
Monthly Breakdown Report
Subscription Notification Email
Iterations:
The iterations were mainly of the two different block types and of the sizings and weight of the context, to get the right balance we marked them against the current branding of weighting and fonts to get a proportional representation set up.
Monthly Breakdown Report
Subscription Notification Email
Signed Off:
Currently working on the Signed off variants.
Website
Previous Designs:
No previous designs for the website.
Investigation:
I went through similar designs for a quick microsite and there were a few that stood out as a good match in a few cases, non more so than the Strava, Komoot, BetterMe, Relive, and The Body Coach. All had great systems in place to deliver their message with areas for us to expand into once the site went live.
I was impressed by the simplicity of these sites and their strong Brand throughout which was going to be present in this design from the start. And getting a big focal image for the hero was a must. Bold Branding text, on mobile app shots, areas for social proof, and a block for the main features to shine.
Creation of concepts:
First I created a map for all the "objects" a user would need, i.e what information users would need and how they would get to that information. Then creating user flows with those objects to create clear assets we would need to fulfill those needs. And so, we came up with a simple home page, with links to an archive page of blog material or testimonials page. We would also need a blog/article page layout design.
Then from there the wireframing came in and designated where the data should go in terms of where a block of context should go n the logical order. Refining what content should go in the Navigation, the Footer, and the main page.
Creating the frames for these sections while focusing some time on creating the hero section with an image.
Other Game Website:
At the same time, I was asked to make a banner for their other active game with the same mechanic, Run An Empire. A few iterations based on the current styling on the RAE website but with a STRIDE flair.
Iterations:
Creating from this a header image which eventually had a visible extra mobile shot on the homepage on the web which hid away on mobile view helped to bring a depth into the build, which only came after looking at the tools to create the site. This was due to the developer being called away for jury duty and I filled in to build it. Also working on the variations of displaying the Blog posts with featured major blocks and minor smaller blocks.
Signed Off:
The final Handover version, which I designed with Webflow, and handed over to the dev to upload and to use what elements they needed at the time. The design in Webflow allowed me to see how the elements could work together and the range of scope for automatic resizing and changing of content was what made it possible for me to conceive of how I could design further.
STRIDE: website:
