Personal Project: The Dry Cyclist

Design Process of Making App Design

As I was taking a break from school, I was commissioned by my brother-in-law Mark commissioned me to make an app design for his Dry Cyclist app concept. Here’s how it went:

App Functionality & Requirements

Mark wanted to make an app to provide the fastest way to get ready for a bike ride. The way the app would work is the user would put in the place, date and time, and length of their bike ride, then be recommended the kind of bike gear needed to go on the ride. He already built the app’s functionality, but it does not have a design yet. He mainly wanted this app for himself since he is an avid bike rider, so he was my main audience. Mark does want to publish this app to the Apple app store at some point though, so he would like to make it as commercial ready as possible.

What he wanted from me was high-fidelity design mockups through figma, with colors, organization of information, and fonts. He also wanted me to help him find a way to progressively disclose information about the gear, and put in a way for links to buy the gear online from places like Amazon, and provide a toggle from a list view to a full body view. He also would have liked a design for a weather widget.

Researching Ideas

I went online to get ideas from other app designs. I looked up bike apps, exercise apps, buttons, and such, but didn’t really land on a design that really inspired what I would be doing for the Dry Cyclist, but this did get my gears turning on how I was going to go about doing things.

Two of Mark’s Mockups in Figma

What helped was when Mark gave me some sketches, and thoughts he had as to what he thought would be good. He also gave me his own mockup from figma that directed me to an updated design that he could use.

Luckily, this was the idea fule my brain needed, My next phase was to improve on what Mark had, and see if I could make the shopping links hidden in some way.

Sketched Wireframes

I wanted to start off with some wireframe sketches so I could get started. I based them off of the design Mark gave me:

The plan was to redo the routes and plan for progressive disclosure of information about the clothing and gear recommended for the bike ride. I added his idea of a splash screen, and didn’t draw my idea for the full body view yet, but this had the basic information I wanted to make sure was on the app.

Design Assets

For this project, I decided to use Illustrator and Sketch, since I was familiar with those programs, and could export Sketch files to Figma files for Mark to be able to view.

Colors:

What I needed to keep in mind when creating a color scheme for this is that Mark is color blind, so I needed to make sure that the colors I was using would make sense. My sister Monica recommended the orange (#FFAB40) that was on the mockups Mark made, so I decided to stick with that. I did want to use a blue with it, but after putting some blue next to the orange, I decided it would be best to just stick with different shades of the same orange color., with the title page having a light blue title.

Main colors for design

Icons:

I mainly needed placeholder icons for this design since Mark wanted me to focus on design layout, so I made some basic icon placeholder designs in Illustrator for the settings gear icon, and used basic shapes in Sketch to make the weather widget icons.

Weather and setting icones

Body Silhouette:

I found a royalty free JPEG image of a standard body silhouette to use for the full body page on the app. I found this image on clipartbest.com, and checked out the site to make sure it was legit before downloading. When I looked up the image later, I found out that the silhouette was removed from their library. I later found it on Shutterstock, but it still was marked royalty free. For now, I marked the body image I found as a placeholder image until we can find one that we can trust to use when the app is actually published on the Apple app store.

Fonts:

I searched for fonts to use as I was building the design, and found a good mix of fonts, including COCOMAT for my titles, and Comfortaa for headers and body text. There was an issue using COCOMAT as a font choice though. It looks like Sketch only purchased the rights to use COCOMAT’s letters, and not numbers and symbols. We later learned for commercial use, COCOMAT would have been very expensive to use. So instead, I substituted all title text with the Comfortaa which was free from Google Fonts’ Library, and changed the other text to use Century Gothic. Mark and I will have to look into the licensing for Century Gothic a bit more because it does look like it would need to be purchased for commercial use. What we choose if Century Gothic doesn’t work out will still be in the range of sans-serif font types.

App Design

I used the Sketch program to put together the main design for the app. I stuck somewhat closely to my wireframes on paper, while rounding out some of the design, and making it smoother.

Splash Screen:

For the splash screen, I took the bike image from Pixabay, a site I use often for royalty free images that are ready to use for commercial use. The idea for this splash screen was to make the image rotate between different images. I added a black to transparent scrim over the top so that the text could be seen easier. I used the blue #C7FFEE for the title color, and this is the only time this color shows up.

Interesting note: when I copied the design and changed the file type to Figma, the image did not transfer with the rest of the document, so I had to add back in the image again, and make sure it was the same as my original mockup in Sketch.

Route 1: Ride

Along with the designs, I made the titles of the routes. I went away from Mark’s original design here as for the routes, he had a routes to weather instead of to the clothing and back to the ride. I wanted to design it in a way that made it easier for the user to go back and edit the ride.

Marks original idea was to have the rider’s location be based on where they were at, but I made that editable in my mockup, having their current location be their default, as well as the date being the day of the bike ride.

I also designed a slider so that riders could choose their length of ride, the default being what they last inputted. In future iterations, I would want to mess with this a bit more.

Route 2: Clothing

I included the weather widget and the clothing in the same route, since it made sense to get all this data at once on the same page. I made the display for the weather widget simple, and I’m planning on designing a more thorough expanded widget in future iterations.

I used Mark’s design for displaying picture icons of the clothing to wear. After checking with him, there wouldn’t be more than five items in each section, so I was able to make these only one line. I did have a plan for if there were more icons, making a scroll bar on the line where the items were, but we didn’t have to worry about that this time.

I also solved the issue with progressive disclosure about the items. If you already had the items on hand, you didn’t need to know everything about those items, nor would you need a link to buy it. So I hid the information about the items, and the purchase options link in a drop down menu for each section of clothing. This can help those who don’t have the items on hand to know what items they need and where they could potentially get them at.

Body View

In the clothing route, there is a toggle at the bottom that lets the user see a full body view of how many layers and what items they would need for their ride. Mark and I are still working on this to make it a bit more polished. As for the body silhouette, we will want to either get this downloaded directly from Shutterstock, or find another one. I could potentially design one as well, but that could take a bit more time.

I also made the weather widget visible on the body view so if users would like the body view to be their default viewing option. This is something that may be made default in settings or on the route somewhere.

Future Iterations

Mark and his family had moved recently, so we haven’t had too much work since I made my first iteration with a couple of fixes. For the next iteration, we are going to focus on getting the weather widget dropdown designed, finalizing our fonts, and redesigning the body page to make more sense. It will be nice to see the design and the app’s functionality all put together eventually. Mark is still working on the publishing details of the app, as it takes a bit to be able to publish apps in the Apple app store.

Takeaways

This was my first time getting a paid commission to create app design, and that made me quite happy to work on something. I’m still working with Mark to make this design something that he could code. I could also help him with the CSS bit, as he is creating this app with React, a Javascript library I am familiar with.

I still have a lot to learn, but I’m happy so far with what I was able to do for Mark, and I would love to see this app design through to completion.

Thanks for reading!