Lottery.com

Lottery.com was looking to create their first mobile application. They wanted an updated and modern identity that will later be integrated into the desktop site redesign. The mobile first approach is the first step in a rolling design overhaul. The mobile application is intended to focus on account personalization and speed of information discovery.

My Role

UX/UI Designer working alone. I evaluated the site Google Analytics, performed competitive analysis, interviewed users, sketched, wireframed, and designed all visual components from the logo to the user interface.

Challenges

Lottery.com does not currently have a mobile application or a responsive website. They wanted a mobile app that would act as the first step in a new identity and take the Lottery.com brand in a more current direction. The challenge was to keep the tone and feel of desktop site while creating a design that can easily be adapted to other devices in the near future.

Solution

A clean and flat design that put the most used and viewed features at the forefront. Through research I discovered that most users visit Lottery.com to check favorite game results as well as to use the extremely popular "Lucky Number Generator". The solution was a customizable homepage and a easy-access, one-tap navigation bar.

Login page; Appears upon open for first time

Research

My research focused on understanding how users interacted with the desktop site and then used those findings to translate them into a mobile solution. I looked at how other lottery result apps organized and presented their information. I also took note of layout, presentation, and color trends present in competitor applications.

Competitive analysis

Sketching and Wireframing

After conducting a wide range of research, I began to flesh out the key takeaways. I started by sketching out my ideas and then turning those sketches into high-fidelity wireframes. Through wireframing I was able to play around with layout and iterate on my original sketches.

Wireframes for various application screens
Annotated wireframes

Branding

After creating wireframes and designing layout I needed to create a new logo. Once the logo was created I would be able to skin the wireframes and develop identity through visual design. The colors and style are based off the original brand but everything is flattened for a modern feeling.