From today, I am starting to design bit more complex websites which will take more than one day to be completed (because of my Co-Op schedule). I am working with a cool idea I found from App-Ideas repo on GitHub. I will be making a website that can show a timeline of particular user or user’s public repository.
I spent my most of today’s time in the discovery phase. I have not used GitHub API yet so I was not sure what and how we get data from server. I needed to do some research on this before I start designing it. I will suggest everyone to follow this step if you are designing for a client which talks to API. This helps you to understand how can we show that data to user with nice UI and UX. I have a bit busy schedule nowadays and I do not want to move my focus from design to code for now. So there might be some small design changes during the development of this website. I will be modifying the template as I know more about the API’s response.
Once I had the basic knowledge of API, I knew what details I have to display for search results. I started creating wireframes for this website. As this website can generate timeline for User as well as user's repository, I wanted to let user know that they have multiple options to search. To solve this UX issue, I added dropdown before the text box which will have three options: All, Users and Repos. Website will have autoload so that user can see the related results. I will be disabling the submit event in this repo as I did not want to design and develop search page for this website. I wanted to keep user's search experience short and simple.
I just followed the designs from index page and created wireframes for other pages. I ended up with three 404 pages. You might think that, Harsh why do we have three different 404 pages in one website? The reason was the context. I has a generic 404 page, 404 page for user's page and one for repo's page. I had to design these pages to handle the scenario when user visits the timeline page with wrong URL which will make an invalid user/repo name. During the development of 404 page, I got an idea to improve the UX. If user has entered the wrong repo name for the user, there will be a button which will open the modal containing list of all the public repos of that user. This way user can continue browsing around in the website.
I have not started designing in Figma yet. Some people might think that, if I have not designed anything today, that means I broke the challenge. But I do not think that is the case. I always take research and wire-framing process as essential parts of the website. I might not have started drawing layers in Figma, but I have completed most of the ground work for tomorrow. These steps will rapidly increase my design speed and I will be able to focus more on design itself rather than thinking about UX or layout that much.
Sorry for bad hand-writing in the wireframe image 😅!
Yesterday's design: #009 - Mind Reader Game
Tomorrow's Plan: Creating Final design for GitHub Timeliner in Figma
Top comments (0)