The Process
I started this project by designing two wireframes for potential directions to go for the website. I looked at other application website designs on Dribbble and I referenced the images we had of the current application. At this point I was still experimenting with different ways to layout the background and the phone mock-ups.
Luckily, the brand already had a logo designed, so I knew which colors I wanted to highlight for the final design. I used pink and blue, because I felt that the blue would really stand out well against the pink design. This worked perfectly for my purposes in drawing the audience's eyes toward the blue call-to-action buttons.
Wireframe A
Wireframe B
The next step I had to learn how to incorporate all of essential information of the application into a website format. At this point I also began to finalize the copy used for the website. I was given free reign for deciding what to write for the copy, so I looked at the initial app store information and I went off of that to make it more detailed.
This was still an experimental phase for me, because I knew that I wanted to create more interest in the design by rearranging how the application was presented. I was also given a few stock images that the company bought a while ago to use in this project. I had to rearrange my initial layout to include the new stock photos and the anime mascot that was drawn for the application before.
After examining my medium fidelity mock-ups, I wanted to get into the testing phase. I knew that I would be coding this website by myself, so for that I first went into Bootstrap to look at the documentation. There were a lot of features I wanted to incorporate, so I had my work out ahead of me.
A few of the designs I made earlier, weren't too practical in terms of Bootstrap style responsive breakpoints, so I had to scrap the idea for some of them. I wanted to keep the design: simple, functional, and clean. This was my number one priority, so limiting the design to something I could feasibly make in a day was limiting, yet liberating for me.
Below are some alternate versions of some particular copy text that we were having trouble arranging within the space. I wanted to give a friendly image that could show how this app could benefit the spontaneou and meticulous planner sides in all of us.
Version A.
Version B
Unfortunately, while going over the design with my team, we decided we needed to make the copy shorter. We wanted the message for the app to be simpler and we decided that the planning section could wait for now, if we wanted to include it later we could, but to make the webpage more streamlined we decided to go ahead and code the website without this extra description section for the app.
Following this, I knew that I had to redo the design slightly to adjust for the new layout. I decided to go ahead and work within Bootstrap and to start prototyping with HTML and CSS. I figured that any kinks left in the design would best be decided during the actual coding process, so we can see how the site looks online more quickly.
A sample of the code written by me with my favorite code editor, Atom.
Notice, the Google Analytics script, which was the first time I experimented with adding it to a website.
As usual for my workflow, I started building the desktop version of the website first, but one problem I faced was how to determine the breakpoints for the mobile and tablet versions of the website. I feel that most people prefer working mobile first, but I prefer to see the full desktop to utilize all the space and then decide what to elimate when I go through the breakpoints.
One part that was extremely challenging for me was figuring out how to handle the mascot character for the application. The artist who drew the original work gave me the art files, but this particular character was drawn without having any feet. I solved the problem by cutting her feet off with the background color for the bottom image. However, I knew that once I tried to code it for mobile, I would run into problems with the hastag section wanting to break below the image.
You can see the new desktop layout for the website design in the photos above. Traditionally with Bootstrap breakpoints for desktop layouts moving into mobile, the content wants to break from left to right. This was a problem for me as you can clearly see the mascot doesn't have any feet! I knew how I wanted the final layout to look, so that it kept in line with the desktop version.
This mean that I needed to go back to the Bootstrap documentation to look at what my options were to solve this issue. Luckily for me, I discovered that Bootstrap has a specific class called "order-last" for this type of situation when you want the content to break in a different way than normal. Once I figured that out I was ready to go and I quickly finished building out the website. After I finished all the code in Atom, I took a sip of my green tea, and launched the website on Firebase, which you can view here or you can scroll down to see a high-fidelity mock-up for the project at the bottom of the page.
Final Wireframes
Desktop Version
Mobile Version
The Results
The project was fast, but I learned a lot about coding during this time. I realized that a lot of designs, while pretty aren't particularly functional. This was one of my biggest concerns after building this website; how to continually improve my designs and their functionality. After I made the wireframe, I also created two web banner advertisements for release on "The Best Japan", a travel information website based in Tokyo whose daily readers might appreciate the new applicatoin.
