4.9 KiB
| title | aliases | tags | |
|---|---|---|---|
| low-fidelity-prototypes |
|
Inital Designs
Navigation
The first thing I wanted to was get a clear picture of how each screen should interact with the others. Identified three main screens: Home, Friends, and Schedule. I also identified some supplementary screens: Trick options, other settings, and welcome, and some more optional screens: Trick lists, trick dictionary.
I also listed some things that each screen should contain
General protoypes
Next I started to get down down general ideas about all of the screens. The main goal of this step for was to figure out the general flow of the app, and to get a general idea of how each screen should look.
This first two pages I was experimenting mostly with the home screen. I tried three different layouts: Top tabs, Bottom tabs, and floating bottom buttons. I also started to explore ways for the user to navigate from the home screen to the trick options screen, and the schedule screen.
The second page I explored a some variations on the floating button design. And begin experimenting with the navigation and layout of the friends screen.
On the third page I kept experimenting with the friends page.
In depth prototypes
Home screen
I wanted to keep the layout mostly based on googles material design. This will help with four design heuristics: Familiar metaphors and language, consistency and standards, recognition over recall, and minimalist design.
I started with creating an partly new design that combined the floating buttons, and the swipe feature for trick options. I decided against this as within material design it is not reccomended to have multiple floating buttons. I decided instead to use bottom tabs as they are the most logical, and familiar design for users.
I also decided against the swipe feature to show tricks, and opted instead for a button which opened another screen.
I also tried out some other designs features a black background and round buttons.
Other settings
Trick Options
For the trick Options I considered a few three main designs: the swipe/scroll, the modal, and the full screen.
Welcome
Schedule
Version 1
After getting a general Idea of the basic layout of the app, I compiled my favourite versions of each screen into one design. This allowed to informally evaluate the design and find things to change.
Version 2
The first Thing I want to change is the schedule/altitude screen. I thought I could remove the separation and combine the two screens. But this didn't work so well. However, I think the ability to switch between meters and feet was good as this improves user control and freedom. Also the use of the spinner for time and altitude selection will be familiar to most users. This improves use of consistency and standards, and recognitiona over recall. I also decided to try a "switch" type design, where the user is forced to chooose between the schedule and the altitude.
I think think this works much better as it shows the system status clearly. And has a less cluttered more miniml, aesthetic design. I kept the weekday selection on both screens as the might only want use the altitude system on certain days. This improves, user control and freedom.
I also thought it might not be super clear what the functions of the two options were, especially the altitude option. So decided to add a closable info card with some information. This improves help and documentation
I also wanted to change the way the trick options worked. Instead of have the save cancel buttons I wanted the settings change to have immediate effect, so the user didn't have to save. These changes are in the second row of the first page of version 2. The actual options themselves are largely the same, except I added a header with a back button and removed the bottom save and cancel buttons. Next I changed the dropdown for each of the trick types to individual screens with the commonly used right chevron icon.
I also added the bottom navigation bar back to the trick options screens to improve user control and freedom
Version 3
After I had mostly finished the Layout. I changed the look to match the snowboarding "aesthetic", by making the app primarily black. However I dont think this design was as easy to use as the normal light design.
