TIMESY
A countdown mobile app for exams, aimed for students
Background
After using a Countdown mobile app and reading in the app reviews that some reviewers used it to countdown for exams, I decided to design an app especially for students that want to countdown for exams.
Methods
•Competitive Analysis
•Secondary Research
•User Flow Diagram
•Wireframing
•Usability Testing
•Prototyping
Tools
•Figma
•Miro
•Maze
Deliverables
•Wireframes
•Clickable Prototype
•Mockups
Key Learning Takeaways
•Using wireframing UI Kits on Figma to speed up the wireframing procces
•Defining the tasks and asking non-leading questions for unsupervised, remote usability testing
•Selecting a colour palette that is uniform and aligning with the application's character
•Discovering free illustration sources
Process
Due to having limited resources and not being able to find participants to conduct user research for this project, I decided to do competitive analysis instead as a way to see what the competitors offered, what was working and what did not work. My plan was to design an app with simple functionality and improve it through testing.
I noticed that most countdowns offered a widget, and the ability to add multiple events. They also offered the ability to personalise your event countdown by adding background colours, images and even decorative fonts to each countdown, however the app UI and the countdowns cards were not minimal nor easy to read, and felt outdated.
Image 1. Competitive Analysis
Since none of the countdowns I found was aimed specifically to students, I decided to create one, especially with this audience in mind. Doing secondary research, I found that the number of students in the UK was was 2.53 million between 2019-2020 (hesa.ac.uk), so there was potentially a large target audience for this application.
Building on the existing countdowns, I decided to create a minimal yet fun countdown that would be contemporary and customisable. The ability to customise was very important as individuality and self-expression are especially important for young people.
How might we create a minimal yet fun exam countdown?
How might we create a customisable exam countdown?
I listed the top tasks my app would perform. The top tasks were:
-
Add event countdown (Title, date, time, reminder, colour)
-
Select background illustration
-
See Countdown list
-
Organise items on list
I created a user flow diagram and sketched ideas. I annotated the sketches and chose the ones I would like to go ahead with.
Image 2. User flow diagram
Image 3. Annotated sketches
I sketched my solutions and annotated the sketches. I selected the solutions that were uncluttered and presented the information in a clear and consistent manner, and started creating my low fidelity wireframes in Figma.
To speed up my process I used a wireframing kit. I also created an MVP which I tested with 6 users on Maze in order to discover any issues with my designs early. I put effort into writing tasks and asking questions in a neutral way that would not lead the user.
Image 4. Usability testing results
After completing the usability testing cycle, I started designing my mid-fidelity wireframes. I decided to differentiate from my competitors and give users the ability to customise the main screen background using illustrations. I chose to do this instead of offering the ability to add images for each countdown card as I find this to be more easy to read and minimal. What is more, I consider illustrations more contemporary, warm and delightful.
For the colour palette of my app, I drew inspiration from Dribbble illustrations, as well as Blush, Icons8 and even kids magazine Anorak. I chose Rubik as my app's font, as it is an easy to read, sans-serif font that also looks contemporary and clean.
Images 5, 6 and 7. Inspiration for the colour palette and style of my designs from Blush (top), illustrations in Icons8 (middle) and Anorak magazine (bottom)
I then moved on creating the high fidelity wireframes and a clickable prototype. I got feedback from a friend and slightly changed my colour palette in order for all the theme colours to align with the character of my app which aimed to be calm and reassuring, as exams can be perceived as stressful events and I did not want to overwhelm the users.
Image 8. Initial colour palette (left) and new colour palette (right).
In order to select the updated colour palette I used the Material Colour tool and selected colours with the same brightness. I changed the top bar and flowing action button (FAB) to be a less saturated colour so that it compliments the countdown cards which can have bolder colours.
Image 9. Material design color tool, showing the level of brightness chosen for the app themes
Checking back my initial 'top tasks' list, I noticed that I had not included in my designs the option to order the countdown cards. I created updated sketches exploring the different ways this would be portrayed. I decided to create a mini drop-down list on the top right side of the screen (below the top navigation bar) and to offer the option to organise information based on Date or Alphabetically. I also gave users the option to 'star' countdown cards as a way to indicate their importance and move them to the top of the list.
I updated my high-fidelity wireframes accordingly and created a high-fidelity, clickable prototype.
Image 10. High-fidelity wireframes before (left) and after (right) adding the 'Order by' list
Image 11. Animated video of the clickable high-fidelity prototype of Timesy
Next steps
As a next step I would perform usability testing on the high-fidelity prototype to discover any user problems. I would also create a widget as most countdown applications offer that.