Overview:
Wryder is a stablecoin conversion app that allows users to exchange US dollars for various types of stablecoin and vice versa.
The scope of this project was 0-1, so we had to not only design the entire responsive web app, but also develop style guides, branding, and a landing page along the way.
The team consisted of 4 product designers (including myself). I was active in the entire design process, but was also a co-lead on the hi-fi phase. We conducted competitive analysis for each feature / flow we developed, then jumped right into sketching, lo-fi, and hi-fi.
Because the scope of this project was so large, I will be focusing on the landing page, the conversion flow, and the account page that we designed.
Selected hi-fi screens from Wryder web app (mobile and web)
Landing Page:
The first aspect of this project was to design a landing page for Wryder in order to help them acquire customers even before launch. Even more importantly for our design team, the visual design decisions for the landing page would serve as a style guide once we moved into the actual app.
Because we already had set copy from Wryder's CEO, we jumped right into sketch to make different iterations with the information we were given.
3 initial layouts for Wryder's landing page
After presenting our designs to David, Wryder's founder and CEO, we ended up sticking with our first layout of the three shown above. Now we just had to iterate on that layout with different color options.
Once we showed David the second round of designs, we got feedback that the blue and the green seem to fit with the brand's vision the best, and so we were tasked with making a hybrid color palette between the two. He also liked the purple card from the second design, and wanted us to bring back the mountain silhouette from one of our preliminary layout designs. We also decided as a group that the amount of color should be turned down a bit. After a few more iterations the page - and many iterations on mountain silhouettes - we finally came up with a solution that fully fit the brand and was ready for launch.
Our solution was to use large areas of desaturated, greyed out blue-purple hues to balance our brighter areas - the bright purple card, the blue-green gradient in the upper corner, our bright teal CTA's, etc. We also spent many hours creating a mountain range silhouette that would serve as a footer graphic, as requested by David. These decisions eventually lead us to a harmonious color palette, type set, as well as graphics that matched David's vision. We then used this developed style guide to begin designing the actual app.
Convert Flow:
Our main challenge with this project was to create a very easy and streamlined way for users to convert USD into the various stablecoin types that Wryder supports (Tether, TruUSD, Dai, Anchorpoint, and Stronghold) and vice versa. This feature would be the hook of the app, so it had to be very user-friendly.
After looking at several other blockchain and finance apps that deal with money conversions, we started sketching out solutions as a team, thinking about mobile designs first.
Then we built a lo-fi wireframes for both mobile and web.
Lo-fi mobile and web screens for conversion flow
Using components and colors from our finished landing page as a guide, I treated the flow with some much needed visual polish.
Selected hi-fi screens from the conversion flow for mobile
One aspect of the web design that I'm particularly proud of is how the conversion table auto-updates with appropriate amounts, fees, and corresponding logos as a user is typing in their information.
Account Screen:
The account page for the Wryder app proved to be a great challenge for our team. Just like the rest of our design process for responsive, we decided to tackle the account page on a mobile breakpoint first. After completing some initial sketches, we jumped into a lo-fi wireframe...and behold! This was our terrible first stab at Wryder's account page.
First draft of account screen
It didn't take us long to figure out that this design was not only incredibly unremarkable, but also quite limiting - we hadn't even considered a transaction (or exchange) history, and we were not emphasizing the Wryder Card enough. We also realized a pie chart wouldn't be the most effective data vis tool for what we were trying to show. It was time to iterate again! Because we were so far off, I decided to sketch some ideas first.
My sketches for an updated v2 account screen with bar graphs
Once we decided a bar graph was the best data vis solution, I took to sketch to create some mid-fi mock ups of our sketches in web and mobile formats.
Account page mock up v2
Still not visually polished - but the nuts, bolts, and functionality were coming together. Our information architecture was displayed more efficiently, but our data vis was still not the clearest - even with our change from a pie chart to a bar graph. It was all too cluttered. We also learned we would need to include at least a link to Wryder's support center. I took to sketching one more time thinking specifically about the visual design of the account page.
My sketches for account page modules
I decided it would be best to modularize the design - this would also make it easier to design and engineer across breakpoints. The only main difference between mobile and web would be that the "account details" module would live in the nav in the mobile version. This was so that users could easily view their account details no matter where they were in the mobile app. Below are the finalized designs for mobile and web.
Final versions of Wryder account page for mobile and web
Conclusion:
Wryder was a particularly challenging project because I didn't know much about blockchain exchanges at the start. I was forced to wrap my head around new, complex problems and bang my head against a wall until I eventually came up with the simplest solution. I think this is best exemplified in the evolution of the account page. I also prepared our file for handoff and was the point of contact between our design team and Wryder's dev team. All in all, our client was extremely happy with what we delivered, and it was rewarding to work on both branding and product design in the same project.